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

間取り図付き詳細カード

写真の代わりに簡易間取り図を配置した詳細カードです。物件詳細ページの冒頭サマリーやプラン一覧に活用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="madori">
            <div class="room room-ldk">LDK</div>
            <div class="room room-a">洋室</div>
            <div class="room room-b">洋室</div>
          </div>
          <div class="info">
            <p class="name">3LDKタイプ</p>
            <p class="sub">専有面積 65.2㎡</p>
          </div>
        </div>

CSS

.d10-14-04 .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-04 .madori{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;height:100px;background:#fafaf8;border-bottom:1px solid #eee;}
        .d10-14-04 .room{border:1px solid #dcdcd6;display:flex;align-items:center;justify-content:center;font-size:10.5px;color:#666;}
        .d10-14-04 .room-ldk{grid-column:1/3;background:#eef2ff;color:#4338ca;font-weight:700;}
        .d10-14-04 .room-a,.d10-14-04 .room-b{background:#fff;}
        .d10-14-04 .info{padding:12px 14px;}
        .d10-14-04 .name{font-size:13px;font-weight:700;color:#333;margin:0 0 6px;}
        .d10-14-04 .sub{margin:0;font-size:11px;color:#666;}

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