地図 + アクセスセクション
左に地図、右に住所や最寄駅・営業時間を置くアクセスセクションです。レイアウトは grid-template-columns:1fr 1fr の 2 分割で、地図側は aspect-ratio:4/3 で形を保ったプレースホルダになっています。
解説
左に地図、右に住所や最寄駅・営業時間を置くアクセスセクションです。レイアウトは grid-template-columns:1fr 1fr の 2 分割で、地図側は aspect-ratio:4/3 で形を保ったプレースホルダになっています。右側の住所情報は dl・dt・dd という定義リストでマークアップされ、「項目名」と「内容」の対応が意味づけされている点が特徴です。@media(max-width:600px) で狭い画面では 1 列に切り替わり、地図が上・情報が下に縦積みされます。JavaScript は使いません。
使う場面
- 店舗やオフィスのアクセス案内ページ
- 来店型サービスの所在地セクション
- イベントや会場の場所と行き方の紹介
地図部分はプレースホルダなので、実運用では Google Maps の埋め込み iframe に差し替えてください。その際は title 属性を付けると読み上げ環境に親切です。情報の組（項目名と内容）は dt・dd を 1 セットで足していくだけで増やせます。グラデーションの色や角丸を変えるとサイトに馴染みます。住所は画像ではなくテキストで書くことが、検索や地図サービスとの連携でも重要です。
使用例・適したシーン
- コーポレートサイト構築
- サービス LP
- 採用ページ
- 事業紹介資料 Web 版
よくある質問
プレースホルダを本物の地図に差し替えるには？
左側の地図エリアの中身を、Google Maps の「埋め込む」で得られる iframe に置き換えてください。iframe の幅・高さを 100% にして、aspect-ratio を保つ親要素に収めると、レスポンシブのまま地図が表示されます。
スマホでは地図と住所がどう並びますか？
画面幅が 600px 以下になるとメディアクエリで 1 列に切り替わり、地図が上、住所などの情報が下に縦積みされます。横並びのままにしたい場合はこのメディアクエリを外してください。