手順やフローを紹介する時に便利なタイムラインパーツのコーディング【Webサイト制作案件でよく使うサンプルコード】

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

HTML、CSSで、タイムラインパーツを作りたい
左に数字、右にタイトルと説明文を入れられるタイムラインパーツのコーディング方法が知りたい
コピペでOKな、タイムラインパーツのコードを見たい

という方のお悩みを解決します！

今回、紹介するサンプルコードはぼくがかつて、実際のWebサイト制作案件で使用したものです。

LPやサービスサイトで何らかの手順やフローを紹介するときに用いられることが多いデザインパーツのコピペでOKなコードを紹介します。

かなり汎用性のあるパーツですので、Web制作案件をこなしていたら必ず1度は作ることになるでしょう。

とりあえずコピペで実装できれば、後は調整するのみなのでぜひ活用してみてください。

同じ様なパーツのコーディングで躓いている方の助けになれれば幸いです！！

完成イメージ
シンプルなタイムラインパーツのサンプルコード
- HTML
- CSS
まとめ

完成イメージ

今回紹介するコードで実現できるタイムラインのデザインはこちら！

▼▼▼

いかがでしょう？

一度ならず二度は見かけたことがあるデザインではないでしょうか。

右側には正円の中に数字と縦の棒、左側はタイトルと項目の説明文を入れられるのが大きな特徴となります。

スマートフォン表示でもほぼ同じ見た目を維持できます。

子要素を横並びにすることで有名なdisplay:flexやtransform:translate、absoluteなどを駆使して実装します。

以下で紹介するコードをお使いいただければ、とりあえず見た目だけは秒で再現できます！

それでは見ていきましょう〜〜

シンプルなタイムラインパーツのサンプルコード

こちら、CodePenで作った見本です！

この画面だと本来のPCサイズで表示されないので、ぜひCodePenのページへ行って確かめてみていただきたいでありんす。

See the Pen
wvMjqyd by 石森裕也 (@yuyaphotograph)
on CodePen.

HTML

こちら、今回のタイムラインデザインのHTML構造です！

フローのブロックの数を増やしたい場合は、2番目以降の「List-Item」の塊を増やしてあげればOK！

HTML

<div class="Inner">
  <div class="List">
    <div class="List-Item">
      <div class="List-Item-Content one">
        <div class="List-Item-Content-Number">1</div>
        <div class="List-Item-Content-Title">タイトル</div>
        <div class="List-Item-Content-Description">
          テキストテキストテキスト<br>
          テキストテキストテキスト
        </div>
      </div>
    </div>
    <div class="List-Item">
      <div class="List-Item-Content">
        <div class="List-Item-Content-Number">2<div class="List-Item-Content-Number-Line"></div></div>
        <div class="List-Item-Content-Title">タイトル</div>
        <div class="List-Item-Content-Description">
          テキストテキストテキスト<br>
          テキストテキストテキスト
        </div>
      </div>
    </div>
    <div class="List-Item">
      <div class="List-Item-Content">
        <div class="List-Item-Content-Number">3<div class="List-Item-Content-Number-Line"></div></div>
        <div class="List-Item-Content-Title">タイトル</div>
        <div class="List-Item-Content-Description">
          テキストテキストテキスト<br>
          テキストテキストテキスト
        </div>
      </div>
    </div>
  </div>
</div>

CSS

こちらスタイリングです！

文字サイズや、ボーダーの色、各項目の横幅、縦棒の大きさなどはよしなに変更してお使いください。

CSS

.Inner {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

p{
  margin: 0;
  padding: 0;
}
li{
  list-style: none;
}

.List-Item {
  border-top: 1px solid #ddd;
  width: 100%;
}
@media screen and (max-width: 540px) {
  .List-Item {
    border-top: 0;
  }
}
.List-Item:nth-of-type(1) {
  border-top: 0;
}
.List-Item-Content {
  margin-left: auto;
  margin-right: auto;
  padding-top: 30px;
  padding-bottom: 30px;
  max-width: 1100px;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 540px) {
  .List-Item-Content {
    padding-top: 15px;
    padding-bottom: 15px;
    flex-wrap: wrap;
  }
}
.List-Item-Content.one {
  padding-top: 0;
}
.List-Item-Content-Number {
  position: relative;
  margin-right: 40px;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  background: #5bc8ac;
  color: #fff;
  font-size: 36px;
}
@media screen and (max-width: 540px) {
  .List-Item-Content-Number {
    margin-right: 20px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 24px;
  }
}
.List-Item-Content-Number-Line {
  position: absolute;
  top: -36%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 4px;
  height: 66px;
  background: #5bc8ac;
}
@media screen and (max-width: 540px) {
  .List-Item-Content-Number-Line {
    top: -80%;
    width: 2px;
    height: 72px;
  }
}
.List-Item-Content-Title {
  margin-right: 48px;
  flex-basis: 298px;
  color: #5bc8ac;
  font-size: 24px;
}
@media screen and (max-width: 540px) {
  .List-Item-Content-Title {
    margin-right: 0;
    max-width: 230px;
    font-size: 18px;
  }
}
.List-Item-Content-Description {
  line-height: 1.5;
  font-size: 16px;
}
@media screen and (max-width: 540px) {
  .List-Item-Content-Description {
    margin-left: 60px;
    max-width: 260px;
    font-weight: normal;
    font-size: 13px;
  }
}

まとめ

以上、実務でよく使われるタイムラインパーツのコーディングのサンプルコードを紹介しました。

コーポレートサイトやLPの制作案件をする際に必ずや！役立つスキルとなりますのでぜひ覚えていきましょう〜！

コーディングスキルアップシリーズはこちら！