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

大見出し+リード文+本文の階層構成

見出し・リード文・本文が上から順に配置された、雑誌記事冒頭の定番構成。情報の優先順位を視覚的階層で示す固定レイアウト。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-09-02-wrap">
          <h4 class="d01-09-02-head">特集：都市を変えるデザイン</h4>
          <p class="d01-09-02-lead">小さな工夫が街の風景を変えていく——その現場を追った。</p>
          <div class="d01-09-02-body">
            <span></span><span></span><span></span><span></span>
          </div>
        </div>

CSS

.d01-09-02{background:#fff;align-items:flex-start;}
        .d01-09-02-wrap{width:100%;}
        .d01-09-02-head{margin:0 0 10px;font-size:20px;font-weight:800;color:#222;line-height:1.3;border-bottom:3px solid #222;padding-bottom:8px;}
        .d01-09-02-lead{margin:0 0 12px;font-size:13px;font-weight:600;color:#555;line-height:1.6;}
        .d01-09-02-body span{display:block;height:6px;background:#e2e2e2;border-radius:2px;margin-bottom:7px;}
        .d01-09-02-body span:nth-child(1){width:100%;}
        .d01-09-02-body span:nth-child(2){width:96%;}
        .d01-09-02-body span:nth-child(3){width:90%;}
        .d01-09-02-body span:nth-child(4){width:55%;}

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