← 静的パーツギャラリーへ戻る

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

bento box風 大小混在タイル

大小のタイルを不揃いに組み合わせた区画見本です。WordPressのトップページで特集記事と補足情報を強弱をつけて並べる際に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-14-01-grid">
          <div class="d01-14-01-a">特集記事</div>
          <div class="d01-14-01-b">写真</div>
          <div class="d01-14-01-c">新着</div>
          <div class="d01-14-01-d">統計</div>
        </div>

CSS

.prev.d01-14-01{padding:14px}
        .d01-14-01-grid{width:100%;max-width:320px;height:210px;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:8px}
        .d01-14-01-grid > div{border-radius:10px;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:flex-end;padding:10px}
        .d01-14-01-a{grid-column:1/3;grid-row:1/2;background:linear-gradient(135deg,#6366f1,#818cf8)}
        .d01-14-01-b{grid-column:3/4;grid-row:1/3;background:linear-gradient(135deg,#f59e0b,#fbbf24)}
        .d01-14-01-c{grid-column:1/2;grid-row:2/3;background:linear-gradient(135deg,#10b981,#34d399)}
        .d01-14-01-d{grid-column:2/3;grid-row:2/3;background:linear-gradient(135deg,#ef4444,#f87171)}

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