![見出し画像](https://assets.st-note.com/production/uploads/images/148399175/rectangle_large_type_2_8d1cb24534ce1658b0ef4de1400d65fa.png?width=1200)
Photo by
msyaan
HTML5のiframeとレスポンシブ対応についての初心者向けガイド
マガジンの分類 WEB開発で楽しむ未来のデザイン
iframeは、HTML文書の中に別のHTML文書を埋め込むための要素です。例えば、YouTubeの動画やGoogleマップをウェブページに埋め込みたい場合に使用します。HTML5でもこのタグは有効です。
基本的な使い方
iframeを使うには、以下のような基本的な構文を使用します。
![](https://assets.st-note.com/img/1721830121917-HlYSuy69Uu.png?width=1200)
この例では、https://www.example.comというURLのコンテンツを幅600ピクセル、高さ400ピクセルのiframe内に表示します。
レスポンシブ対応
現代のウェブデザインでは、画面サイズに応じてレイアウトが変わる「レスポンシブデザイン」が重要です。iframeをレスポンシブにするためには、以下のようなCSSを使用します。
![](https://assets.st-note.com/img/1721830162627-JehcSxppio.png?width=1200)
説明
.responsive-iframe クラスは親要素に対して相対的な位置を設定し、幅を100%、高さを0に設定して、パディングボトムでアスペクト比を維持します。この例では16:9のアスペクト比を使用していますが、padding-bottomの値を調整することで他のアスペクト比も設定可能です。
iframe要素は絶対位置に設定し、親要素の幅と高さに対して100%を設定します。これにより、iframeは親要素のサイズに応じてリサイズされます。
これにより、iframeは画面サイズに応じて自動的にサイズを調整し、レスポンシブ対応となります。
この記事が気に入ったらサポートをしてみませんか?