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

特集ページの帯見出しレイアウト

上部に太い帯見出し、下に複数の小記事が並ぶ構成。特集ページの冒頭やカテゴリまとめページに用いる誌面レイアウト。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-09-10-wrap">
          <div class="d01-09-10-band">特集：暮らしを整える道具たち</div>
          <div class="d01-09-10-grid">
            <div class="d01-09-10-cell"><span></span><span></span></div>
            <div class="d01-09-10-cell"><span></span><span></span></div>
            <div class="d01-09-10-cell"><span></span><span></span></div>
          </div>
        </div>

CSS

.d01-09-10{background:#fff;align-items:flex-start;padding:0;}
        .d01-09-10-wrap{width:100%;height:100%;display:flex;flex-direction:column;}
        .d01-09-10-band{background:#b23b2e;color:#fff;font-size:13px;font-weight:800;padding:10px 16px;}
        .d01-09-10-grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px 16px;box-sizing:border-box;}
        .d01-09-10-cell{background:#f5f4f0;border-radius:3px;padding:8px;display:flex;flex-direction:column;gap:6px;justify-content:center;}
        .d01-09-10-cell span{display:block;height:5px;background:#d8d3c8;border-radius:2px;}
        .d01-09-10-cell span:first-child{width:80%;height:6px;background:#999;}

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