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

年号強調型タイムライン

年号を大きな文字で強調したシンプルな経歴リストです。プロフィールページで実績を印象的に見せたい場合に適します。

staticcss

プレビュー

ソースコード

HTML

<ul class="d06-08-04-list">
          <li><span class="d06-08-04-yr">2016</span><div class="d06-08-04-txt"><h4>キャリアスタート</h4><p>広告代理店にデザイナーとして入社</p></div></li>
          <li><span class="d06-08-04-yr">2020</span><div class="d06-08-04-txt"><h4>アートディレクター</h4><p>複数ブランドの制作統括を担当</p></div></li>
          <li><span class="d06-08-04-yr">2024</span><div class="d06-08-04-txt"><h4>独立開業</h4><p>自身のスタジオを設立</p></div></li>
        </ul>

CSS

.d06-08-04{padding:22px 18px;}
        .d06-08-04-list{list-style:none;margin:0;padding:0;width:100%;}
        .d06-08-04-list li{display:flex;align-items:flex-start;gap:14px;padding:10px 0;border-bottom:1px dashed #e2e6ec;}
        .d06-08-04-list li:last-child{border-bottom:none;}
        .d06-08-04-yr{flex:0 0 auto;font-size:22px;font-weight:800;color:#1f2b45;line-height:1;font-family:Georgia,serif;}
        .d06-08-04-txt h4{margin:0 0 3px;font-size:13px;color:#222;}
        .d06-08-04-txt p{margin:0;font-size:11px;color:#888;line-height:1.5;}

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