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

距離・所要時間バッジ

「徒歩5分・320m」などをアイコン付きバッジで表示。アクセス情報を一目で伝えられます。

mapcss

プレビュー

ソースコード

HTML

<div class="d10-04-07-badges">
          <span class="d10-04-07-badge"><span class="d10-04-07-ic d10-04-07-walk"></span>徒歩5分</span>
          <span class="d10-04-07-badge"><span class="d10-04-07-ic d10-04-07-dist"></span>320m</span>
          <span class="d10-04-07-badge"><span class="d10-04-07-ic d10-04-07-car"></span>車2分</span>
        </div>

CSS

.d10-04-07-badges{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
        .d10-04-07-badge{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;background:#f2f6f9;border:1px solid #e0e8ee;border-radius:999px;font-size:13px;font-weight:600;color:#334;transition:transform .2s,box-shadow .2s}
        .d10-04-07-badge:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.1)}
        .d10-04-07-ic{width:16px;height:16px;border-radius:50%;flex:0 0 auto}
        .d10-04-07-walk{background:#2fbf6b}
        .d10-04-07-dist{background:#2f7fef}
        .d10-04-07-car{background:#f0a020}

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