パーツ番号 05-09-11 ・ CSSのみ

年度別数字推移タイムライン(静止)

横一直線に並べた年度ごとの数値をノードで結んだ静止タイムラインです。会員数や売上の年次推移を伝える資料に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-09-11-line">
          <div class="d05-09-11-pt"><span class="d05-09-11-val">120</span><span class="d05-09-11-node"></span><span class="d05-09-11-yr">2022</span></div>
          <div class="d05-09-11-pt"><span class="d05-09-11-val">210</span><span class="d05-09-11-node"></span><span class="d05-09-11-yr">2023</span></div>
          <div class="d05-09-11-pt"><span class="d05-09-11-val">340</span><span class="d05-09-11-node"></span><span class="d05-09-11-yr">2024</span></div>
          <div class="d05-09-11-pt d05-09-11-now"><span class="d05-09-11-val">520</span><span class="d05-09-11-node"></span><span class="d05-09-11-yr">2025</span></div>
        </div>

CSS

.d05-09-11{padding:20px}
        .d05-09-11-line{display:flex;align-items:flex-end;gap:6px;width:100%;position:relative}
        .d05-09-11-line::before{content:"";position:absolute;left:0;right:0;top:32px;height:2px;background:#e2e8f0}
        .d05-09-11-pt{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1}
        .d05-09-11-val{font-size:11px;font-weight:700;color:#334155;margin-bottom:6px}
        .d05-09-11-node{width:10px;height:10px;border-radius:50%;background:#94a3b8;border:2px solid #fff}
        .d05-09-11-now .d05-09-11-node{background:#6366f1;width:14px;height:14px}
        .d05-09-11-yr{margin-top:6px;font-size:9.5px;color:#94a3b8}

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