パーツ番号 05-12-01 ・ CSSのみ

縦棒グラフ(グリッド線背景・固定表示)

背景にうっすらとしたグリッド線を敷いた固定高さの縦棒グラフです。実データを持たない装飾用ビジュアルとして、資料紹介ページやブログ記事の挿絵に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-12-01-chart">
          <div class="d05-12-01-col"><span class="d05-12-01-bar d05-12-01-v1"></span><span class="d05-12-01-lbl">1月</span></div>
          <div class="d05-12-01-col"><span class="d05-12-01-bar d05-12-01-v2"></span><span class="d05-12-01-lbl">2月</span></div>
          <div class="d05-12-01-col"><span class="d05-12-01-bar d05-12-01-v3"></span><span class="d05-12-01-lbl">3月</span></div>
          <div class="d05-12-01-col"><span class="d05-12-01-bar d05-12-01-v4"></span><span class="d05-12-01-lbl">4月</span></div>
          <div class="d05-12-01-col"><span class="d05-12-01-bar d05-12-01-v5"></span><span class="d05-12-01-lbl">5月</span></div>
        </div>

CSS

.d05-12-01{padding:20px 20px 16px;align-items:stretch}
        .d05-12-01-chart{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;width:100%;height:180px;background-image:repeating-linear-gradient(to top,#eef1f5 0,#eef1f5 1px,transparent 1px,transparent 36px);border-bottom:2px solid #cbd5e1}
        .d05-12-01-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;flex:1;height:100%}
        .d05-12-01-bar{display:block;width:100%;max-width:26px;border-radius:4px 4px 0 0;background:#f59e0b}
        .d05-12-01-v1{height:38%}
        .d05-12-01-v2{height:62%}
        .d05-12-01-v3{height:50%}
        .d05-12-01-v4{height:85%}
        .d05-12-01-v5{height:70%;background:#d97706}
        .d05-12-01-lbl{margin-top:8px;font-size:10.5px;color:#94a3b8;font-weight:600}

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