iframeのレスポンシブ対応の方法。iphoneではみ出る問題も解決済み

2019

06/28

Published

2019.06.28

/ 松原 潤一

　　

\ この記事を共有 /

B!

リンクをコピーする

iframeのレスポンシブ対応の方法。iphoneではみ出る問題も解決済...

松原 潤一

B!

リンクをコピーする

iframeタグを使うと、別のページの内容が埋め込めるということは前回の記事で書きました。
⇒「知っておくと便利！別のページを記事の中に埋め込むiframeの基本的な使い方」

ただ、iframeタグは、ただただ使ってしまうとスマホやタブレット、PCどこからみてもキレイな表示のレスポンシブ対応にはなりません。

そこで今回は、iframeタグのレスポンシブ対応について調べて実践してみました。

iframeをレスポンシブ対応させる方法（基本編）

例えばこのようなiframeのタグを使うと、レスポンシブ対応されません。スマホやタブレットで見るとはみ出したり変な表示になります。

<iframe src="埋め込むページのURL" width="750" height="350" frameboader="0"></iframe>

レスポンシブ対応させる方法。HTMLとCSS

そこで、以下のように親要素を用意し、CSSで調整をしてあげます。

HTML↓　

<div class="iframe-wrap">
　<iframe src="埋め込むページのURL" frameboader="0"></iframe>
</div>

iframeを<div class=”iframe-wrap”>～</div>など親要素ではさみます。（※iframe-wrap部分の名前は何でもOK。<div class=”hoge”>でもいいし<div class=”oya”>でもOKです）

またiframeタグのwidth、heightをなくしてあげましょう。

CSS ↓ 　※これはまだ使わないで下さい。

.iframe-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

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

あとは、親要素の大きさは横幅は画面いっぱい100％の、横16：縦9で用意します。その中の要素は横・縦100％で埋めてあげる感じです。

※padding-topの数字（例では56.25%にしている部分）は、iframeの高さに当たる部分なので好きに調整してみてください。

これで、アンドロイド端末であれば、スマホからでもキレイに見えるようになります。

参照：コトダマウェブ様「アイフレームをスマホ対応させる方法」

が！！

これだけだとiphoneから見てみると、はみ出る。うまくいかない。

iPhone特有の仕様のせいらしいのですが、これには困りました。

iPhoneからでもキレイに見れるようにするにはどうしたらいいか？

結論から言うと、HTML、CSSは以下のようにします。

HTML↓

<div class="iframe-wrap">
　<iframe src="埋め込むページのURL" frameboader="0"></iframe>
</div>

CSS↓（※これもまだ使わないで！ｗ）

.iframe-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow:auto; 
  -webkit-overflow-scrolling:touch;
}
.iframe-wrap iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:block;
}

そこで、こちらのサイト「iPhoneでもiframeを使ってスクロールさせて、かつ、PCとも外観を揃える方法」を参考に調整。

親要素に

overflow:auto; 
-webkit-overflow-scrolling:touch;

この2行を追加。

• overflow:auto; で、ボックスに入らない時は、はみ出た部分はスクロールさせるようにする。
• -webkit-overflow-scrolling:touch;の部分で、スマホなどで指でスクロールした時に惰性でスクロールし続けるかどうか？を指定しています。（touchじゃなくてautoだと、指を離すとスクロールが止まる）

iframe内の要素も一応blockにします。

これだけだと、埋め込んだiframeの枠が汚いので、ちょっとだけCSSに数行付け足して整えてあげます。

【完成版】iPhoneでもiframeをキレイに埋め込むためのHTMLとCSS

ということで、以下のようにすると、キレイに埋め込めました。

HTML↓

<div class="iframe-wrap">
　<iframe src="埋め込むページのURL" frameboader="0"></iframe>
</div>

このHTMLをブログやホームページに貼ります。（WordPresssの記事を書く画面でいうと、テキストモードやコードエディターなどに貼ります）

CSS↓

.iframe-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow:auto; 
  -webkit-overflow-scrolling:touch;
  border:2px solid #ccc; 
}
.iframe-wrap iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:none;
    display:block;
}

このCSSを使いましょう！ WordPressなら外観⇒カスタマイズ⇒追加CSSに追記しておくといいです。

iPhoneでも、キレイに表示されていますでしょうか・・・！

↓↓↓

まとめ

今回も、自分自身の備忘録としていろんなサイトを参考にさせていただき、記事にしました。

• iframeを使ってもレスポンシブ対応にならない…
• iPhoneから見るとはみ出る！

っていう場合に参考にしていただけたら幸いです。