Frame in HTML

フレームタグを使用して画面を分割する

フレームタグを使用すれば、画面を分割して、それぞれの画面にHTMLドキュメントをロードすることができます。

例えば、全体の画面を縦方向に30%と70%に分割し、さらに、縦分割後の下の画面を横方向に50%と50%に分割し、それぞれのフレームにHTMLのファイルをロードするには、
<HTML>
<HEAD>
<TITLE> Examples of Frame</TITLE>
</HEAD>
<FRAMESET ROWS="30%,70%">
<FRAME NAME="name" SRC="title.html">
<FRAMESET COLS="50%,50%">
<FRAME NAME="item" SRC="item.html">
<FRAME NAME="explain" SRC="explain.html">
</FRAMESET>
</FRAMESET>
</HTML>

と記述したHTMLファイルを用意します。(注意：<BODY>と</BODY>は不要です。)
さらに、各フレームにロードするHTMLドキュメントとして、次のものを用意します。

title.html

<HTML>
<BODY>
<H3> 表題のためのフレーム</H3>
</BODY>
</HTML>

item.html

<HTML>
<BODY>
<H3> 項目の選択のためのフレーム</H3>
</BODY>
</HTML>

explain.html

<HTML>
<BODY>
<H3> 項目の詳しい説明のためのフレーム</H3>
</BODY>
</HTML>

このようなファイルを用意して、ブラウザで表示すると、図のように、画面が3つに分割されて表示されます。

画面を３分割した例

フレームに関するタグの説明

画面分割のタグ

画面の分割は、<FRAMESET> ・・・</FRAMESET>タグで指定します。
縦方向の分割は<FRAMESET ROWS="r1,r2・・・"> とします。ここで、"r1,r2・・・"は分割するサイズで、パーセント、または、ピクセル値で指定します。
横方向の分割は<FRAMESET COLS="c1,c2・・・"> とします。ここで、"c1,c2・・・"は分割するサイズで、パーセント、または、ピクセル値で指定します。
フレームに枠を付けるかどうかは、FRAMEBORDER="yes|no"オプションを指定します。FRAMEBORDER="yes"とすると、フレームに枠が付きます。FRAMEBORDER="no"とすると、枠なしになります。

各フレームにファイルをロードするタグ

各フレームにファイルをロードするためには、<FRAME NAME="name" SRC="filename">とします。ここで、NAME="name"は分割されたフレームにつける名前、SRC="filename"はロードするファイル名(HTMLドキュメント)です。
フレームにスクロールバーを設定するかどうかを指定するには、SCROLLING="yes|no|auto"とします。スクロールバーは、SCROLLING="yes"の場合は、かならず設定されます。SCROLLING="no"の場合は、設定されません。SCROLLING="auto"の場合は、内容がフレーム内に収まらないときに、自動的に設定されます。SCROLLINGオプションを指定しないと、SCROLLING="auto"とみなされます。
ブラウザを起動して、画面を見ているユーザがフレームサイズを変更できないようにするにはNOSIZEオプションを指定します。

フレームの例

フレームの典型的な表示方法の１つに、２分割したフレームの左側に項目の一覧を表示しておき、その項目をクリックすると、その項目に関連した詳しい説明が右側のフレームに表示されるという表示方法があります。

例えば、図のように、左側のフレームに、項目の一覧を表示し、その項目をクリックすると、右側のフレームに、内容が表示されるようにする場合を考えます。

典型的なフレームの表示例

まず、画面を分割して表示したいファイルに、

<HTML>
<HEAD>
<TITLE>Whales</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
<FRAME NAME="item" SRC="whaleitems.html">
<FRAME NAME="contents" SRC="killerwhale.html">
</FRAMESET>
</HTML>

のように記述します。このファイルをブラウザで表示すると、左側のフレーム(フレームの名前はitem)には、項目の一覧が表示され、右側のフレーム(フレームの名前はcontents)には、デフォルトでファイル"killerwhale.html"の内容が表示されます。

左側のフレームにロードされるファイル、"whaleitems.html"は、例えば、次のように記述します。
<HTML>
<HEAD>
<TITLE>Whale Items</TITLE>
</HEAD>
<BODY>
<H2>Whales</H2>
<H3>
<a href="killerwhale.html" target="contents">Killer Whale</a> <br>
<a href="humpbackwhale.html" target="contents">Humpback Whale</a> <br>
<a href="graywhale.html" target="contents">Gray Whale</a> <br>
<a href="bluewhale.html" target="contents">Blue Whale</a> <br>
<a href="spermwhale.html" target="contents">Sperm Whale</a> <br>
<a href="dolphins.html" target="contents">Dolphins</a> <br>
</H3>
</BODY>
</HTML>

左側のフレームで、各項目のリンクを設定し、そのリンク先のファイルを右側のフレームにロードするには、<A>タグのTARGETオプションにロードするフレームの名前(この場合は"contents")を

<A HREF="killerwhale.html" TARGET="contents">Killer Whale</A>

と指定します。

さらに、例えば、次のように、各項目の詳しい内容を記述し、右側に表示するためのファイル"killerwhale.html"等のHTMLドキュメントを用意します。

<HTML>
<HEAD>
<TITLE>Killer Whale</TITLE>
</HEAD>
<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#ffd700" VLINK="#c0c0c0">
<HR SIZE=5>
<H3> Killer Whale</H3>
<center>
<IMG SRC="orca.jpeg" HEIGHT=333 WIDTH=500> <BR>
<B> Killer Whale</B> <br>
Common Name : Killer Whale or Orca<br>
Species Name : Orcinus orca<br>
Description : Length averages 28 feet for males
and 23 feet for females.<br>
The average weight is 8 tons for males
and 4 tons for females.<br>
</center>
<HR SIZE=5>
</BODY>
</HTML>