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

ワッフルチャート(100マス方眼の割合表示)

10×10のマス目のうち塗りつぶした数で割合を表すワッフルチャートの静止表現です。円グラフより直感的に「何%が該当するか」を伝えたいレポートページの図解に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-12-11-wrap">
          <div class="d05-12-11-grid">
            <span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span>
            <span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span>
            <span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span>
            <span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span>
            <span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span>
            <span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span>
            <span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span>
            <span class="d05-12-11-cell f"></span><span class="d05-12-11-cell f"></span><span class="d05-12-11-cell"></span><span class="d05-12-11-cell"></span><span class="d05-12-11-cell"></span><span class="d05-12-11-cell"></span><span class="d05-12-11-cell"></span><span class="d05-12-11-cell"></span><span class="d05-12-11-cell"></span><span class="d05-12-11-cell"></span>
            <span class="d05-12-11-cell"></span><span class="d05-12-11-cell"></span><span class="d05-12-11-cell"></span><span class="d05-12-11-cell"></span><span class="d05-12-11-cell"></span><span class="d05-12-11-cell"></span><span class="d05-12-11-cell"></span><span class="d05-12-11-cell"></span><span class="d05-12-11-cell"></span><span class="d05-12-11-cell"></span>
            <span class="d05-12-11-cell"></span><span class="d05-12-11-cell"></span><span class="d05-12-11-cell"></span><span class="d05-12-11-cell"></span><span class="d05-12-11-cell"></span><span class="d05-12-11-cell"></span><span class="d05-12-11-cell"></span><span class="d05-12-11-cell"></span><span class="d05-12-11-cell"></span><span class="d05-12-11-cell"></span>
          </div>
          <p class="d05-12-11-cap"><strong>72%</strong>のユーザーが継続利用</p>
        </div>

CSS

.d05-12-11{padding:20px;flex-direction:column;gap:12px}
        .d05-12-11-wrap{display:flex;flex-direction:column;align-items:center;gap:12px}
        .d05-12-11-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;width:180px}
        .d05-12-11-cell{display:block;width:100%;padding-top:100%;border-radius:2px;background:#e2e8f0}
        .d05-12-11-cell.f{background:#f59e0b}
        .d05-12-11-cap{margin:0;font-size:12px;color:#64748b}
        .d05-12-11-cap strong{color:#d97706;font-size:14px}

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