デジタルマーケティング専門家/デジタルマーケッター・ブログ集客専門家 時々 おもろいおっさん

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

 
はみ出る
この記事を書いている人 - WRITER -
松原 潤一
デジタルマーケティング専門家、ブログ集客の専門家。ブログ・SNS活用・SEO・動画などなど現代のデジタルメディアを使ったマーケティングが大好物。【好き】⇒妻・娘・愛犬チワワ・漫画を描くこと・FF14。大阪吹田の千里ニュータウンを愛す。北摂によく出没。
詳しいプロフィールはこちら

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↓(※これもまだ使わないで!w)

.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から見るとはみ出る!

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

 

今までの僕のブログ集客のノウハウを全部つぎ込んで
しかも無料で配布することにしました。

総ページ100ページ以上の
大ボリュームE-bookです。

是非あなたのブログのお役立てください。

今のうちにゲットしてください。

何やらここでは言えない
『超豪華特典』が付いています。

詳しくはE-bookの最後で。

ebook

この記事を書いている人 - WRITER -
松原 潤一
デジタルマーケティング専門家、ブログ集客の専門家。ブログ・SNS活用・SEO・動画などなど現代のデジタルメディアを使ったマーケティングが大好物。【好き】⇒妻・娘・愛犬チワワ・漫画を描くこと・FF14。大阪吹田の千里ニュータウンを愛す。北摂によく出没。
詳しいプロフィールはこちら