パーツ番号 06-08-03 ・ CSSのみ

横型ステップタイムライン(静止)

経歴を横一列のステップとして並べる表示形式です。会社概要や採用ページの沿革紹介に活用できます。

staticcss

プレビュー

ソースコード

HTML

<ol class="d06-08-03-row">
          <li><span class="d06-08-03-num">1</span><span class="d06-08-03-yr">2017</span><p>大学卒業</p></li>
          <li><span class="d06-08-03-num">2</span><span class="d06-08-03-yr">2019</span><p>初就職</p></li>
          <li><span class="d06-08-03-num">3</span><span class="d06-08-03-yr">2022</span><p>転職</p></li>
          <li><span class="d06-08-03-num">4</span><span class="d06-08-03-yr">2025</span><p>現職</p></li>
        </ol>

CSS

.d06-08-03{padding:24px 14px;}
        .d06-08-03-row{list-style:none;display:flex;margin:0;padding:0;width:100%;}
        .d06-08-03-row li{flex:1;position:relative;text-align:center;padding-top:22px;}
        .d06-08-03-row li::before{content:"";position:absolute;top:11px;left:0;right:0;height:2px;background:#dde2e8;}
        .d06-08-03-row li:first-child::before{left:50%;}
        .d06-08-03-row li:last-child::before{right:50%;}
        .d06-08-03-num{position:absolute;top:0;left:50%;transform:translateX(-50%);width:22px;height:22px;line-height:22px;border-radius:50%;background:#2f9e6e;color:#fff;font-size:11px;font-weight:700;}
        .d06-08-03-yr{display:block;font-size:11px;font-weight:700;color:#2f9e6e;margin-bottom:2px;}
        .d06-08-03-row p{margin:0;font-size:10.5px;color:#666;}

クラス名 .d06-08-03 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。