iframe 要素 (HTMLタグ)

インラインフレーム

2018年07月19日

HTMLのiframe要素の説明です。iframe要素は、インラインフレーム(HTML文書内でさらに別の文書を表示させる領域)となる要素です。


目次

  1. 要素の記述例
  2. 要素の説明
  3. 利用できる属性
  4. ブラウザデフォルトCSS設定

要素の記述例

iframe要素の記述例
<ul>
  <li><a href="abbr.html" target="example">abbr.htmlを表示する</a></li>
  <li><a href="address.html" target="example">address.htmlを表示する</a></li>
  <li><a href="area.html" target="example">area.htmlを表示する</a></li>
</ul>
<iframe src="abbr.html" width="300" height="60" name="example">インラインフレーム表示が有効になっていません。</iframe>

 

閲覧中ブラウザーでの表示結果

 

要素の説明

  • iframe要素は、インラインフレーム(HTML文書内でさらに別の文書を表示させる領域)となる要素です。
  • iframe要素の内容は、インラインフレームに未対応の環境、もしくは表示しない設定になっている環境の場合のみ表示されます。

 

利用できる属性

iframe要素で利用できる属性
属性名 属性の説明
allowfullscreen インラインフレームの内容を、Element.requestFullscreen()を使ってフルスクリーン表示できるかを定義する[link-html-ref-format_bool]です。
allowpaymentrequest インラインフレームの内容で、Payment Request APIを利用して支払い要求の実行ができるかを定義する[link-html-ref-format_bool]です。
height インラインフレームの高さを定義する属性です。定義する値はピクセル数で、負の整数は定義できません。
name a要素form要素target属性で定義する表示先名を定義する属性です。1文字以上で先頭が「_」以外のアルファベットを設定する必要があります。
referrerpolicy インラインフレームの内容を読み込む時にリファラを送信するかを定義する[link-html-ref-format_enum]です。
src インラインフレーム内に表示させるHTML文書のURLを定義する属性です。srcdoc属性が同時に定義されている場合は、srcdoc属性のHTML文書が優先されて表示されます。
srcdoc インラインフレーム内に表示させるHTML文書のソースコード全体を定義する属性です。src属性が同時に定義されている場合、srcdoc属性が優先されます。
sandbox iframe要素によって埋め込まれたHTML文書に対しての制限を定義する属性です。
width インラインフレームの幅を定義する属性です。定義する値はピクセル数で、負の整数は定義できません。

グローバル属性

HTMLのすべての要素はグローバル属性が利用できます。グローバル属性の一覧については「グローバル属性」を参照してください。

イベントハンドラ属性

iframe要素がサポートするイベントハンドラ属性については「イベントハンドラ属性」を参照してください。

ブラウザデフォルトCSS設定

Google Chromeの場合

iframe要素のブラウザデフォルトCSS
iframe {
  border-width: 2px;
  border-style: inset;
  border-color: initial;
  border-image: initial;
}
iframe:focus {
  outline: none;
}

 

 

 

Programming Style