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

ミニマル年表(装飾最小)

線と年号だけで構成した装飾を抑えた年表です。落ち着いたトーンのコーポレートサイトの沿革欄に合わせやすい形式です。

staticcss

プレビュー

ソースコード

HTML

<ul class="d06-08-08-list">
          <li><span class="d06-08-08-yr">2015</span><span class="d06-08-08-txt">入社</span></li>
          <li><span class="d06-08-08-yr">2018</span><span class="d06-08-08-txt">主任</span></li>
          <li><span class="d06-08-08-yr">2021</span><span class="d06-08-08-txt">課長</span></li>
          <li><span class="d06-08-08-yr">2025</span><span class="d06-08-08-txt">部長</span></li>
        </ul>

CSS

.d06-08-08{padding:24px 20px;}
        .d06-08-08-list{list-style:none;margin:0;padding:0;width:100%;border-top:1px solid #e5e8ee;}
        .d06-08-08-list li{display:flex;justify-content:space-between;padding:9px 2px;border-bottom:1px solid #e5e8ee;font-size:11.5px;}
        .d06-08-08-yr{color:#999;letter-spacing:.04em;}
        .d06-08-08-txt{color:#333;font-weight:600;}

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