アクセス情報セクション

このパーツの使いどころと実装ポイント

左に地図、右に住所・最寄駅・営業時間を並べた、2カラムのアクセスセクションです。レイアウトはdisplay:gridのgrid-template-columns:1.4fr 1frで、地図側をやや広く取っています。情報部分はdl（定義リスト）を使い、dtに項目名、ddに内容を入れているため、住所や駅名が意味のあるまとまりとしてマークアップされています。

向いている場面

実店舗、オフィス、クリニック、教室など、来訪してもらう場所を案内したいすべてのサイトに向きます。会社概要ページやお問い合わせページの一部として置かれることが多いセクションです。

カスタマイズと注意点

• 地図枠は今はSVGのピンを置いた仮の背景です。実際にはGoogleマップの埋め込みiframeや、地図の画像に置き換えてください。住所はテキストでも残しておくと、検索や読み上げに役立ちます。
• 項目を増やすときはdtとddのペアを足すだけです。電話番号や駐車場の有無などを同じ形で追加できます。
• 画面幅720px以下では2列が縦1列になり、地図が上、情報が下に積まれます。住所は地図画像だけに頼らず、必ず文字でも記載してください。