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

縦積みセクション区切りレイアウト

色の異なる帯が縦に積み重なる構成見本です。WordPressの固定ページで複数セクションの境目を色分けして示す際に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-05-10-band d01-05-10-b1">セクション1</div>
        <div class="d01-05-10-band d01-05-10-b2">セクション2</div>
        <div class="d01-05-10-band d01-05-10-b3">セクション3</div>

CSS

.prev.d01-05-10{padding:0;flex-direction:column;align-items:stretch;justify-content:flex-start}
        .d01-05-10-band{flex:1;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff}
        .d01-05-10-b1{background:#6366f1}
        .d01-05-10-b2{background:#0ea5e9}
        .d01-05-10-b3{background:#10b981}

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