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

フルブリード見出し+中央寄せ本文

全幅に広がる色帯の見出しと、中央寄せの本文で構成したセクションです。WordPressのページ区切りやカテゴリ紹介の導入部に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-06-03-wrap">
          <div class="d01-06-03-band">見出しバンド</div>
          <p class="d01-06-03-body">全幅の色帯見出しの下に、中央寄せの説明文を配置した構成です。</p>
        </div>

CSS

.prev.d01-06-03{padding:0;display:block}
        .d01-06-03-wrap{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
        .d01-06-03-band{width:100%;background:#264653;color:#fff;text-align:center;font-size:14px;font-weight:700;letter-spacing:.1em;padding:16px 12px}
        .d01-06-03-body{max-width:80%;text-align:center;font-size:12px;line-height:1.9;color:#555;margin:18px 0 0;padding:0 12px}

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