アイフレームをスマホ対応させる方法 | コトダマウェブここでは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(アイフレームの高
