<iframe> 要素は、現在の HTML ページに別の HTML ページを埋め込むことができます。
目次
属性
<iframe 属性名="ここに値を指定"></iframe>
* align, frameborder, longdesc, marginheight, marginwidth, scrolling 属性は非推奨・廃止となっています。
allow
機能ポリシーを使って、使用できる機能を宣言することができます。
| 値 | |
|---|---|
| fullscreen | 全画面モードにすることができます。 |
| payment | Payment Request API の実行を許可することができます。 |
height
フレームの高さをピクセル値で指定します。単位はつけません。既定値は 150 です。
name
フレームの名前を指定します。
referrerpolicy
フレームのリソースにアクセスする時に、どのリファラー（参照元）を送信するかを示します。
| 値 | |
|---|---|
| no-referrer-when-downgrade（既定値） | オリジンに TLS (HTTPS) がない場合は送信しません。 |
| no-referrer | Referer ヘッダーを送信しません。 |
| origin | 送信するリファラーをスキーム、ホスト、ポート番号に制限します。 |
| origin-when-cross-origin | 異なるオリジンへの移動ではスキーム、ホスト、ポート番号に制限し、同一オリジンへの移動にはリファラーのパスも含めて送信します。 |
| same-origin | 同一オリジンにはリファラーを送信しますが、オリジン間リクエストにはリファラー情報を含めません。 |
| strict-origin | セキュリティ水準が同じ場合は文書のオリジンのみをリファラーとして送信し、送信先のセキュリティがより低い場合は送信しません。 |
| strict-origin-when-cross-origin | 同一オリジン間の場合は URL 全体を送信しますが、セキュリティ水準が同じ場合は文書のオリジンのみをリファラーとして送信し、送信先のセキュリティがより低い場合は送信しません。 |
| unsafe-url | オリジンとパスを送信しますが、安全ではありません。 |
sandbox
フレーム内に表示するコンテンツに制限を付けます。
複数の値を指定する場合は半角スペースで区切ります。空文字を指定すると全ての制限を適用します。
| 値 | |
|---|---|
| allow-forms | フレーム内のスクリプト実行・フォームの送信を許可します。 |
| allow-modals | フレーム内でモーダルウィンドウを開くことを許可します。 |
| allow-orientation-lock | フレーム内のスクリーンの向きの操作を許可します。 |
| allow-pointer-lock | フレーム内での Pointer Lock API の使用を許可します。 |
| allow-popups | フレーム内で window.open(), target="_blank", showModalDialog() などを使ったポップアップの表示を許可します。 |
| allow-popups-to-escape-sandbox | フレーム内で新しいウィンドウが開かれた場合に sandbox 属性を継承しないようにします。 |
| allow-same-origin | フレーム内のページを呼び出し元と同じオリジンとして扱います。 |
| allow-scripts | フレーム内のポップアップウィンドウ以外のスクリプトの実行を許可します。 |
| allow-top-navigation | フレーム内から読み込み元のページ（最上位の閲覧コンテキスト）に移動・操作することを許可します。 |
| allow-top-navigation-by-user-activation | ユーザーの操作によるものに限り、フレーム内から読み込み元のページ（最上位の閲覧コンテキスト）に移動・操作することを許可します。 |
src
表示するページの URL を指定します。
srcdoc
インラインフレームの内容を直接記述することができます。
ブラウザが srcdoc 属性をサポートしている場合は src 属性を上書きします。* IE と Edge は非対応
width
フレームの幅をピクセル値で指定します。単位はつけません。既定値は 300 です。
グローバル属性
全ての HTML に共通して使用できるグローバル属性はこちら
使用例
例① 基本的な使い方
<iframe width="350" height="250"
src="https://codeforfun.jp/demo/html/references/tag-iframe.html"></iframe>
例② srcdoc 属性を使う場合
src 属性に指定した URL ではなく、srcdoc 属性に書いた HTML が表示されます。
* IE と Edge は非対応
<iframe width="300" height="200"
src="https://codeforfun.jp/demo/html/references/tag-iframe.html"
srcdoc="<h1>Hello</h1><p>iframe要素のサンプルです。</p>"></iframe>
例③ iframe の枠線を消す方法
frameborder 属性は非推奨となっているので、CSS の border プロパティを使用します。
<iframe width="300" height="200"
src="https://codeforfun.jp/demo/html/references/tag-iframe.html"
style="border:none;"></iframe>
例④ iframe の枠線のカスタマイズ方法
CSS の border プロパティを使用します。
<iframe width="300" height="200"
src="https://codeforfun.jp/demo/html/references/tag-iframe.html"
style="border:2px dotted blue;"></iframe>
対応ブラウザ
関連するタグ
独学でプログラミングを勉強するのは難しそう、効率的にプログラミングを学びたいという方はオンラインスクールがオススメです。
オンラインスクールを選ぶときのポイント
- 無料体験があること
- 個別サポートがあること
自分にあったスタイルを見つけるために、無料体験のご利用をオススメします。（無料体験後に自分には合わないなと感じたらハッキリ断ってしまって問題ありません。）
個別サポートもプログラミング学習に挫折しないために重要なポイントです。エラーや困った時にすぐに個別対応をしてくれるスクールを利用して下さい。
ここでは3つのオンラインスクールを紹介します。
全て無料体験がありますので、ぜひ自分に合ったスクールを見つけてみて下さい????
1. TechAcademy（テックアカデミー）
オンライン完結で勉強できるスクールで、コースがとても充実しています。チャットで質問すればすぐに回答を得られるのが一番のおすすめポイントです。
オリジナルのサービスやアプリの開発もサポートしてくれるので、開発したいものが決まっている人にもオススメです。
2. CodeCamp（コードキャンプ）
一対一で受講できる個別指導のプログラミングスクールです。
Webデザイン・Webサービス開発・アプリ開発などを幅広く学習することができます。
マンツーマンなので自分のペースで学習できて、質問もその都度できるのがメリットです。
3. Treehouse
英語でも良い、英語とプログラミングを同時に勉強したいという方は Treehouse がオススメです。月25ドルで始めることができて、たくさんのプログラミング言語を学ぶことができます。
個別サポートはありませんが、掲示板が充実しています。ほとんどの場合、質問してから30分程度で回答を得ることができます。
