フレームのレイアウト
フレームの枠組みを作成する
フレームからフレームへのリンク
フレームページのレイアウトを考えます。フレームの枠組みを作成する
フレーム１ フレーム２
フレーム３
たとえば上記のようなフレームの枠組みを考えた場合、必要になるHTMLファイルは４つになります。
フレームセットHTML（フレームの枠組みを定義するファイル） × １
フレーム１〜３HTML（フレームに表示されるファイル） × ３
では、上記の例を使用してフレームの枠組みから作成することにします。フレームからフレームへのリンク
<HTML> <HEAD> <TITLE>フレームテスト</TITLE> </HEAD> <FRAMESET ROWS="20%,80%"> - １ <FRAME SRC="frame1.html" NAME="frame1"> - ２ <FRAMESET COLS="50%,50%"> - ３ <FRAME SRC="frame2.html" NAME="frame2"> - ４ <FRAME SRC="frame3.html" NAME="frame3"> - ５ </FRAMESET> </FRAMESET> </HTML>フレームの枠組みは、<FRAMESET>〜</FRAMESET>で指定します。HTML構造全体で<BODY>は使用しません。
- ブラウザの画面を横割りにします。ROWS="20%,80%"は20%の領域と80%の領域に横割りにします。これはブラウザのサイズにより自動的に調節されます（途中でブラウザのサイズを変更しても、20%,80%の割合は維持される）。また、パーセントではなく、ピクセル値によってもサイズを指定することができます。上のフレームのサイズを200ピクセルとし、残りを下のフレームに割り振る場合、ROWS="200,*"と指定します。
- フレーム１の部分に表示されるHTMLへのパスを記述します。フレームに表示されるHTMLは <FRAME>を使用します。SRCアトリビュートにHTMLへの絶対パスまたは相対パスを記述します。
- ブラウザの画面を縦割りにします。COLS="50%,50%"は50%の領域と50%の領域に縦割りにします。これはブラウザのサイズにより自動的に調節されます（途中でブラウザのサイズを変更しても、50%,50%の割合は維持される）。また、パーセントではなく、ピクセル値によってもサイズを指定することができます。左のフレームのサイズを300ピクセルとし、残りを右のフレームに割り振る場合、COLS="300,*"と指定します。
- フレーム２（左側のフレーム）の部分に表示されるHTMLへのパスを記述します。
- フレーム３（右側のフレーム）の部分に表示されるHTMLへのパスを記述します。
フレームに表示されるHTMLは通常のHTMLファイルと同じですので、HTMLファイルの作成については割愛したいと思います。
ここでは、あるフレームからのリンクデータを、別フレームに表示させる方法を説明したいと思います。
上記の例で、フレーム２にメニューを並べ、クリックされたリンクデータをフレーム３に表示するようなページにします。<HTML> <HEAD> <TITLE>フレームテスト</TITLE> </HEAD> <FRAMESET ROWS="20%,80%"> <FRAME SRC="frame1.html" NAME="frame1"> <FRAMESET COLS="50%,50%"> <FRAME SRC="frame2.html" NAME="frame2"> <FRAME SRC="frame3.html" NAME="frame3"> </FRAMESET> </FRAMESET> </HTML><FRAME> で指定したNAMEアトリビュートがポイントです。これはフレームに割り当てられている名前だと思ってください。 アンカーにこの名前を指定すればいいわけです。
<A HREF="表示するHTMLへのパス" TARGET="ターゲットフレーム名">TARGETアトリビュートには、ターゲットとなるフレームを指定します。今回の場合、フレーム２からフレーム３へ表示を移したいわけなので、
フレーム２で <A 〜> を記述し、ターゲットを TARGET="frame3" と指定します。
※ その他、ターゲットとなるフレームには、「特殊フレーム」も指定できます。
- _self
- クリックされたウインドウにリンク
- _blank
- 新しいウインドウにリンク
- _parent
- 親ウィンドウにリンク
- _top
- 現在のフレームをすべて解除してリンク