HTML編 43/51
| 目的別 index | タグ別 index | カラーチャート | images | SAMPLE |
フレームで画面を分割する
フレームをネストする




フレームをネストする

さぁ、どんどん行きましょう。次は「travel」のページです。
飛ばしすぎてますか? いえ、ここまで読んでいただいた方なら、このペースでも大丈夫なはずです(笑)。

今までのフレームは左右に2分割されているだけでした。これを上下に分割する方法もやりました。しかし、「travel」のページは左右に2分割され、さらに右側のフレームが上下に分割されています。このような分割はフレーム構造をネスト(入れ子)にすることで出来ます。ネストはテーブルでも少しやりましたね。「テーブルのセルの中にまたテーブルを入れる」という物でした。フレームも要領は一緒ですが、例えばこの「travel」のようなページを作るのには2つのネストの仕方があります。

一つは今まで通りindex.htmlを左右2分割し、「contents.html」にFRAMESETタグを書き、右側だけをさらに分割するやり方です。
右の図で言うと、index.htmlにmenu.htmlとA.htmlを読み込むFRAMESETを書き、A.htmlにはa1.htmlとa2.htmlを読み込むFRAMESETを書くわけです。menu.htmlにボタンを作って、右側フレームにそれぞれFRAMESETを書き込んだB.html、C.htmlを読み込むようにすれば、リンク項目毎に違った分割画面を作ることができます。Viewこのネストの方法は単純明快なのでもう作れますよね?ただし、このやり方はどうしてもファイル数が多くなってしまうのが難点です。

もう一つのやり方はindex.html内でFRAMESETタグをネストするやり方です。SAMPLEのように右側フレームの分割する比率が一定の場合は、こちらのやり方の方が合理的です。ここでは、この方法を説明します。

「Macintosh」のカテゴリでやったように、まずは「profile」のindex.htmlを複製してタイトルを変え、「travel」ディレクトリのダミーindex.htmlと差し替えてください。
このファイルには<FRAMESET〜>と</FRAMESET>の間に、menu.htmlとcontents.htmlを読み込む2つの<FRAME SRC〜>のタグが書いてあります。FRAMESET COLSで指定された170ピクセルの表示にmenu.htmlが、「*」で指定された表示がcontents.htmlですね。この「*」に該当する部分をcontents.htmlではなく、もう一つの<FRAMESET〜>にしてしまうわけです。具体的に書くと以下のようになります。
では「travel」のindex.htmlを作ってみましょう。右上の画面は「mokuji.html」とし、フレームの名前は「ue」としました。右下の画面は「canada.html」というファイル名でフレーム名を「sita」とします。マージンなどの設定は下を参考にして下さい。
<HTML>
<HEAD>
<TITLE>Kimura's Room:Travel</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
</HEAD>

<FRAMESET COLS="170,*" BORDER="0" FRAMESPACING="0" FRAMEBORDER="0">

<FRAME SRC="menu.html" NAME="hidari" MARGINWIDTH="25" MARGINHEIGHT="25" NORESIZE>

<FRAMESET ROWS="30%,*" FRAMEBORDER="0" BORDER="0" FRAMESPACING="0">

<FRAME SRC="mokuji.html" NAME="ue" MARGINWIDTH="25" MARGINHEIGHT="25">

<FRAME SRC="canada.html" NAME="sita" MARGINWIDTH="25" MARGINHEIGHT="25" NORESIZE>

</FRAMESET>

<NOFRAMES><BODY>このページはFRAME機能を使用しています。<P>
申し訳ありませんが,FRAME機能をサポートしているブラウザでご覧ください。
</BODY></NOFRAMES>

</FRAMESET>
</HTML>

backindexnext