パーツ番号 07-15-11 ・ CSSのみ

複数サムネイルのグリッドギャラリー

4枚のサムネイルを2×2で並べ、右下に残数を表示するグリッドギャラリーです。動画フォルダやシリーズまとめの表紙に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="gallery">
          <div class="g g1"><span class="mini"><span class="triM"></span></span></div>
          <div class="g g2"><span class="mini"><span class="triM"></span></span></div>
          <div class="g g3"><span class="mini"><span class="triM"></span></span></div>
          <div class="g g4"><span class="more">+12</span></div>
        </div>

CSS

.d07-15-11 .gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;width:200px;height:150px;border-radius:8px;overflow:hidden;}
        .d07-15-11 .g{position:relative;}
        .d07-15-11 .g1{background:linear-gradient(135deg,#e8a87c,#c26b4d);}
        .d07-15-11 .g2{background:linear-gradient(135deg,#8fbf9f,#3f7d5c);}
        .d07-15-11 .g3{background:linear-gradient(135deg,#7ba7d9,#3a5f96);}
        .d07-15-11 .g4{background:linear-gradient(135deg,#9b8fc9,#5a4a96);display:flex;align-items:center;justify-content:center;}
        .d07-15-11 .mini{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.88);display:flex;align-items:center;justify-content:center;}
        .d07-15-11 .triM{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid #333;margin-left:2px;}
        .d07-15-11 .more{color:#fff;font-size:14px;font-weight:800;}

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