インラインのグーグルマップをレスポンシブ対応にする
最終更新日: Update!!
ウェブサイトでもよく使われているグーグルマップのインライン埋め込みですが、レスポンシブ対応にするためにはCSSで調整する必要があります。結構増えてきているケースなので備忘録としてのメモです。
グーグルマップのレスポンシブ対応
グーグルマップをレスポンシブ対応させるために、iframeを囲うwrap要素が必要です。それと合わせてiframe自体にもスタイルを適用していきます。以下HTMLとCSSのサンプルです。 【HTML】<div class="googlemap-wrap"> <iframe src="https://www.google.com/maps/embed?pb=*****************" width="1000" height="500" frameborder="0" style="border:0" allowfullscreen></iframe> </div>【CSS】
.googlemap-wrap { position: relative; padding-bottom: 50%; height: 0; overflow: hidden; } .googlemap-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media (max-width: 576px) { .googlemap-wrap { padding-bottom: 100%; } }CSSでグーグルマップwrap要素のpadding-bottomの値で縦横比を調整します。(上記は2:1の比率)また、スマホでの表示で比率を保つと高さも小さくなるので、メディアクエリーでwrap要素のpadding-bottomの値を100%にすることで当初の高さに戻ることができます。サンプルはこちらにあげていますのでご参考に。 (参考) Googleマップを横幅100%でレスポンシブに表示する
sponserd
keyword search
recent posts
- GSAPとvivusを使ったSVGのドローアニメーション
GSAPとvivusを使ったSVGのドローアニメーション
- GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
categories