パーツ番号 06-07-07 ・ CSSのみ

大小混在マガジン風記事グリッド

大きな特集カードと小さな記事カードを混在させたグリッド。雑誌のような緩急のある記事一覧を作れる。

staticcss

プレビュー

ソースコード

HTML

<div class="mg06-07-07">
          <div class="bx06-07-07 big06-07-07"><span class="th06-07-07 th06-07-07-1"></span><p>特集：来年のトレンド予測総まとめ</p></div>
          <div class="bx06-07-07"><span class="th06-07-07 th06-07-07-2"></span><p>小さな習慣で変わる毎日</p></div>
          <div class="bx06-07-07"><span class="th06-07-07 th06-07-07-3"></span><p>週末カメラ散歩のすすめ</p></div>
        </div>

CSS

.d06-07-07{width:100%;}
        .d06-07-07 .mg06-07-07{display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:auto auto;gap:10px;}
        .d06-07-07 .bx06-07-07{display:flex;flex-direction:column;gap:6px;}
        .d06-07-07 .big06-07-07{grid-row:1 / 3;}
        .d06-07-07 .th06-07-07{display:block;width:100%;border-radius:6px;}
        .d06-07-07 .big06-07-07 .th06-07-07{height:120px;}
        .d06-07-07 .bx06-07-07:not(.big06-07-07) .th06-07-07{height:52px;}
        .d06-07-07 .th06-07-07-1{background:linear-gradient(135deg,#ffe1a8,#e8730f);}
        .d06-07-07 .th06-07-07-2{background:linear-gradient(135deg,#a8e6ff,#2b7fd8);}
        .d06-07-07 .th06-07-07-3{background:linear-gradient(135deg,#d3ffb0,#4a9e2f);}
        .d06-07-07 .bx06-07-07 p{margin:0;font-size:11px;color:#222;line-height:1.4;}
        .d06-07-07 .big06-07-07 p{font-size:13px;font-weight:bold;}

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