HTML編 32/51
| 目的別 index | タグ別 index | カラーチャート | images | SAMPLE |
フレームで画面を分割する
左右に分割する
上下に分割する




左右に分割する

●<FRAMESET COLS="n">
さて、この2枚のHTMLファイル、「menu.html」と「contents.html」を合体させましょう。先ほど書いた通り、この2枚のファイルを合体させるためのHTMLファイルを作ります。これが「profile」フォルダ内の「index.html」になります。
ブラウザに表示される内容は全て「menu.html」と「contents.html」に書かれています。なので、これから作るHTMLファイルには実際にブラウザに表示される内容は書き込みません。ここには「左側に menu.htmlを、右側にcontents.htmlを表示しなさい」という命令を書くだけなのです。ブラウザに表示する物を書かないので、このフィルには<BODY>タグが必要ありません。しかし、実際に表示する画面の<HEAD>部分はこのファイルが担当するので<TITLE>や<META>タグは必要です。先ほど作った「menu.html」と「contents.html」にTITLEが基本的に必要ないと言ったのは、このファイルに書き込んでしまえば済むからです。実際「menu.html」や「contents.html」に書いたタイトル「Kimura's Room:Profile」は表示されません。ではなぜ書いたかと言うと、フレーム構造の中のページに直ブックマークするユーザーがいるからです。その場合、中のページそのものがフレームから外れてブックマークされてしまいますので、念には念を入れる意味でも各ページにTITLEを入れておいた方が無難です。
「左側に menu.htmlを、右側にcontents.htmlを表示しなさい」というタグは<FRAMESET>です。オプションにCOLSを加えると左右に分割されます。
パラメータには分割する比率を入力します。ピクセル数か%での指定が可能です。このパラメータが他のサイズ指定と違うのは、2つ以上のの数字を続けて書くことです。なぜなら左に20%、右は80%と、合体するファイルの画面の比率を全て書き込む必要があるからです。もちろん合計で100%にならなければなりません。数字と数字の間は「,」で区切ります。左35%、右65%に分割したければ以下のようになります。

<FRAMESET COLS="35%,65%">

左右に分割する場合、画面を見て左側に表示したい順に、パラメータに数字を指定します。またピクセル数で指定する場合などは左100ピクセル、右500ピクセルと指定しても、見ている人のブラウザの幅が600ピクセルでない限り、1:5の比率で表示されてしまいます。そこで左100ピクセル、右はなりゆき、という指定もできます。

<FRAMESET COLS="100,*">

数字の代わりにアスタリスク「*」を入れると、他の指定された大きさの残り全てということになります。これは%で指定した場合も同様に使えます。<FRAMESET COLS="35%,65%">とするのと<FRAMESET COLS="35%,*">とするのは同じ事です。
3つに分割したい場合は同様にパラメータに3つの指定を書き込みます。

<FRAMESET COLS="10%,30%,60%">

こんな感じです。この要領でいくつにでも分割できます。
<FRAMESET〜>の後には閉じタグ</FRAMESET>が必要です。

●<FRAME SRC="n">
フレーム分割はもちろんFRAMESETだけでは機能しません。分割した画面には、どのファイルが入るのか指定しなければいけませんから。
ファイルを指定するには「FRAME」というタグを使います。SRCオプションタグに続けてパラメータにファイルへのリンクパスを書き込みます。menu.htmlを指定する場合

<FRAME SRC="menu.html">

となります。これをFRAMESETで指定した分割する数だけ、<FRAMESET〜>と</FRAMESET>の間に続けて書き込みます。順番はFRAMESETのパラメータに指示した順に従います。
Profileページは左に170ピクセルでmenu.htmlを、残り全てのスペースにcontents.htmlを表示させたいので、「profile」フォルダ内の「index.html」を以下のようしてください。
View
<HTML>
<HEAD>
<TITLE>Kimura's Room:Profile</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
</HEAD>

<FRAMESET COLS="170,*">

<FRAME SRC="menu.html">
<FRAME SRC="contents.html">

</FRAMESET>
</HTML>

いかがでしょう。ちゃんと分割されましたでしょうか?左側を170ピクセルとピクセル数で固定指定したので、menu.htmlのBACKGROUNDで指定した「BG.gif」の左右が足りなくてもタイリング表示はされなくなります。




上下に分割する

●<FRAMESET ROWS="n">
上下に分割する場合も全く同じやり方です。オプションタグCOLSの代わりにROWSを入れればOKです。ちょっと変なのですが、上の例を上下に3:7に分割してみましょう。
リンクボタンをクリックすると表示がおかしくなりますが、この修正は後ほどやりますので、今は気にしないでください(笑)。
View
<HTML>
<HEAD>
<TITLE>Kimura's Room:Profile</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
</HEAD>

<FRAMESET ROWS="30%,70%">

<FRAME SRC="menu.html">
<FRAME SRC="contents.html">

</FRAMESET>
</HTML>

backindexnext