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

設備アイコン一覧付き物件カード

駐車場・エレベーター・オートロック・24時間対応などの設備を小さなアイコンで並記したカードです。設備の充実度を一目で伝えたい賃貸一覧に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="thumb"></div>
          <div class="info">
            <p class="name">レジデンス弦巻 204</p>
            <p class="rent">¥84,000<span>/月</span></p>
            <div class="facilities">
              <span class="fic">P</span>
              <span class="fic">EV</span>
              <span class="fic">AL</span>
              <span class="fic">24</span>
            </div>
          </div>
        </div>

CSS

.d10-14-11 .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-11 .thumb{height:92px;background:linear-gradient(135deg,#a8d8ea,#7fb8d4);}
        .d10-14-11 .info{padding:12px 14px;}
        .d10-14-11 .name{font-size:12.5px;font-weight:700;color:#333;margin:0 0 6px;}
        .d10-14-11 .rent{margin:0 0 10px;font-size:16px;font-weight:800;color:#e0574c;}
        .d10-14-11 .rent span{font-size:11px;font-weight:400;color:#999;}
        .d10-14-11 .facilities{display:flex;gap:6px;}
        .d10-14-11 .fic{width:24px;height:24px;border-radius:6px;background:#eef2ff;color:#4338ca;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;}

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