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

グリッド雑誌目次風レイアウト

複数の記事タイトルがグリッド状に並ぶ目次ページ風の構成。号内の主要コンテンツを一覧できる案内ページに用いる。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-09-05-grid">
          <div class="d01-09-05-cell"><span class="d01-09-05-no">01</span><span class="d01-09-05-tt">巻頭特集</span></div>
          <div class="d01-09-05-cell"><span class="d01-09-05-no">02</span><span class="d01-09-05-tt">連載コラム</span></div>
          <div class="d01-09-05-cell"><span class="d01-09-05-no">03</span><span class="d01-09-05-tt">読者の声</span></div>
          <div class="d01-09-05-cell"><span class="d01-09-05-no">04</span><span class="d01-09-05-tt">今月の一冊</span></div>
        </div>

CSS

.d01-09-05{background:#fff;}
        .d01-09-05-grid{width:100%;height:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px;}
        .d01-09-05-cell{background:#f5f4f0;border-left:3px solid #b23b2e;padding:10px;display:flex;flex-direction:column;gap:6px;justify-content:center;}
        .d01-09-05-no{font-size:10px;color:#b23b2e;font-weight:700;}
        .d01-09-05-tt{font-size:12px;color:#222;font-weight:600;}

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