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

フルブリード帯+余白コンテンツ

画面いっぱいの帯と中央寄せの余白コンテンツを対比させた構図です。WordPressの固定ページでセクションの区切りを見せる際に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-05-06-band">全幅バナー帯</div>
        <div class="d01-05-06-content">
          <span class="d01-05-06-line"></span>
          <span class="d01-05-06-line d01-05-06-short"></span>
        </div>

CSS

.prev.d01-05-06{padding:0;flex-direction:column;align-items:stretch;justify-content:flex-start}
        .d01-05-06-band{background:linear-gradient(90deg,#1e293b,#334155);color:#fff;font-size:13px;font-weight:700;text-align:center;padding:22px 0}
        .d01-05-06-content{max-width:220px;margin:24px auto 0;display:flex;flex-direction:column;gap:10px}
        .d01-05-06-line{display:block;height:10px;border-radius:4px;background:#e2e8f0}
        .d01-05-06-short{width:60%}

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