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

階層グリッド

1つの大枠と周囲の小枠群で構成した見本です。WordPressの特集記事ページで主題と関連項目の関係を示す区画に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-05-08-hier">
          <div class="d01-05-08-parent">主要トピック</div>
          <div class="d01-05-08-children">
            <span class="d01-05-08-child">関連A</span>
            <span class="d01-05-08-child">関連B</span>
            <span class="d01-05-08-child">関連C</span>
          </div>
        </div>

CSS

.prev.d01-05-08{padding:14px}
        .d01-05-08-hier{width:100%;max-width:300px;display:flex;flex-direction:column;gap:10px}
        .d01-05-08-parent{border-radius:10px;background:linear-gradient(135deg,#0f172a,#334155);color:#fff;font-size:13px;font-weight:700;padding:20px;text-align:center}
        .d01-05-08-children{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
        .d01-05-08-child{border-radius:8px;background:#f1f5f9;border:1px solid #e2e8f0;font-size:11px;color:#475569;padding:12px 4px;text-align:center;font-weight:600}

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