リファレンス

<iframe>要素の使い方・サンプルコード

<iframe> 要素は、現在の HTML ページに別の HTML ページを埋め込むことができます。

デモ:<iframe> 要素

 
 

属性

<iframe 属性名="ここに値を指定"></iframe>

* align, frameborder, longdesc, marginheight, marginwidth, scrolling 属性は非推奨・廃止となっています。
 

allow

機能ポリシーを使って、使用できる機能を宣言することができます。

fullscreen全画面モードにすることができます。
paymentPayment Request API の実行を許可することができます。

 

height

フレームの高さをピクセル値で指定します。単位はつけません。既定値は 150 です。
 

name

フレームの名前を指定します。
 

referrerpolicy

フレームのリソースにアクセスする時に、どのリファラー(参照元)を送信するかを示します。

no-referrer-when-downgrade(既定値)オリジンに TLS (HTTPS) がない場合は送信しません。
no-referrerReferer ヘッダーを送信しません。
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 に共通して使用できるグローバル属性はこちら
 
 

使用例

例① 基本的な使い方

HTMLコード
<iframe width="350" height="250"
    src="https://codeforfun.jp/demo/html/references/tag-iframe.html"></iframe>
実行結果


 
 

例② srcdoc 属性を使う場合

src 属性に指定した URL ではなく、srcdoc 属性に書いた HTML が表示されます。
* IE と Edge は非対応
 

HTMLコード
<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 プロパティを使用します。
 

HTMLコード
<iframe width="300" height="200"
    src="https://codeforfun.jp/demo/html/references/tag-iframe.html"
    style="border:none;"></iframe>
実行結果


 
 

例④ iframe の枠線のカスタマイズ方法

CSS の border プロパティを使用します。
 

HTMLコード
<iframe width="300" height="200"
    src="https://codeforfun.jp/demo/html/references/tag-iframe.html"
    style="border:2px dotted blue;"></iframe>
実行結果


 
 

対応ブラウザ

 
 

関連するタグ

 

HTML タグ一覧はこちら
 

ABOUT ME
Sara
「わかりやすく・シンプル」をモットーに、スマホアプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂
独学は難しそうと感じたら

 
独学でプログラミングを勉強するのは難しそう、効率的にプログラミングを学びたいという方はオンラインスクールがオススメです。

オンラインスクールを選ぶときのポイント

  • 無料体験があること
  • 個別サポートがあること

自分にあったスタイルを見つけるために、無料体験のご利用をオススメします。(無料体験後に自分には合わないなと感じたらハッキリ断ってしまって問題ありません。)
 
個別サポートもプログラミング学習に挫折しないために重要なポイントです。エラーや困った時にすぐに個別対応をしてくれるスクールを利用して下さい。

ここでは3つのオンラインスクールを紹介します。
全て無料体験がありますので、ぜひ自分に合ったスクールを見つけてみて下さい????
 

1. TechAcademy(テックアカデミー)

オンライン完結で勉強できるスクールで、コースがとても充実しています。チャットで質問すればすぐに回答を得られるのが一番のおすすめポイントです。
オリジナルのサービスやアプリの開発もサポートしてくれるので、開発したいものが決まっている人にもオススメです。

無料体験はこちら

2. CodeCamp(コードキャンプ)

一対一で受講できる個別指導のプログラミングスクールです。
Webデザイン・Webサービス開発・アプリ開発などを幅広く学習することができます。
マンツーマンなので自分のペースで学習できて、質問もその都度できるのがメリットです。

無料体験レッスンはこちら

3. Treehouse

英語でも良い、英語とプログラミングを同時に勉強したいという方は Treehouse がオススメです。月25ドルで始めることができて、たくさんのプログラミング言語を学ぶことができます。
個別サポートはありませんが、掲示板が充実しています。ほとんどの場合、質問してから30分程度で回答を得ることができます。

7日間の無料体験はこちら

guest
0 Comments
Inline Feedbacks
View all comments
0
この記事にコメントするx