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

賃貸物件基本カード

写真・家賃・間取り・駅徒歩分数を1枚にまとめた賃貸物件カードです。賃貸検索サイトの物件一覧グリッドにそのまま使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="thumb"></div>
          <div class="info">
            <p class="name">グランメゾン青葉 305号室</p>
            <p class="rent">¥78,000<span>/月</span></p>
            <p class="sub"><span>1LDK</span><span>駅徒歩5分</span></p>
          </div>
        </div>

CSS

.d10-14-01 .card{width:190px;background:#fff;border:1px solid #eee;border-radius:8px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.06);}
        .d10-14-01 .thumb{height:100px;background:linear-gradient(135deg,#a8d8ea,#e0f7fa);}
        .d10-14-01 .info{padding:12px 14px;}
        .d10-14-01 .name{font-size:13px;font-weight:700;color:#333;margin:0 0 6px;}
        .d10-14-01 .rent{font-size:17px;font-weight:800;color:#e0574c;margin:0 0 6px;}
        .d10-14-01 .rent span{font-size:11px;font-weight:400;color:#999;}
        .d10-14-01 .sub{margin:0;display:flex;justify-content:space-between;font-size:11px;color:#666;}

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