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

ロケーション強調カード

簡易マップと位置ピンで立地を視覚的に伝えるカードです。最寄駅・周辺施設を重視した検索結果表示に適しています。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="map">
            <span class="pin"></span>
          </div>
          <div class="info">
            <p class="name">中央町ハイツ 2階</p>
            <p class="loc">△△駅 徒歩3分・□□スーパー200m</p>
          </div>
        </div>

CSS

.d10-14-07 .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-07 .map{position:relative;height:100px;background:repeating-linear-gradient(0deg,#e8f0e6,#e8f0e6 18px,#dbe8d8 18px,#dbe8d8 19px),repeating-linear-gradient(90deg,#e8f0e6,#e8f0e6 18px,#dbe8d8 18px,#dbe8d8 19px);}
        .d10-14-07 .pin{position:absolute;top:38%;left:46%;width:16px;height:16px;background:#e0393e;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 2px 4px rgba(0,0,0,.25);}
        .d10-14-07 .info{padding:12px 14px;}
        .d10-14-07 .name{font-size:13px;font-weight:700;color:#333;margin:0 0 6px;}
        .d10-14-07 .loc{margin:0;font-size:10.5px;color:#666;line-height:1.5;}

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