パーツ番号 01-06-11 ・ CSSのみ

縦型タイムライン構成

1本の縦線と丸ドットで年表・沿革を示す静止レイアウトです。WordPressの会社概要ページや沿革紹介セクションの骨組みに使えます。

staticcss

プレビュー

ソースコード

HTML

<ul class="d01-06-11-tl">
          <li><span class="d01-06-11-dot"></span><div><b>2023年</b><p>サービス開始</p></div></li>
          <li><span class="d01-06-11-dot"></span><div><b>2024年</b><p>利用者1万人突破</p></div></li>
          <li><span class="d01-06-11-dot"></span><div><b>2026年</b><p>大型リニューアル</p></div></li>
        </ul>

CSS

.prev.d01-06-11{padding:20px 24px;align-items:flex-start}
        .d01-06-11-tl{list-style:none;margin:0;padding:0;position:relative;width:100%;max-width:240px}
        .d01-06-11-tl::before{content:"";position:absolute;left:5px;top:4px;bottom:4px;width:2px;background:#e2e8f0}
        .d01-06-11-tl li{position:relative;display:flex;gap:14px;padding-bottom:20px}
        .d01-06-11-tl li:last-child{padding-bottom:0}
        .d01-06-11-dot{width:12px;height:12px;border-radius:50%;background:#457b9d;flex:none;margin-top:3px;position:relative;z-index:1;box-shadow:0 0 0 3px #fff}
        .d01-06-11-tl b{display:block;font-size:12.5px;color:#1d3557;margin-bottom:2px}
        .d01-06-11-tl p{margin:0;font-size:11.5px;color:#777;line-height:1.6}

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