HTML5&CSS iframe GoogleMap,YouTubeがスマホではみ出ないように表示する

  • ---

    LINEで送る
  • -

    ブックマーク
  • -

    pocket
  • -

    rss
html5 css3 image
イラストACの画像をもとに加工しています。

GoogleMapやYouTubeを埋め込むときに使うiframeタグ。これを縦横比(アスペクト比)を変えずにレスポンシブに対応する方法です。

HTMLに少し修正を加えてあとはCSSで対応します。

You TubeやGoogle Mapの埋め込みのレスポンシブ対応

You TubeやGoogle MapなどをHTMLに埋め込む場合は、iframeタグを使います。

iframeタグをレスポンシブに対応して、埋め込んだYou TubeやGoogle Mapをスマホやタブレットでも自然に表示することができます。

さっそくサンプルコードで見てみましょう。

iframeタグにdiv要素でボックスを追加

iframeのサイズをレスポンシブにするために、divタグでiframeを囲うボックスを作成します。

iframeをdivで囲う
<div>
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d12962.48172155079!2d139.75586937791607!3d35.68634706791085!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sja!2sjp!4v1505738394779" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

Google Mapの埋め込みコードを下に表示します。

これをスマホで見るとwidthがはみ出してしまいます。(ブラウザの開発ツールで表示しても確認できます。)

CSS指定のサンプル

今回はサンプルなのでhtml文に直接CSSを書きます。じっさいはCSSファイルに書くようにしましょう。

html
<div style="position: relative; width: 100%; padding-bottom: 75%;">
    <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d12962.48172155079!2d139.75586937791607!3d35.68634706791085!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sja!2sjp!4v1505738394779" width="600" height="450" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

iframeを"position: absolute;"、divを"position: relative;"にする。

div内にiframeを収めることになる。

iframeの基準は"top: 0; left: 0;"にして、divの左上にする。

iframeのサイズを"width: 100%; height: 100%;"にして、div内で最大限に広げる。

divのサイズを"width: 100%; padding-bottom: 75%;"にする。

iframeのサイズが自動的に決まる。

"width: 100%;"は、iframeのwidthを指定していないので、親要素の幅いっぱいにiframeのwidthを広げます。これで、端末サイズによってwidthが自動的に決まります。

"padding-bottom: 75%;"は、iframeのheightが未指定なので、親要素のwidthの75%のサイズがiframeのheightになります。

(iframeのwidthの75%と同じになります。)

widthがレスポンシブに決まるので、heightも自動的に決まります。widthがいくらになっても、縦横比(アスペクト比)は同じです。

padding-bottom: 75%は、アスペクト比が4:3です。アスペクト比を16:9にする場合は、56.25%にします。padding-bottomは、padding-topでもいいです。

4:375%よくアイキャッチ画像に使われるサイズ。
16:956.25%大画面テレビのサイズに使われるなど、いろいろなところで使われる。
Facebookが推奨する画像サイズも近い。

どうしてpadding-bottom(-top)で、heightがwidthの75%になるのでしょうか?

これは、divのheightを未指定にするのがポイントです。

heightが未指定なので、divの縦サイズは0です。iframeの縦の広がりは、divのheight + padding-bottomになるので、じっさいのdivの縦サイズは、padding-bottomと同じになります。

CSSを指定したコードを下に表示します。

result
   

これをスマホのサイズで表示すると、サイズが自動的に変更されます。

HTML&CSSの本
post-cta-image

どうしてもインターネットで調べて勉強するのが苦手という人のために、HTMLとCSSの最新技術と基本を網羅できる本を2冊選びました。

この内容を身につければ、ほかの本は必要ありません。将来的には、自分の力で、書籍を使わずに、インターネットにある情報だけで学べます。


HTML&CSSの本2選

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

top
この記事を気に入ったらぜひシェアも!!