cman.jpWEBページ作成
広告
<iframe> 「インラインのフレーム」[読み方：アイフレーム／インラインフレーム]
<iframe>タグは、ページ内に小窓を設けそこに他の画面(htmlなど）を表示する場合に使用します。
現在では広告の掲載などで利用が多くなっています。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | ○(*2) | ○ |
(*2)DTDがStrict、Transitionalの場合は使用できない
広告
<iframe> の仕様
| カテゴリー | 使用できる場所（親要素） | コンテンツモデル（子要素） | タグ省略 |
|---|---|---|---|
| フローコンテンツ フレージングコンテンツ エンベディッドコンテンツ インタラクティブコンテンツ パルバブルコンテンツ | エンベディッドコンテンツを子要素にもてる場所 | 無 | 不可 |
<iframe> の属性
【構文】
<iframe src="iframe.html" height="100" width="200"></iframe>
| 属性 | 意味 | 値のサンプルなど | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| src="URI" | フレームに表示するURI 【条件付必須】 ※下記留意事項参照 | ../iframe.html | ||||||||||||
| height="高さ" | フレームの高さ（ピクセル値） | "200"（初期値：150） | ||||||||||||
| width="幅" | フレームの幅（ピクセル値） | "200"（初期値：300） | ||||||||||||
| name="固有名" | フレームに付ける固有名 | "iframename" | ||||||||||||
| longdes="URI" | フレームを説明するURI ※HTML5で廃止。指定不可。 | ../iframe.html | ||||||||||||
| scrolling="値" | スクロールバーの表示方法 ※HTML5で廃止。スタイルシートで指定。 |
| ||||||||||||
| frameborder="値" | 境界線の表示方法 ※HTML5で廃止。スタイルシートで指定。 |
| ||||||||||||
| marginwidth="余白幅" | フレームの余白幅（ピクセルまたは％） ※HTML5で廃止。スタイルシートで指定。 | "10","10%" | ||||||||||||
| marginheight="余白高さ" | フレームの余白高さ（ピクセルまたは％） ※HTML5で廃止。スタイルシートで指定。 | "10","10%" | ||||||||||||
| srcdoc="タグ" | フレームに表示するURIや説明文 ※HTML5で追加 | サンプル参照 | ||||||||||||
| sandbox="値" | 表示するコンテンツの制限 ※HTML5で追加 |
|
||||||||||||
| align="表示位置" | フレームを表示する位置 ※HTML5で廃止。スタイルシートで指定。 |
| ||||||||||||
| allow="値" | 利用可能な機能を指定 ※HTML5以降に追加 | "camera" | ||||||||||||
| allowfullscreen | requestFullscreen()を呼び出して全画面モードにする ※HTML5以降に追加 | |||||||||||||
| referrerpolicy="値" | リファラーポリシーを指定 ※HTML5以降に追加 | リファラーポリシー | ||||||||||||
| loading="値" | コンテンツの読み込みタイミングを指定 ※HTML5以降に追加 |
| ||||||||||||
| 廃止された属性 |
|
|||||||||||||
| グローバル属性 |
| |
| イベント属性 |
| |
<iframe>タグのサンプル
<iframe src="https://www.cman.jp/" height="250" width="auto">
iframeに対応したブラウザでご覧ください。
</iframe>
iframeに対応したブラウザでご覧ください。
</iframe>
<iframe srcdoc="<p>このフレームの詳細は<a href="https://www.cman.jp/=">こちら</a>ご確認ください"
src="https://www.cman.jp/" height="250" width="auto"></iframe>
留意事項
- <iframe>と</iframe>の間にはiframeに対応していないブラウザ向けのメッセージを設定してください。現在、ほぼすべてのブラウザでiframeに対応しています。
- <iframe>で表示したURLがメインページのドメインと違う場合は、クロスサイトスクリプティングの該当するため、<iframe>内の内容をJavaScriptなどで参照することはできません。
- align、frameborder、marginwidth、marginheight、scrolling属性は、HTML5で廃止されました。スタイルシートで指定してください。
- longdes属性は、HTML5で廃止されました。指定できません。
- itemprop属性を指定する場合、src属性も指定が必須です。
広告