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

パーツ番号 10-14-09 ・ CSSのみ

複数写真サムネイル付きカード

メイン写真の下に小サムネイルを並べ、掲載枚数を示すカードです。写真点数の多い物件を訴求する一覧表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="thumb">
            <span class="count">写真 6枚</span>
          </div>
          <div class="thumbs">
            <span class="t t1"></span>
            <span class="t t2"></span>
            <span class="t t3"></span>
          </div>
          <div class="info">
            <p class="name">グリーンヒルズ弦巻 302</p>
            <p class="rent">¥69,000<span>/月</span></p>
          </div>
        </div>

CSS

.d10-14-09 .card{width:200px;background:#fff;border:1px solid #eee;border-radius:8px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.06);}
        .d10-14-09 .thumb{position:relative;height:86px;background:linear-gradient(135deg,#c9e4de,#a2d9ce);}
        .d10-14-09 .count{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.55);color:#fff;font-size:10px;padding:2px 7px;border-radius:99px;}
        .d10-14-09 .thumbs{display:flex;gap:4px;padding:6px;background:#f4f1ec;}
        .d10-14-09 .t{flex:1;height:32px;border-radius:5px;}
        .d10-14-09 .t1{background:linear-gradient(135deg,#f6d5a8,#f3a683);}
        .d10-14-09 .t2{background:linear-gradient(135deg,#cfd9df,#e2ebf0);}
        .d10-14-09 .t3{background:linear-gradient(135deg,#d9c5a0,#b08968);}
        .d10-14-09 .info{padding:10px 14px 12px;}
        .d10-14-09 .name{font-size:12.5px;font-weight:700;color:#333;margin:0 0 6px;}
        .d10-14-09 .rent{margin:0;font-size:15px;font-weight:800;color:#e0574c;}
        .d10-14-09 .rent span{font-size:11px;font-weight:400;color:#999;}

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