パーツ番号 01-06-06 ・ CSSのみ

センター強調セクション

中央に大きく配置した見出しの左右に広い余白を取った構成です。WordPressの理念紹介やコンセプトページなど、印象を強めたい部分に向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-06-06-center">
          <p class="d01-06-06-eyebrow">CONCEPT</p>
          <h4>中央に強調された言葉</h4>
          <p class="d01-06-06-sub">左右にゆったりとした余白を取った構成です。</p>
        </div>

CSS

.prev.d01-06-06{padding:24px}
        .d01-06-06-center{max-width:70%;text-align:center;margin:0 auto}
        .d01-06-06-eyebrow{margin:0 0 10px;font-size:10px;letter-spacing:.3em;color:#9a8c6f}
        .d01-06-06-center h4{margin:0 0 10px;font-size:17px;font-weight:800;color:#2b2b2b;letter-spacing:.04em}
        .d01-06-06-sub{margin:0;font-size:11.5px;line-height:1.8;color:#7a7a7a}

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