今でも使われる機会があるiframe要素ですが、皆さんはどんな時に使ったりしますか？
よくある例としては、Google MapやYoutube動画の埋め込みがあると思いますが、このiframe、使用したことある方であればお分かりかと思いますが、超絶デザイン制御しづらい要素です！
しかし、その際のレスポンシブ対応については、実はものすごく簡単に対応できますのでご紹介します！
結論、iframeは要素をdivで包み、cssで制御！
Google Mapを例にiframe要素を見てみると、ifarmeのサイズを記述している箇所があります。以下のようなコードですね。
width="600" height="450"
そのため、レスポンシブ対応はできないかも？と心配になってしまいます。
確かに、属性でサイズを指定しただけですと「固定」となりますが、CSSを使うことによってレスポンシブ対応は可能です。CSSで制御ができれば上記の固定のサイズ指定コードは消してもOKです！
手順はこの2つのみ！
1.まずはGoogle Map等の埋め込みコード（iframe）をコピペします。そのときに、埋め込みコードの親になるようにブロックレベル要素で囲みます。
<div class="google_map">
<iframe src="省略" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>2.そしてCSSで以下のように指定します。
.google_map{
position:relative;
width:100%;
height:0;
padding-top:75%;
}
.google_map iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}完成例
※ここではさらにGoogleMapをモノクロにしたり現在地のマーカーをカスタムするJSを使用していますが、それについてはまたのちほど！
簡単ですね！
