ここではiframeのレスポンシブ対応の方法についてお話していきます。iframeは、GoogleマップやYoutubeの埋め込み用のコードを使う場合でも対応が必要になります。レスポンシブは理解するのが難しい部分がありますが、とりあえずコードだけでもコピペしてお使いください。
とりあえずやり方だけ知りたい方へ
結論だけ知りたい方のためにはじめにコードだけお伝えしておきます。
HTML
<div class="iframe-wrap"> |
<iframe src="アイフレームを表示させたいURL" frameborder="0"></iframe> |
iframeをdivでラップしてdiv要素に適当なclass名を入れます。
スタイルシート
padding: calc(アイフレームの高さ / アイフレームの横幅 * 100%) 0 0; |
「アイフレームの高さ」と「アイフレームの横幅」のところは数字だけ記入します。「px」などの単位は入れないでくださいね。上記の方法でレスポンシブ対応可能です。
iframeのスマホ対応の具体例
実際に上記の方法でYoutubeを埋め込んだ際のコードと実際のiframeがこちらです。
HTML
<div class="iframe-wrap"> |
スタイルシート
padding: calc(480 / 854 * 100%) 0 0; |
どうしてこれがスマホ対応になるのか仕組みを知りたい方へ
他のサイトでもスマホ対応のやり方は載っているのですが、その仕組みをちゃんと説明してくれているところがほとんどありません。ここではその仕組みについて詳しくお話していきます。iframeのレスポンシブ対応には、いろんなプロパティの知恵が総動員されています。
基本的な考え方
iframeのレスポンシブ対応の手順を一言で説明すると、div要素でiframeにぴったりな枠（親要素）を作成し、その中にiframeをぴったり収めているだけです。考え方は簡単なのですが、それを実際にスタイルシートで実装しようとするといろんなプロパティの特徴を理解していないといけません。
- heightではなくpaddingで要素の高さを作る。
- paddingのパーセント指定は親要素の横幅(width)に対する割合になる。
- 「calc」を使って値のところに計算式を入れる。
- 四方の値をショートハンドで記入する。
- 「position:absolute;」で位置を指定する。
iframeのレスポンシブ化でポイントとなるのは縦横の比率
画像をスマホ対応させたい場合は、img要素に「width:100%;」を指定しておけば、縦横の比率が保持されたままいろんな端末に対応可能になります。でも、iframeの場合はそのようになってくれません。そのため、縦横のサイズ比率を保たせるために次のような指定をします。
- 横幅のサイズ指定は「width:100%;」
- 高さのサイズ指定は「padding-top（もしくはpadding-bottom）」にパーセントで指定。
疑問：縦のサイズをheightで指定じゃだめなの？
heightのパーセント指定はページを表示させているブラウザの高さを参照してしまうため、iframeのサイズ比率に関しては全く役に立ちません。
一方、padding-top（padding-bottom）で高さ指定すると、親要素の横幅を参照してくれます。ここでは、iframeの横幅を「100%」で指定するので、「＝親要素の横幅」ということになります。このようにpaddingが親要素の横幅を基準にしてくれる性質を利用してiframeのサイズ比率を保ちます。
そもそもpaddiingにパーセント入れることの意味がさっぱり分からないのだけど？
paddingというとpxで指定する場合が多いので、「パーセントで指定するってどういうこと？」と思ってしまうかもしれません。スマホ対応の話から少し脱線しますが、パーセント指定の事例をひとつだけ見てみましょう。
でも、paddingって「余白」でしょ？余白を作ってもiframeの表示はできなくない？
iframeの親要素はあくまで「サイズ比率を保った枠を作る」役割だけに徹してもらいます。その上で、中に入れるiframeは「position:absolute;」で位置指定するので、paddingの影響を受けなくなります（つまり、paddingはiframeにとって「余白」ではなくなるのです）。ここがミソであり、一番理解が難しいところです。
縦横サイズの比率算出
iframeをスマホ表示させた場合は横幅が100%で表示させる前提でお話していきます。「横幅が100%だった場合に、縦の高さは何パーセントになるか？」という部分を計算します。
例：width:400px、height:300pxの場合。
400：300 ＝ 100：X
X ＝ 300 × 100 ÷ 400
つまり、計算式としては、「高さ（％） ＝ 高さ ÷ 横幅 × 100」という形になります。
iframeごとに計算するのは面倒なので、計算式で値を設定する方法をご紹介します。
値に計算式をいれる方法
padding-top: calc(「計算式」と最後に「単位」); |
この方法で計算式を入れておけばその解となる値が反映されます。
先ほどの実例の中では、paddingがこうなっていました。
padding: calc(480 / 854 * 100%) 0 0; |
これがどうして「padding-top」の指定になるのかについてもお話しておきます。
paddingやmarginなどの四方の値を入れる値は、
と記入すると、左から順番に「上 左右 下」という形で値の指定ができます。
つまり、
padding: calc(480 / 854 * 100%) 0 0; |
は、下記と同じ意味になります。
padding-top:calc(480 / 854 * 100%); |
詳細はこちらをご覧ください。＞＞スタイルシートの効率的な使い方
「position:absolute;」でiframeを親要素にぴったり入れる。
さて、親要素「iframe-wrap」の枠が完成したら、今度は中に入れるiframeをこの枠にぴったりと納めていきます。ぴったり収めるためには、縦横が100パーセントのサイズになりますね。
ここままだと、親要素のpaddingに押しやられてiframeが下に寄ってしまうため、これを修正するために位置の指定として「position:absolute;」を指定します。
.iframe-wrap iframe {
position: absolute;
top: 0;
left: 0;
}
「top:0;」「left:0;」はそれぞれ「上から0px、左から0pxの場所」を指定しています。親要素の左上の角にiframeをそろえていることになります。
「position:absolute;」が適用されるために親要素を「position:relative;」にする。
「position:absolute;」の配置の基準を親要素「iframe-wrap」にするためには、親要素が「position:relative;」でないといけません。これがないとブラウザの一番左上が基準になってしまいますので気をつけてください。
以上でiframeのスマホ対応が完成です。いかがだったでしょうか？初心者の方にとっては難しかったと思います。でも、ひとつひとつプロパティの特徴を理解していくうちに、この内容も分かるようになってきます。
今日、分からなかった方も半年後、１年後にこのページを見てみてください。きっと理解できるようになっていると思います。
最後までお読みいただきありがとうございました。
2018.08.27ここでは、下記のような条件でページを構成したい場合の事例について見ていきます。
YouTubeを埋め込んでスマホ対応させたい。
埋め込んだ動画をテキストや画像と横に並べて２列で配置したい。
スマホ表示時は、動画やテキストを１列にしたい...
