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

売買物件カード

価格・専有面積・築年数を並記した売買物件用カードです。中古戸建てやマンション売却サイトの一覧表示に向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="thumb"></div>
          <div class="info">
            <p class="name">南向き2階建て戸建て 全4LDK</p>
            <p class="price">¥3,480<span>万円</span></p>
            <div class="specs">
              <div class="spec"><span class="k">面積</span><span class="v">92.5㎡</span></div>
              <div class="spec"><span class="k">築年数</span><span class="v">築8年</span></div>
            </div>
          </div>
        </div>

CSS

.d10-14-02 .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-02 .thumb{height:90px;background:linear-gradient(135deg,#d9c5a0,#b08968);}
        .d10-14-02 .info{padding:12px 14px;}
        .d10-14-02 .name{font-size:12.5px;font-weight:700;color:#333;margin:0 0 6px;line-height:1.4;}
        .d10-14-02 .price{margin:0 0 8px;font-size:19px;font-weight:800;color:#1f4e3d;}
        .d10-14-02 .price span{font-size:12px;font-weight:400;color:#666;margin-left:2px;}
        .d10-14-02 .specs{display:flex;gap:8px;border-top:1px solid #f0f0ee;padding-top:8px;}
        .d10-14-02 .spec{flex:1;font-size:10.5px;color:#666;display:flex;flex-direction:column;gap:2px;}
        .d10-14-02 .k{color:#999;}
        .d10-14-02 .v{font-weight:700;color:#333;font-size:12px;}

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