← 静的パーツギャラリーへ戻る

パーツ番号 11-08-02 ・ CSSのみ

ミニ棒グラフウィジェット(固定値)

週間データを固定の高さの棒グラフで表示するウィジェットです。管理画面の活動サマリーや会員の利用状況カードに配置できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-08-02-card">
          <div class="d11-08-02-title">週間投稿数</div>
          <div class="d11-08-02-bars">
            <div class="d11-08-02-col"><span class="d11-08-02-bar d11-08-02-h1"></span><em>月</em></div>
            <div class="d11-08-02-col"><span class="d11-08-02-bar d11-08-02-h2"></span><em>火</em></div>
            <div class="d11-08-02-col"><span class="d11-08-02-bar d11-08-02-h3"></span><em>水</em></div>
            <div class="d11-08-02-col"><span class="d11-08-02-bar d11-08-02-h4"></span><em>木</em></div>
            <div class="d11-08-02-col"><span class="d11-08-02-bar d11-08-02-h5"></span><em>金</em></div>
            <div class="d11-08-02-col"><span class="d11-08-02-bar d11-08-02-h6"></span><em>土</em></div>
            <div class="d11-08-02-col"><span class="d11-08-02-bar d11-08-02-h7"></span><em>日</em></div>
          </div>
        </div>

CSS

.d11-08-02{background:#f8fafc}
        .d11-08-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)}
        .d11-08-02-title{font-size:12px;font-weight:700;color:#475569;margin-bottom:14px}
        .d11-08-02-bars{display:flex;align-items:flex-end;gap:10px;height:120px}
        .d11-08-02-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end}
        .d11-08-02-bar{width:100%;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#818cf8,#6366f1);display:block}
        .d11-08-02-h1{height:40%}.d11-08-02-h2{height:65%}.d11-08-02-h3{height:50%}.d11-08-02-h4{height:85%}.d11-08-02-h5{height:70%}.d11-08-02-h6{height:35%}.d11-08-02-h7{height:25%}
        .d11-08-02-col em{font-size:10px;color:#94a3b8;font-style:normal;margin-top:6px}

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