パーツ番号 02-07-39 ・ CSSのみ

バーインジケータ見出し

高さの異なる棒を並べたミニグラフ風の飾りを見出し左に添えるスタイル。実績データや成長を伝えるレポート見出しに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <span class="bars">
            <span class="b"></span><span class="b"></span><span class="b"></span><span class="b"></span>
          </span>
          <h4 class="ttl">成長率レポート</h4>
        </div>

CSS

.d02-07-39 .wrap{ display:flex; align-items:center; gap:14px; }
        .d02-07-39 .bars{ display:flex; align-items:flex-end; gap:3px; height:34px; flex-shrink:0; }
        .d02-07-39 .bars .b{ display:block; width:5px; background:#0ea5e9; border-radius:2px; }
        .d02-07-39 .bars .b:nth-child(1){ height:10px; }
        .d02-07-39 .bars .b:nth-child(2){ height:18px; }
        .d02-07-39 .bars .b:nth-child(3){ height:26px; background:#0369a1; }
        .d02-07-39 .bars .b:nth-child(4){ height:34px; background:#0369a1; }
        .d02-07-39 .ttl{ all:unset; font-size:19px; font-weight:800; color:#1f2937; }

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