HTML編 34/51
|
目的別 index
|
タグ別 index
|
カラーチャート
|
images
|
SAMPLE
|
フレームで画面を分割する
境界線に色を付ける
境界線の太さを指定する
境界線を表示しない
境界線に色を付ける
●<FRAMESET
BORDERCOLOR="n"
>
境界線に色が付けられます。<FRAMESET>タグに続けてBORDERCOLORオプションを書き込みパラメータに色指定します。ただし、NNとIEでかなり見え方が違います。またMac版IE3では色が付きませんでした。実はこのフレームの境界線の指定は、ブラウザによって色々と勝手が違いますので、両方のブラウザで確認してから使いましょう。
境界線を赤くしてみました。
<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ピクセルにしてみました。
<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どちらも境界線が消えるようです。私の環境下で試した結果は以下の表のようになりました。
タグ
NN3
NN4
IE3
IE4
1)BORDER="0"
○
○
×
×
2)FRAMESPACING="0"
×
×
×
×
3)FRAMEBORDER="0"
×
×
×
×
1)+2)
○
○
×
○
1)+2)+3)
○
○
○
○
<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>
境界線を完全に消すことが出来ると、サンプルのようにメニューと中身の部分を独立させるという使い方にとどまらず、デザインの幅をかなり広げることが可能です。例えばこの例は
フレームで画面を縦横50%に分割しているので、見ている人のモニタのサイズに関わらず、必ず4分割されています(縦横に分割する方法は後で説明します)。