HTML要素のiframeタグについて
はじめに
本記事はHTMLのiframeに関する情報を調べてまとめた内容になります。
ドキュメントも参考にしています。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/iframe#属性
iframe（Inline Frame）
iframeは、ウェブページ内に別のウェブページを埋め込むためのHTML要素です。
基本
基本構文
iframeタグでsrc、width と heightを指定します。
<iframe src="https://example.com" width="500" height="300"></iframe>
src
- 埋め込むウェブページのURL。
width & height
- iframeのサイズ。
その他の主要な属性
allow
<iframe>に適用される権限ポリシーを指定します。- このポリシーは、利用可能な機能（マイク、カメラなど）をリクエストのオリジンに基づいて定義します。
allowfullscreen
<iframe>が全画面モードにすることができる場合にtrueに設定します。
sandbox
- 埋め込まれたコンテンツに適用される制限を制御します。
- この属性の値は、特定の制約を外すための空白区切りのトークンにすることができます。
srcdoc
- 埋め込むインラインHTMLを指定し、src属性を上書きします。
サンプル
ウェブページ内にYouTubeの動画を埋め込む例
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
活用方法
サードパーティーコンテンツの埋め込み
- YouTubeやVimeoの動画
- Google Maps
- 外部サイトからのウィジェットやツール
サイト内コンテンツの分離
- ダッシュボード内の各セクション
- ページ内に独立したスクロールエリアを持つコンテンツ
注意点
セキュリティ
- iframeを使用する際は、信頼できるソースからのコンテンツのみを埋め込むこと。
- クロスサイトスクリプティング（XSS）のリスクがあるため、sandbox属性を使用して制限をかけることが推奨される。
レスポンシブデザイン
- iframeのサイズは固定であるため、レスポンシブデザインを考慮する際は、CSSやJavaScriptを使用してサイズ調整が必要。
おしまい
コメント
本記事の内容は以上になります！
プログラミングスクールのご紹介 (卒業生より)
お世話になったプログラミングスクールであるRUNTEQです♪
こちらのリンクを経由すると１万円引きになります。
RUNTEQを通じて開発学習の末、受託開発企業をご紹介いただき、現在も双方とご縁があります。
もし、興味がありましたらお気軽にコメントか、TwitterのDMでお声掛けください。
