iframe要素は、インライン・フレームを作るための要素です。
frameset要素やframe要素など、以前はフレームに関する要素が他にもありましたが、HTML5から使用できなくなり、iframe要素だけが残っている状況です。
今回は、他のHTMLファイルを組み込む際に使われるiframe要素についてまとめたいと思います。
目次
1.iframe要素
2.インライン・フレームの配置方法
3.target属性
4.インライン・フレーム内に表示させる
5.iframe要素の属性一覧
1.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属性など
2.インライン・フレームの配置方法
インライン・フレームを設置する時は、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>
3.target属性
target属性は、情報を表示するターゲットウィンドウを指定します。
target属性が使える要素は、a要素、area要素、base要素、form要素、link要素です。
target=”キーワード”で、ウィンドウまたはインライン・フレームを指定します。
次の5つのキーワードが選択できます。
_blank 新規のウィンドウ(または新規のタブ)に表示 _self 現在と同じウィンドウ(フレーム)に表示
デフォルト値_parent すぐ上の親ウィンドウ(フレーム)に表示 _top フレームを解除してウィンドウ全体に表示(=最上位のウィンドウに表示) ウィンドウ(フレーム)名 その名前のウィンドウ(フレーム)に表示
(name属性で名前を付けておく)
上の例では、インライン・フレーム内のHTMLファイルのリンクにはtarget属性を指定していないので、同じフレーム内にリンク先が表示されます。
4.インライン・フレーム内に表示させる
インライン・フレームをターゲットにすると、次のように表示されまます。
このリンクをクリックしてください。
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属性を指定するなど、何らかの表示があった方が良いと思います。
5.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 【 グローバル属性 】 ? 全ての要素で使える属性もご参照下さい。)
コメントを残す