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

アクセス情報カード(住所・最寄駅併記)

地図を使わず住所と最寄駅をリスト形式で併記したシンプルなカード。ページ容量を抑えたい店舗情報欄に向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <p class="shop">サンプルカフェ 中央店</p>
          <dl>
            <dt>住所</dt><dd>サンプル県サンプル市1-2-3</dd>
            <dt>最寄駅</dt><dd>架空駅 東口より徒歩3分</dd>
            <dt>電話</dt><dd>000-0000-0000</dd>
          </dl>
        </div>

CSS

.d10-11-02 .card{width:100%;background:#fff;border:1px solid #e5e9ee;border-radius:10px;
          padding:18px 20px;box-shadow:0 1px 3px rgba(15,23,42,.06);}
        .d10-11-02 .shop{margin:0 0 10px;font-size:14px;font-weight:700;color:#1f2937;
          border-bottom:1px solid #eef1f4;padding-bottom:8px;}
        .d10-11-02 dl{display:grid;grid-template-columns:56px 1fr;row-gap:6px;column-gap:8px;margin:0;}
        .d10-11-02 dt{font-size:11px;color:#94a3b8;font-weight:600;}
        .d10-11-02 dd{margin:0;font-size:12.5px;color:#334155;}

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