HTML入門 | HTML空間分割 | HTML iframe

iframe要素

iframeとはinline frameの略である。iframe要素を利用すると、そのWebページ内に別のWebページを制限なく挿入できる。

文法は次のとおりである。

<iframe src="URL"></iframe>

iframe要素はframe要素とは異なり、終了タグが存在する。また、iframe要素は指定されたサイズで挿入されるウィンドウのサイズが固定される。

<iframe src="//www.devkuma.com" style="width:100%; height:300px"></iframe>

コード実行

iframe要素の枠線を変更する

iframe要素はデフォルトで黒い枠線(border)を持つ。この枠線のスタイルは、style属性でborderプロパティを使用すると変更できる。

<iframe src="//www.devkuma.com" style="width:100%; height:300px; border: 3px dashed maroon">
</iframe>

枠線を表示したくない場合は、style属性でborderプロパティ値をnoneに設定すればよい。

<iframe src="//www.devkuma.com" style="width:100%; height:300px; border:none"></iframe>

コード実行

iframe要素のページを変更する

<a>タグを利用すると、iframe要素のページを変更できる。<a>タグのtarget属性とiframe要素のname属性を接続すると、<a>タグを通じてiframe要素のページを変更できる。

<iframe src="//www.devkuma.com" name="frame_target" style="width:100%; height:400px;"></iframe>
<p>
  <a href="//www.google.com" target="frame_target">구글로 이동</a>
</p>

コード実行

その他

そのほかに<frameset>、<frame>、<noframes>要素があるが、HTML5標準勧告ではすでにサポートされていない。したがって、1つのページに複数のページを表示するには<iframe>要素を使用する必要がある。