ＨＴＭＬタグ講座

[Home] [-5] [<] [>] [+5]

フレームの基本

ウィンドウを分割して複数のフレームとして表示させる方法です。

【フレームのしくみ】

ウインドウを分割していくつかのフレームに表示させるページの場合、通常は分割方法を指定するページと、それぞれのフレームの内容のページとが必要です。例えばこのページのように、左右に２分割しているページの場合は３つのページが必要です。
フレームで分割されたページのＵＲＬは、分割方法を指定しているページのＵＲＬになります。
Netscape Navigator 2.0 以降と、Internet Explorer 3.0 以降で表示ができるようになったため、古いブラウザなどでは表示できない場合があります。また、パソコン以外の携帯情報端末の中にはフレームに完全対応していないものもあります。この場合に備えて <NOFRAME>～</NOFRAME> を使うと、フレーム表示ができなくても別のページとして表示ができます。

開始タグ	終了タグ	内容
<FRAMESET>	</FRAMESET>	ウィンドウをどのように分割するかを指定します。このタグは<BODY>～</BODY>の代わりに用いられます
属性	属性値	内容
COLS	=（数値）	左右に分割する場合の分割の幅を左から順に指定します。ピクセル・％・割合（1、2など）を半角カンマで区切って書きます。
ROWS	=（数値）	上下に分割する場合の分割の高さを上から順に指定します。ピクセル・％・割合（1、2など）を半角カンマで区切って書きます。
開始タグ	終了タグ	内容
<FRAME>	（なし）	フレームの内容と表示方法を指定します。
属性	属性値	内容
SRC	=（ファイル名）	そのフレームで最初に表示されるファイルを指定します。ファイル名の指定方法はリンク先の指定と同じです。
NAME	=（フレーム名）	<A HREF="..." TARGET="～">などのタグ内で使用される「TARGET」属性で指定されるフレーム名を定義します。詳しくは特殊なリンクの項目をご覧下さい。
開始タグ	終了タグ	内容
<NOFRAMES>	</NOFRAMES>	フレームが表示されない場合に、この中の内容を表示します。 <FRAMESET>～</FRAMESET> の間で使用します。

「COLS=」と「ROWS=」で使う数値は、ピクセル単位でも指定できますが、ウインドウの幅が指定した数値より大きかったり小さかったりすると正しく表示されない場合があります。そこで、特定のフレームは大きさを変えないようにするには、大きさを変えても良いフレームの幅や高さを「*」で指定します。「*」だけの場合、残り全部を意味します。（サンプル参照）
フレームを縦横複数に分割する場合は、フレームの中でさらにフレームを分割します。（サンプル参照）
また、「田」の字型に分割する場合は「<FRAMESET COLS=2 ROWS=2>」などとします。
フレームの名前を<FRAME NAME="～"> で名付けるときは名前が重ならないようにしましょう。
リンクは通常同じフレーム内で更新します。
別のフレームにリンクをしたい場合は、<A>タグの中で「TARGET="（更新したいフレーム名）"」を使います。
または、常にリンクを別のフレームにしたい場合はリンク先の指定の<BASE TARGET="～">をお使い下さい。
リンクをしたときにフレームを全て解除する場合は「TARGET="_top"」とします。フレームのページのフレーム中でさらにフレームが重なるなどの場合、１段階だけフレームを解除するには「TARGET="_parent"」とします。特殊なリンクの項目をご覧下さい。
<NOFRAMES>～</NOFRAMES>の中には<BODY>～</BODY>などを書きます。
フレームに対応していないブラウザではこの中の内容が表示されますので、本文へのリンクをはっておくと良いでしょう。本文とは別フレームにあるメニューが表示されない場合でもリンクで行き来ができるように、本文中にもリンクをすると良いです。
サンプルは以下のようになります。（リンク先のページはありません）
このサンプルではまず上下に分割しています。赤色の部分です。
上段の高さは40ピクセルで、その残りをさらに左右に分割しています。
上段は黄色の部分です。左右の分割は緑色の部分です。
左側の幅を150ピクセルにして、その残りを右に表示させています。下段左右のフレームが青色の部分です。
もしフレームが表示されないときに代わりに表示される部分が茶色の部分です。

<HTML><HEAD><TITLE>99北海道</TITLE></HEAD>
<FRAMESET ROWS="40,*">
<FRAME SRC="title.html" NAME="title">
<FRAMESET COLS="150,*">
<FRAME SRC="menu.html" NAME="menu">
<FRAME SRC="top.html" NAME="main">
</FRAMESET>
<NOFRAMES>
<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#CC66CC">
<DIV ALIGN="center">
このページはフレームを使用しています。<BR><BR>
フレームが使えない方は、下記へどうぞ。<BR><BR>
<A HREF="top.html">top.html</a></DIV>
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>

↑このサンプルを表示