ここではiframeのレスポンシブ対応の方法についてお話していきます。iframeは、GoogleマップやYoutubeの埋め込み用のコードを使う場合でも対応が必要になります。レスポンシブは理解するのが難しい部分がありますが、とりあえずコードだけでもコピペしてお使いください。

とりあえずやり方だけ知りたい方へ

結論だけ知りたい方のためにはじめにコードだけお伝えしておきます。

HTML

<div class="iframe-wrap">
 <iframe src="アイフレームを表示させたいURL" frameborder="0"></iframe>
</div>

iframeをdivでラップしてdiv要素に適当なclass名を入れます。

スタイルシート

.iframe-wrap {
  position: relative;
  width: 100%;
  padding: calc(アイフレームの高さ / アイフレームの横幅 * 100%) 0 0;
}

.iframe-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

「アイフレームの高さ」と「アイフレームの横幅」のところは数字だけ記入します。「px」などの単位は入れないでくださいね。上記の方法でレスポンシブ対応可能です。

iframeのスマホ対応の具体例

実際に上記の方法でYoutubeを埋め込んだ際のコードと実際のiframeがこちらです。

HTML

<div class="iframe-wrap">
<iframe width="640" height="360" src="https://www.youtube.com/embed/UlAqutrCgX8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

スタイルシート

.iframe-wrap {
  position: relative;
  width: 100%;
  padding: calc(480 / 854 * 100%) 0 0; /* 高さと横幅の数字には単位は入れません。 */
}

.iframe-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

どうしてこれがスマホ対応になるのか仕組みを知りたい方へ

他のサイトでもスマホ対応のやり方は載っているのですが、その仕組みをちゃんと説明してくれているところがほとんどありません。ここではその仕組みについて詳しくお話していきます。iframeのレスポンシブ対応には、いろんなプロパティの知恵が総動員されています。

基本的な考え方

iframeのレスポンシブ対応の手順を一言で説明すると、div要素でiframeにぴったりな枠（親要素）を作成し、その中にiframeをぴったり収めているだけです。考え方は簡単なのですが、それを実際にスタイルシートで実装しようとするといろんなプロパティの特徴を理解していないといけません。

• heightではなくpaddingで要素の高さを作る。
• paddingのパーセント指定は親要素の横幅(width)に対する割合になる。
• 「calc」を使って値のところに計算式を入れる。
• 四方の値をショートハンドで記入する。
• 「position:absolute;」で位置を指定する。

iframeのレスポンシブ化でポイントとなるのは縦横の比率

画像をスマホ対応させたい場合は、img要素に「width:100%;」を指定しておけば、縦横の比率が保持されたままいろんな端末に対応可能になります。でも、iframeの場合はそのようになってくれません。そのため、縦横のサイズ比率を保たせるために次のような指定をします。

• 横幅のサイズ指定は「width:100%;」
• 高さのサイズ指定は「padding-top（もしくはpadding-bottom）」にパーセントで指定。

縦横サイズの比率算出

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:◯px △px ◇px; /* 上 左右 下 */

と記入すると、左から順番に「上 左右 下」という形で値の指定ができます。

つまり、

padding: calc(480 / 854 * 100%) 0 0;

は、下記と同じ意味になります。

padding-top:calc(480 / 854 * 100%);
padding-right:0;
padding-left:0;
padding-bottom:0;

詳細はこちらをご覧ください。＞＞スタイルシートの効率的な使い方

「position:absolute;」でiframeを親要素にぴったり入れる。

さて、親要素「iframe-wrap」の枠が完成したら、今度は中に入れるiframeをこの枠にぴったりと納めていきます。ぴったり収めるためには、縦横が100パーセントのサイズになりますね。

.iframe-wrap iframe {
  width: 100%;
  height: 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-wrap {
  position: relative;
}

以上でiframeのスマホ対応が完成です。いかがだったでしょうか？初心者の方にとっては難しかったと思います。でも、ひとつひとつプロパティの特徴を理解していくうちに、この内容も分かるようになってきます。

今日、分からなかった方も半年後、１年後にこのページを見てみてください。きっと理解できるようになっていると思います。
最後までお読みいただきありがとうございました。

2018.08.27

YouTUBE動画を横並び２列に配置してスマホ対応させたい

ここでは、下記のような条件でページを構成したい場合の事例について見ていきます。 YouTubeを埋め込んでスマホ対応させたい。 埋め込んだ動画をテキストや画像と横に並べて２列で配置したい。 スマホ表示時は、動画やテキストを１列にしたい...