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

縦棒グラフ(静止・月別)

月別のデータ量を固定高さの縦棒で表す静止グラフです。売上推移やアクセス数の月次レポート表示に活用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-09-05-chart">
          <div class="d05-09-05-col"><span class="d05-09-05-bar d05-09-05-m1"></span><span class="d05-09-05-mo">1月</span></div>
          <div class="d05-09-05-col"><span class="d05-09-05-bar d05-09-05-m2"></span><span class="d05-09-05-mo">2月</span></div>
          <div class="d05-09-05-col"><span class="d05-09-05-bar d05-09-05-m3"></span><span class="d05-09-05-mo">3月</span></div>
          <div class="d05-09-05-col"><span class="d05-09-05-bar d05-09-05-m4"></span><span class="d05-09-05-mo">4月</span></div>
          <div class="d05-09-05-col"><span class="d05-09-05-bar d05-09-05-m5"></span><span class="d05-09-05-mo">5月</span></div>
          <div class="d05-09-05-col"><span class="d05-09-05-bar d05-09-05-m6"></span><span class="d05-09-05-mo">6月</span></div>
        </div>

CSS

.d05-09-05{padding:20px 20px 16px;align-items:stretch}
        .d05-09-05-chart{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;width:100%;height:170px}
        .d05-09-05-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;flex:1;height:100%}
        .d05-09-05-bar{display:block;width:100%;max-width:26px;border-radius:4px 4px 0 0;background:#0ea5e9}
        .d05-09-05-m1{height:45%}
        .d05-09-05-m2{height:62%}
        .d05-09-05-m3{height:38%}
        .d05-09-05-m4{height:80%}
        .d05-09-05-m5{height:58%}
        .d05-09-05-m6{height:96%;background:#0369a1}
        .d05-09-05-mo{margin-top:8px;font-size:10.5px;color:#94a3b8;font-weight:600}

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