iframe要素は、インライン・フレームを作るための要素です。
frameset要素やframe要素など、以前はフレームに関する要素が他にもありましたが、HTML5から使用できなくなり、iframe要素だけが残っている状況です。
今回は、他のHTMLファイルを組み込む際に使われるiframe要素についてまとめたいと思います。
目次
１．iframe要素
２．インライン・フレームの配置方法
３．target属性
４．インライン・フレーム内に表示させる
５．iframe要素の属性一覧
１．iframe要素
iframe要素は、インライン・フレームを作るための要素です。
インライン・フレームとは、HTMLファイル内に部分的に領域を作って、そこに別のHTMLファイルを入れ子にして取り込む表示方法です。
object要素でもHTMLファイルを組み込めますが、HTMLファイルを組み込む場合は、iframe要素がより適している要素です。
使用する要素 <iframe>～</iframe>
iframe要素の属性 src属性 組み込むHTMLファイルのURL name属性 targetで指定される名前を指定 width属性 インラインフレームの幅をピクセルで指定 height属性 インラインフレームの高さピクセルで指定 srcdoc属性 組み込むHTMLファイルをURLでなくソースで指定 sandbox属性 組み込むHTMLファイルの機能を制限する グローバル属性 id属性、class属性、title属性、style属性など
２．インライン・フレームの配置方法
インライン・フレームを設置する時は、iframe要素のsrc属性で、別のHTMLファイルを指定します。
サイズを指定しなければ、ブラウザのデフォルトサイズになります。
htmlコードは、以下の通りです。
<iframe src=”http://www.recipi.jp/”></iframe>
サイズを指定（width=”300px” height=”150px”）すると、このようになります。
htmlコードは、以下の通りです。
<iframe src=”http://www.recipi.jp/” width=”300px” height=”150px”></iframe>
３．target属性
target属性は、情報を表示するターゲットウィンドウを指定します。
target属性が使える要素は、a要素、area要素、base要素、form要素、link要素です。
target=”キーワード”で、ウィンドウまたはインライン・フレームを指定します。
次の５つのキーワードが選択できます。
_blank 新規のウィンドウ（または新規のタブ）に表示 _self 現在と同じウィンドウ（フレーム）に表示
デフォルト値_parent すぐ上の親ウィンドウ（フレーム）に表示 _top フレームを解除してウィンドウ全体に表示（=最上位のウィンドウに表示） ウィンドウ（フレーム）名 その名前のウィンドウ（フレーム）に表示
（name属性で名前を付けておく）
上の例では、インライン・フレーム内のHTMLファイルのリンクにはtarget属性を指定していないので、同じフレーム内にリンク先が表示されます。
４．インライン・フレーム内に表示させる
インライン・フレームをターゲットにすると、次のように表示されまます。
このリンクをクリックしてください。
htmlコードは、以下の通りです。
<a href=”http://www.recipi.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指定ができなくなり、フォーム、スクリプト、プラグインが無効となる（よって、注意が必要） 制限解除のキーワード（半角スペースで区切って複数指定可能） |
この他に、id属性、class属性、title属性、style属性などのグローバル属性も使います。
（グローバル属性についてはHTML5 【 グローバル属性 】 ～ 全ての要素で使える属性もご参照下さい。）
コメントを残す