フレームの基本

[統計] HTMLからXHTMLへの移行を進めていますか?


<frameset><frame src="">

ブラウザ
Internet Explorer Netscape Firefox Opera

フレームの指定を行うと、画面を分割することができます。

【分割例】
分割例

フレームのページは、分割を指定するページと、そこへ読み込まれるページによって作られています。

分割を指定するページ … どのように分割するのかを指定するページ(このページにアクセスされる)
読み込まれるページ … 分割した各フレーム内に読み込まれるページ(実際に表示されるページ)

例えば左右に2分割するページの場合、分割を指定するページが1枚、左右に表示されるページがそれぞれ1枚ずつ、計3枚のページが必要になります。


左右に2分割する場合の例

分割例

index.html の記述内容

<html>
<head>
<title>TAG index Webサイト</title>
</head>

<frameset cols="100,*"> … 左右の分割を指定(左:100ピクセル、右:残り全て)

<frame src="sample1.html"> … 左のフレームに sample1.html を表示
<frame src="sample2.html"> … 右のフレームに sample2.html を表示

</frameset> … 分割の指定を終了

</html>

上記の例の場合、index.html にアクセスすると sample1.htmlsample2.html が表示されます。

※分割を指定するページでは、bodyタグは使用しません。(noframesを指定する場合を除く)


分割の指定には、2種類のタグを使用します。

<frameset></frameset>画面の分割方法を指定するタグ
<frame src="">読み込むページを指定するタグ

framesetタグに囲まれた部分で、frameタグを使用します。詳しくは上記のリンク先をご覧ください。

メモ

フレームに対応していないブラウザにも配慮する場合は、他にnoframesタグも使用します。(フレーム未対応ブラウザにも配慮したサイト作りが好ましいです)


使用例

<html>
<head>
<title>フレームサンプル</title>
</head>

<frameset cols="150,*">

<frame src="example1.html">
<frame src="example2.html">

</frameset>


</html>

これをブラウザで見ると次のように表示されます


noframesも使用した例

<html>
<head>
<title>フレームサンプル</title>
</head>

<frameset cols="150,*">

<frame src="example1.html">
<frame src="example2.html">

<noframes>
<body>
<p>ここにフレーム未対応ブラウザ向けの内容</p>
</body>
</noframes>


</frameset>


</html>



[特集] レンタルサーバー比較 & サーバー選びのチェックポイント