[CSS]iframe 要素をレスポンシブ対応させる方法
スポンサード
iframe とその親要素(
Youtube やGoogle Maps のサイズ比は「横:高さ=4:3」の場合に、
※例ではpadding-top にしていますが、padding-bottom でも良いようです。
スポンサード
以前にも iframe やtable のレスポンシブ対応に最適なCSS「Fluidity」 の記事を紹介させていただきましたが、今回はfluidity を使わずに、ちょっとしたCSS のスタイル記述だけで簡単にiframe 要素をレシポンシブ対応させる方法をご紹介します。
目次
iframe のレスポンシブ対応
以下のように、Youtube やGoogle Maps の埋め込みコード(iframe)をdiv 要素で囲みます。<div class="iframeWrapper"> <iframe width="640" height="480" src="…"></iframe> </div>※
iframeWrapper
となっているクラスは何でも良いです。iframe とその親要素(
.iframeWrapper
)に対して、それぞれ以下のようなスタイルを指定します。div.iframeWrapper { position: relative; width: 100%; padding-top: 75%; } div.iframeWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }親要素である
.iframeWrapper
に指定したpadding-top:75%
の値は、iframe のサイズ比(Youtube やGoogle Maps のサイズ比)をもとに算出します。Youtube やGoogle Maps のサイズ比は「横:高さ=4:3」の場合に、
.iframeWrapper
の横幅(width)を100%とすると、75% のpadding-top を指定してあげます。※例ではpadding-top にしていますが、padding-bottom でも良いようです。
iframe のレスポンシブ対応サンプル
Youtube とGoogle Maps をiframe で埋め込み表示したサンプルです。Youtube
Google Map
スポンサード
コメント