ブログ
勉強して学びを得たときの疑問や改善点などを日々記録しています。
是非ご参考までに覗いてみてください。
Google Mapをaspect-ratioで簡単レスポンシブ実装
WebサイトにGoogleMapを埋め込むとき、そのままだと横幅が固定されてしまいます。
GoogleMapも他の画像と同じようにレスポンシブ対応することで、スマホやタブレットでも見やすくなります。
では、どうやってレスポンシブ対応すればいいのでしょうか？
今回は代表的な2つのパターンを紹介します^^
高さは固定、横幅のみ可変にする方法
もっとも簡単な方法です！
横幅のみ可変で高さは固定でよい場合は、
iframeに{width:100%;}と指定するだけでOKです。
ポイント
- 横幅は親要素に合わせて可変(例：100%)
- 高さは固定値（例：450px）
- コードが短く、簡単に実装できる。
- 画面が横長でも縦長でも高さは同じままのため、デザインによってはバランスが崩れることがある。
縦横比を維持したまま可変にする方法
次に、縦横比を維持したまま可変にする方法をご紹介します。
aspect-ratioを使う ★オススメ★
aspect-ratioは、要素の縦横比を指定できるCSSプロパティです。
横幅に応じて高さが自動計算されるため、常に比率を保ったまま表示できます。
例えば、以下のようにaspect-ratioの1行を加えるだけで、縦横比（横4：縦3の比率）を維持したまま可変にできるのです。
ポイント
- 横幅は親要素に合わせて可変(例：100%)
- 高さは指定した縦横比で自動計算される
- コードが短い
- 常に比率を保ったまま可変になるので、デザインが崩れにくい。
以前はpaddingハックが主流だった
2020年頃までは、aspect-ratio が主要ブラウザで標準実装されていなかったため、『paddingハック』と呼ばれる方法で縦横比を維持する必要がありました。
この手法は、positionを使う必要があり、初心者には少し難しく、コード長くなりがちです。
しかし、現在は主要ブラウザがaspect-ratioに対応しているため、実務では『aspect-ratio』を使う方法が主流になっています。
シンプルに実装したい場合は『高さ固定』、デザインを崩したくない場合は『aspect-ratioを使う』など、目的に合わせて最適な方法を選んでみてくださいね！
この記事を書いた人
-
kimi -
前職はＳＥ。今は講師のお仕事をしています！分かりやすい授業を目指して日々勉強中です。クールに見えるといわれますがしゃべるとボロがでるので、普段は黙ってます(-×-)