リファレンス

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

Sara

<iframe>

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

デモ: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="300" height="200"
    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 タグ一覧はこちら

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
ABOUT ME
Sara
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語:Java / Kotlin / PHP
>> 詳しいプロフィール
>> お問い合わせ
>> 書籍を出版しました!
本格的に学びたい方へ

Code for Fun プログラミング講座

Code for Fun プログラミング講座では、プログラミングの基礎からアプリ開発まで学ぶことができます。

わかりやすく・シンプルをモットーに

  • 同じコードを書けば必ず完成できること
  • 専門用語を使いすぎないこと

を重視しています。

POINT 01

動くコード

プログラミングの文法だけを学んでも、そこから動くアプリを開発をするのは難しいです。

Code for Fun のプログラミング講座では、ゲームやカレンダーなど「アプリとして機能するもの」を作りながらプログラミングを学ぶことができます。

POINT 02

自分のペースで

オンライン講座なので、ご自身のペースで学習を進めて頂けます。

分からないことがあっても、前のレッスンに戻ることができるので安心です。

お申し込みしたその日からからすぐに始めることができます。

POINT 03

個別サポート

プログラミング学習では、エラーが起きることはよくあります。そんな時はお気軽にお問い合わせください!

コメント欄またはメールによるサポートを回数無制限でご利用頂けます。(*講座に関連するご質問のみ対応)

今すぐ無料でお試し

0
この記事にコメントするx
記事URLをコピーしました