HTML【インライン・フレーム】～iframe要素

iframe要素は、インライン・フレームを作るための要素です。
frameset要素やframe要素など、以前はフレームに関する要素が他にもありましたが、HTML5から使用できなくなり、iframe要素だけが残っている状況です。
今回は、他のHTMLファイルを組み込む際に使われるiframe要素についてまとめたいと思います。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

１．iframe要素

iframe要素は、インライン・フレームを作るための要素です。
インライン・フレームとは、HTMLファイル内に部分的に領域を作って、そこに別のHTMLファイルを入れ子にして取り込む表示方法です。
object要素でもHTMLファイルを組み込めますが、HTMLファイルを組み込む場合は、iframe要素がより適している要素です。

iframe要素の属性	src属性	組み込むHTMLファイルのURL
	name属性	targetで指定される名前を指定
	width属性	インラインフレームの幅をピクセルで指定
	height属性	インラインフレームの高さピクセルで指定
	srcdoc属性	組み込むHTMLファイルをURLでなくソースで指定
	sandbox属性	組み込むHTMLファイルの機能を制限する
	グローバル属性	id属性、class属性、title属性、style属性など

▲目次へ戻る

２．インライン・フレームの配置方法

インライン・フレームを設置する時は、iframe要素のsrc属性で、別のHTMLファイルを指定します。
サイズを指定しなければ、ブラウザのデフォルトサイズになります。

htmlコードは、以下の通りです。

<iframe src="https://programmercollege.jp/"></iframe>

　
サイズを指定（width=”600px” height=”300px”）すると、このようになります。

htmlコードは、以下の通りです。

<iframe src="https://programmercollege.jp/" width="600px" height="300px"></iframe>

▲目次へ戻る

３．target属性

　
target属性は、情報を表示するターゲットウィンドウを指定します。
target属性が使える要素は、a要素、area要素、base要素、form要素、link要素です。

target=”キーワード”で、ウィンドウまたはインライン・フレームを指定します。
次の５つのキーワードが選択できます。

_blank	新規のウィンドウ（または新規のタブ）に表示
_self	現在と同じウィンドウ（フレーム）に表示 デフォルト値
_parent	すぐ上の親ウィンドウ（フレーム）に表示
_top	フレームを解除してウィンドウ全体に表示（=最上位のウィンドウに表示）
ウィンドウ（フレーム）名	その名前のウィンドウ（フレーム）に表示 （name属性で名前を付けておく）

　
上の例では、インライン・フレーム内のHTMLファイルのリンクにはtarget属性を指定していないので、同じフレーム内にリンク先が表示されます。

▲目次へ戻る

４．インライン・フレーム内に表示させる

　
インライン・フレームをターゲットにすると、次のように表示されまます。
このリンクをクリックしてください。

htmlコードは、以下の通りです。

<a href="https://programmercollege.jp/" target="t_frame">このリンクをクリックしてください。</a>
<iframe name="t_frame"></iframe>

ターゲットにするiframe要素にname属性で名前を付けて、リンクを設定するa要素のtarget属性で、その名前を指定します。
この名前は、半角英数字で任意に付けられますが、アンダーバー（_）から始まる名前は付けられません。
target属性で指定する際に、キーワードと紛らわしくなるからだと思います。

iframe要素でsrc属性を使用していないので、リンクをクリックする前は何の表示もないフレームです。
違和感があるので、このようなフレームを実際に設置する時は、iframe要素のsrc属性を指定するなど、何らかの表示があった方が良いと思います。

▲目次へ戻る

５．iframe要素の属性一覧

src=”URL”
インライン・フレームに組み込むHTMLファイルのURLを指定 <iframe src=”news.html”></iframe>
name=”名前”
親ページの要素のtarget属性の指定で使用するため、任意の名前を指定 <iframe src=”news.html” name=”news”></iframe>
width=”インライン・フレームの幅”、height=”インライン・フレームの高さ”
インライン・フレームの幅、高さをピクセルで指定 （指定しない場合は、ブラウザのデフォルトのサイズとなる） <iframe src=”news.html” name=”news” width=”300″ height=”150″></iframe>
srcdoc=”HTMLソース”
インライン・フレームに組み込むHTMLのソースを直接書く <iframe srcdoc=”インライン・フレームの内容”></iframe>
sandbox sandbox=”allow-forms” sandbox=”allow-scripts” sandbox=”allow-same-origin” sandbox=”allow-top-navigation”
インライン・フレーム内のHTML文書の機能を制限する sandboxを指定されたインライン・フレーム内のHTML文書は、別ドメインの文書として扱われ、ここから外部（親も含む）へのtarget指定ができなくなり、フォーム、スクリプト、プラグインが無効となる（よって、注意が必要） 制限解除のキーワード（半角スペースで区切って複数指定可能） allow-forms（フォームの機能だけ有効にする） allow-scripts（スクリプトの実行だけ有効にする） allow-same-origin（親と同じドメインの文書として扱われる） allow-top-navigation（最上位のウィンドウだけは操作できるようにする）

この他に、id属性、class属性、title属性、style属性などのグローバル属性も使います。
（グローバル属性についてはHTML5 【 グローバル属性 】 ～ 全ての要素で使える属性もご参照下さい。）

▲目次へ戻る