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

ミニ棒グラフウィジェット

週間データを小さな棒グラフで表示。画面に入ると各バーが下から伸びます。管理画面の活動サマリーや会員の利用状況カードに。

scrollcss

プレビュー

ソースコード

HTML

<div class="d05-05-02-card">
          <div class="d05-05-02-title">週間投稿数</div>
          <div class="d05-05-02-bars">
            <div class="d05-05-02-col"><span class="d05-05-02-bar" style="--h:40%"></span><em>月</em></div>
            <div class="d05-05-02-col"><span class="d05-05-02-bar" style="--h:65%"></span><em>火</em></div>
            <div class="d05-05-02-col"><span class="d05-05-02-bar" style="--h:50%"></span><em>水</em></div>
            <div class="d05-05-02-col"><span class="d05-05-02-bar" style="--h:85%"></span><em>木</em></div>
            <div class="d05-05-02-col"><span class="d05-05-02-bar" style="--h:70%"></span><em>金</em></div>
            <div class="d05-05-02-col"><span class="d05-05-02-bar" style="--h:35%"></span><em>土</em></div>
            <div class="d05-05-02-col"><span class="d05-05-02-bar" style="--h:25%"></span><em>日</em></div>
          </div>
        </div>

CSS

.d05-05-02{background:#f8fafc}
        .d05-05-02-card{width:260px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:18px 20px 12px;box-shadow:0 6px 18px rgba(15,23,42,.06)}
        .d05-05-02-title{font-size:12px;font-weight:700;color:#475569;margin-bottom:14px}
        .d05-05-02-bars{display:flex;align-items:flex-end;gap:10px;height:120px}
        .d05-05-02-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end}
        .d05-05-02-bar{width:100%;height:0;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#818cf8,#6366f1);transition:height .8s cubic-bezier(.22,1,.36,1)}
        .io-reveal.is-in .d05-05-02-bar{height:var(--h)}
        .d05-05-02-col em{font-size:10px;color:#94a3b8;font-style:normal;margin-top:6px}

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