HTML編 34/51
| 目的別 index | タグ別 index | カラーチャート | images | SAMPLE |
フレームで画面を分割する
境界線に色を付ける
境界線の太さを指定する
境界線を表示しない




境界線に色を付ける

●<FRAMESET BORDERCOLOR="n">
境界線に色が付けられます。<FRAMESET>タグに続けてBORDERCOLORオプションを書き込みパラメータに色指定します。ただし、NNとIEでかなり見え方が違います。またMac版IE3では色が付きませんでした。実はこのフレームの境界線の指定は、ブラウザによって色々と勝手が違いますので、両方のブラウザで確認してから使いましょう。
境界線を赤くしてみました。
View
<HTML>
<HEAD>
<TITLE>Kimura's Room:Profile</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
</HEAD>

<FRAMESET COLS="170,*"
BORDERCOLOR="#ff0000">

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

</FRAMESET>
</HTML>




境界線の太さを指定する

●<FRAMESET BORDER="n" FRAMESPACING="n">
境界線の幅をピクセル数で指定できます。ただし、この指定はNNとIEでは異なるタグを使う必要があります。どちらもFRAMESETタグにオプションで指定するのですが、NNはBORDERを、IEにはFRAMESPACINGを指定します。パラメータにはピクセル数を入れます。では、NN・IEどちらにも機能するタグは書けないのか?と言うと、そうでもありません。話は単純、両方書いてしまえばいいのです。私が現在使用しているブラウザ(Mac版)で確認してみたところ、NN・IE共にver3ではそれぞれのタグで指定しないと機能しませんでした。ver4.xだと「BORDER」での指定はどちらも表示されていましたが、「FRAMESPACING」の指定はNNでは無視されていました。とりあえず、両方入れておけば問題ないと思います。
境界線を30ピクセルにしてみました。
View
<HTML>
<HEAD>
<TITLE>Kimura's Room:Profile</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
</HEAD>

<FRAMESET COLS="170,*"
BORDER="30" FRAMESPACING="30">

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

</FRAMESET>
</HTML>




境界線を表示しない

●<FRAMESET BORDER="0" FRAMESPACING="0" FRAMEBORDER="0">
境界線を消すにはどうすればいいでしょうか。これは少し考えれば解ることですが、上でやった「フレームの太さを指定する」の要領でパラメータに「0」を入れてしまえばいいわけです。ところが「BORDER="0"」とした時はNNの環境でのみ境界線は消えますが「FRAMESPACING="0"」としてもIEの境界線は消えてくれません。境界線を消すタグは「FRAMESPACING」ではなく「FRAMEBORDER」というタグを使うのだそうですが、私の使っているHTML辞書や参考書には、どれも「IEでは境界線をは消せない」とあります。実際FRAMEBORDER="0"を指定してもIEでは境界線は消えませんでした。
実は、ここから先は経験則からくる物なので、本当に正しいのか自信がないのですが、このBORDER、FRAMESPACING、FRAMEBORDER、3つのタグを全て「0」で指定するとNN・IEどちらも境界線が消えるようです。私の環境下で試した結果は以下の表のようになりました。
タグNN3NN4IE3IE4
1)BORDER="0"××
2)FRAMESPACING="0"××××
3)FRAMEBORDER="0"××××
1)+2)×
1)+2)+3)

View
<HTML>
<HEAD>
<TITLE>Kimura's Room:Profile</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" NORESIZE>
<FRAME SRC="contents.html">

</FRAMESET>
</HTML>

境界線を完全に消すことが出来ると、サンプルのようにメニューと中身の部分を独立させるという使い方にとどまらず、デザインの幅をかなり広げることが可能です。例えばこの例はViewフレームで画面を縦横50%に分割しているので、見ている人のモニタのサイズに関わらず、必ず4分割されています(縦横に分割する方法は後で説明します)。

backindexnext