どんなタグ？
HTML内のフレームに
別のWebページを埋め込みます。
<body>
<iframe src="https://shibajuku.net" title="Shibajuku – フロントエンド系Webクリエーター養成所"></iframe>
</body>https://codehero.shibajuku.net/html/iframe/sample1/
<iframe> タグはInline Frame の略で、ページ内に別のWebページをインラインフレームとして埋め込む タグです。
Google MapやYouTubeなどの埋め込みに利用されたりします。
- どのカテゴリに属しているの？
- iframe要素は フロー・コンテンツ, フレージング・コンテンツ, エンベデッド・コンテンツ, インタラクティブ・コンテンツ というコンテンツ・カテゴリに属しています。
- 梱包できるタグは？
- iframe 要素に梱包できるタグ（コンテンツ・モデル）は、ありません。
Youtubeの動画やTwitterなどSNSタイムラインを埋め込む時にも使います。使いどころが多いタグですね！
どうやって使うの？
埋め込みたいWebページのURLを
src 属性で指定します。
iframe要素は <iframe> にsrc 属性で埋め込みたいWebページのURLを指定します。srcdoc 属性にHTMLコードを直接書くこともできます。（EdgeやIEは対応していません。）
また、必須ではありませんが、title属性を使用すると、読み上げソフトを利用している人がわざわざiframeに移動しなくても内容がわかるようなります。
ぜひtitle属性を使用してアクセシビリティを意識した優しいサイトにしましょう。
- 基本的な使い方
-
<iframe src="WebページのURL" title="埋め込みコンテンツの説明"></iframe>
<body>
<iframe src="https://shibajuku.net" title="Shibajuku – フロントエンド系Webクリエーター養成所"></iframe>
</body>https://codehero.shibajuku.net/html/iframe/sample1/
- srcdoc 属性の使い方
-
<iframe srcdoc="埋め込むHTML"></iframe>
<body>
<iframe srcdoc="<h1>こんにちは</h1>"></iframe>
</body>- どこでも使えるの？
-
<iframe>タグは エンベデッド・コンテンツ が配置できるところなら使えます。 - 気をつけることは？
- 攻撃に利用されたり、攻撃されるリスクがあります。sandbox属性を指定するとscriptの実行やformの送信などを制限することができますが、まだ対応していないブラウザがあります。またChromeはHTTPS/HTTP混在ページにおけるHTTPをデフォルトでブロックの対象としていく予定です。
埋め込み先は信頼できるサイトだけにしましょう。
ぜひtitle属性で埋め込みコンテンツの説明を書いてアクセシビリティを意識した優しいサイトにしましょう。
使える属性は？
グローバル属性はもちろん。
src 属性が最もよく使います
<iframe >タグには、どの要素にでも使えるグローバル属性と、以下の固有属性が使えます。
src 属性
インラインフレームに埋め込むページのURLを指定する属性です。
- 属性値
- 埋め込むページのURL
<iframe src="https://shibajuku.net"></iframe>
srcdoc 属性
インラインフレームに埋め込むコンテンツを直接HTMLで指定する属性です。非対応ブラウザではsrc属性を表示し、対応ブラウザではsrc属性は表示されません。
- 属性値
- 埋め込むHTML
<iframe srcdoc="<h1>こんにちは</h1>"></iframe>
height 属性
インラインフレームの高さを指定する属性で、指定しない場合は 150px の高さで表示されます。
- 属性値
-
高さを
pxで指定。（初期値： 150）
<iframe src="https://shibajuku.net" height="300″></iframe>
width 属性
インラインフレームの幅を指定する属性で、指定しない場合は 300px の幅で表示されます。
- 属性値
-
幅を
pxで指定。（初期値： 300）
<iframe src="https://shibajuku.net" width="600″></iframe>
name 属性
インラインフレームに名前を指定する属性です。このnameを使って、そのインラインフレームに名前を設定することで、a 要素、area 要素、base要素、form要素、link要素の target 属性でリンクの表示先として指定することができるようになります。
- 属性値
- インラインフレームの名前を指定
<iframe src="https://shibajuku.net" name="shibajuku"></iframe>
sandbox 属性
インラインフレーム内のコンテンツに制約を指定する属性です。属性値を空にすると全ての制約を適用します。特定の制約を外したい場合は、外したい制約を半角スペースで区切って指定することで制約を外せます。なお、allow-scripts と allow-same-origin を同時に指定すると、埋め込まれたコンテンツから sandbox 属性を削除することができてしまうので、避けましょう。また、このsandbox 属性は、InternetExplorer9 以前は対応していません。
- 属性値
-
allow-downloads-without-user-activation- ユーザーの操作なしでダウンロードが発生することをを許可する
allow-forms- フォームを送信することを許可する
allow-modals- モーダルウィンドウを開くことを許可する
allow-orientation-lock- スクリーンの方向をロックすることを許可する
allow-pointer-lock- Pointer Lock API の使用を許可する
allow-popups- ポップアップを許可する
allow-popups-to-escape-sandbox- iframeから別のページを開いた時に制限を引き継がない
allow-presentation- プレゼンテーションセッションを開始を許可する
allow-same-origin- 同じオリジン（URLのスキーム、ホスト、ポートが同じ）になることを許可する
allow-scripts- スクリプト (ただし、ポップアップウィンドウを作成しないもの) 実行を許可する
allow-storage-access-by-user-activation- 親のストレージ容量へのアクセス要求を許可する
allow-top-navigation- 最上位の閲覧コンテキストに移動を許可する
allow-top-navigation-by-user-activation- ユーザーの操作によってのみ最上位の閲覧コンテキストに移動を許可する
<iframe src="https://shibajuku.net" sandbox="allow-same-origin allow-forms allow-scripts"></iframe>
referrerpolicy 属性
インラインフレーム内のリソースにアクセスする際にどのリファラーを送信するかを示します。（例えば、埋め込んだサイトでリンクをクリックした場合などに送られるサイトのURL情報）
- 属性値
-
no-referrer- 送信しない
no-referrer-when-downgrade初期値- TLS (HTTPS) のないオリジンには送信しない
origin- 参照しているページのオリジン (スキーム, ホスト, ポート番号が同じ) に限定しドメイン以降の情報を含まない
origin-when-cross-origin- 他のオリジンへの送信は、スキーム、ホスト、ポート番号に制限します。同一オリジンへの移動は、パスも含めます
same-origin- 同じオリジンにだけ送信します
strict-origin- HTTPS→HTTPでは文書のオリジンのみを送信しますがHTTPS→HTTPには送信しません
strict-origin-when-cross-origin- 同一オリジンへのリクエストには URL 全体を送信し、HTTPS→HTTPSには文書のオリジンのみ送信し、HTTPS→HTTPにはヘッダーを送信しません
unsafe-url- リファラーにオリジンおよびパスを含める
<iframe src="https://shibajuku.net" sandbox="allow-same-origin allow-forms allow-scripts"></iframe>
allow 属性
ブラウザーの特定の機能や API を有効化、無効化したり、動作を変更したりする iframeの機能ポリシーを指定する属性です。
- 属性値
- 機能ポリシー
<iframe src="https://map.shibajuku.net" allow="geolocation"></iframe>
allowfullscreen 属性
全画面モードにすることを許可するかどうかを指定する属性です。
- 属性値
-
true- 許可する
false- 許可しない
<iframe src="https://map.shibajuku.net" allowfullscreen"></iframe>
allowpaymentrequest 属性
ホストが違うiframeで Payment Request API（支払い情報・配送先住所などを入力するUIを提供するAPI）の実行を許可するかどうかを指定する属性。
- 属性値
-
true- 許可する
false- 許可しない
<iframe src="https://shibajuku.net" allowpaymentrequest"></iframe>
align 属性
HTML4.01 非推奨
HTML5 廃止
フレームの整列方法を指定する属性
- 属性値
-
bottom初期値- 下端揃え
top- 上端揃え
middle- 中央揃え
left- ブ左フロート
right- 右フロート
frameborder 属性
HTML5 廃止
フレームの周りに境界線を指定する属性。
- 属性値
-
1- ボーダーあり
0- ボーダーなし
longdesc 属性
HTML5 廃止
インラインフレームの内容についての長い説明のURLを指定する属性
- 属性値
- フレームの内容について長い説明のURL
marginheight 属性
HTML5 廃止
インラインフレームの縦方向のマージンを指定する属性
- 属性値
- 上下のマージンのピクセル数
scrolling 属性
HTML5 廃止
フレームにスクロールバーを表示する属性
- 属性値
-
auto- フレームの寸法よりも大きい場合は表示する
yes- 常にスクロールバーを表示する
no- スクロールバーを表示しない
外部サイトの埋め込みには十分ご注意下さい。情報漏洩など被害が出ることも！！
サンプルが見たい
<iframe>タグを使ったサンプルを
紹介。
<iframe>タグを使ったサンプルを紹介します。
基本的な <iframe>のサンプル
<body>
<iframe src="https://creatorquest.jp" title="CreatorQuest（クリエータークエスト） | 伝説のWEBクリエーターを目指す冒険を始めよう！"></iframe>
</body>https://codehero.shibajuku.net/html/iframe/sample2/
<iframe>を使ってGoogleマップを埋め込む場合
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3282.0870842862996!2d135.5041117506393!3d34.65250359321012!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6000e76077e042ff%3A0xe5cbcf56def44557!2z6YCa5aSp6Zaj!5e0!3m2!1sja!2sjp!4v1583981132832!5m2!1sja!2sjp" frameborder="0″ style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0″ title="大阪名物通天閣の場所"></iframe>https://codehero.shibajuku.net/html/iframe/sample4/
GoogleマップやYouTubeは共有から埋め込み用メニューがあるので、コードをコピぺすればOK、デフォルトでwidthとheightが指定されているので、CSSでカスタマイズしてください
デフォルトスタイルは？
デフォルトでは、
ブラウザのデフォルトサイズ
iframe {
width: 300px;
height: 150px;
} width、height属性はパーセントで指定できないので、レスポンシブ対応するならCSSで。
対応ブラウザは？
基本的にはどのブラウザでも大丈夫。
sandbox属性は、IE9では対応していません
<iframe>タグは HTML4以降で利用可能で、主に以下のブラウザが対応しています。
- Internet Explorar
- Internet Explorar 6 ~
- Edge
- Edge 1 ~
- Google Chrome
- Google Chrome 1 ~
- Firefox
- Firefox 2 ~
- Safari
- Safari あり ~
- Opera
- Opera あり ~
モダンブラウザは問題ありません。
