パーツ番号 01-14-08 ・ CSSのみ

色分けカラーブロックレイアウト

ジャンルごとに色を変えた帯を横に並べた構成見本です。WordPressの事業内容一覧やカテゴリ別ナビゲーションの装飾に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-14-08-row">
          <span class="d01-14-08-block d01-14-08-c1">Web</span>
          <span class="d01-14-08-block d01-14-08-c2">Design</span>
          <span class="d01-14-08-block d01-14-08-c3">Photo</span>
          <span class="d01-14-08-block d01-14-08-c4">Video</span>
          <span class="d01-14-08-block d01-14-08-c5">SNS</span>
        </div>

CSS

.prev.d01-14-08{padding:14px}
        .d01-14-08-row{width:100%;max-width:320px;height:190px;display:flex;border-radius:12px;overflow:hidden}
        .d01-14-08-block{flex:1;display:flex;align-items:flex-end;justify-content:center;padding-bottom:14px;color:#fff;font-size:11px;font-weight:700}
        .d01-14-08-c1{background:#6366f1}
        .d01-14-08-c2{background:#0ea5e9;flex:1.3}
        .d01-14-08-c3{background:#f59e0b}
        .d01-14-08-c4{background:#10b981;flex:1.2}
        .d01-14-08-c5{background:#ec4899}

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