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

条件タグ付き物件カード

駅近・ペット可などの特徴を小さなタグで並記したカードです。こだわり条件で絞り込む賃貸検索結果の表示に適しています。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="thumb"></div>
          <div class="info">
            <p class="name">コーポ緑ヶ丘 105</p>
            <p class="rent">¥62,000<span>/月</span></p>
            <div class="tags">
              <span class="ftag f1">駅近</span>
              <span class="ftag f2">ペット可</span>
              <span class="ftag f3">バストイレ別</span>
            </div>
          </div>
        </div>

CSS

.d10-14-10 .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-10 .thumb{height:84px;background:linear-gradient(135deg,#e8c468,#d9a441);}
        .d10-14-10 .info{padding:12px 14px;}
        .d10-14-10 .name{font-size:12.5px;font-weight:700;color:#333;margin:0 0 6px;}
        .d10-14-10 .rent{margin:0 0 8px;font-size:15px;font-weight:800;color:#e0574c;}
        .d10-14-10 .rent span{font-size:11px;font-weight:400;color:#999;}
        .d10-14-10 .tags{display:flex;flex-wrap:wrap;gap:5px;}
        .d10-14-10 .ftag{font-size:10px;font-weight:700;padding:3px 8px;border-radius:99px;}
        .d10-14-10 .f1{background:#eef2ff;color:#4338ca;}
        .d10-14-10 .f2{background:#ecfdf5;color:#059669;}
        .d10-14-10 .f3{background:#fff7ed;color:#c2410c;}

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