では、これを見てください。
このページでは、これを元にして、フレームで指定できる属性のお話をします。
◆
まず、分割された各画面は線で区切られています。
そして、各画面のうち、内容が表示しきれないところには、スクロールバーが出ています。
これは、内容が表示しきれない場合、縦方向、横方向に自動的にでます。
それから、区切り線をマウスでドラッグしてみてください。
画面の表示幅や高さを変えることが出来ます。
つまり、見る人がフレームのサイズを変えることが出来ます。
これが、属性を何も指定しなかったときの初期状態のフレームです。
そしてこれが、今見てもらったフレームのタグです。
|
<frameset rows="100,*,100">
<frame src="frame1.html" name="f1">
<frameset cols="150,*,100">
<frame src="frame2.html" name="f2">
<frame src="frame3.html" name="f3">
<frame src="frame4.html" name="f4">
</frameset>
<frame src="frame5.html" name="f5">
</frameset>
|
◆
それでは、最初にスクロールバーから・・
|
<frameset rows="100,*,100">
<frame src="frame1.html" name="f1">
<frameset cols="150,*,100">
<frame src="frame2.html" name="f2">
<frame src="frame3.html" name="f3">
<frame src="frame4.html" name="f4">
</frameset>
<frame src="frame5.html" name="f5">
</frameset>
|
青い字で書いたところは、一番上のフレームです。
ここにはスクロールバーが出ていたでしょう。
確認して！
（ま、他にも出ているところがありますが・・）
このスクロールバーの表示、非表示を設定できます。
<frame src="frame1.html" name="f1">
☆何も書かなければ、自動的に出たり出なかったり！
<frame src="frame1.html" name="f1" scrolling="no">
☆このように書くと、フレームから内容がはみ出してもスクロールバーは表示しない！
<frame src="frame1.html" name="f1" scrolling="yes">
☆これは、スクロールバーを、とにかく常に表示する。
これは各フレームごとに設定します。
◆
次に、区切り線についてです。
区切り線について指定するのは
<frameset>のところです。青い字のところ！
|
<frameset rows="100,*,100">
<frame src="frame1.html" name="f1">
<frameset cols="150,*,100">
<frame src="frame2.html" name="f2">
<frame src="frame3.html" name="f3">
<frame src="frame4.html" name="f4">
</frameset>
<frame src="frame5.html" name="f5">
</frameset>
|
ここに、
frameborder="no"
と書きます。
緑のところ（つまりフレームの中で設定したフレーム）に指定しても、うまく表示されず。ちょっとおかしい感じになります。
基本的には、
青い部分に設定するものだと思ってください。そうすると、全体の区切り線が消えます。
実際に表示するとこうなります。
しか〜し、見ておわかりのように、区切り線は消えたのですが、まだなんか線がありますねぇ。
実はこれは、区切り線ではなく、フレームとフレームのすき間なのです。でも、なんか線が入ったように見えますね。
このすき間も設定できます。
同じところに、このように書き足すと良いですよ。
framespacing="0"
これはすき間を０にするということです。ピクセルで指定します。つまり０ピクセルに指定したということです。
というわけで、青い部分を
<frameset rows="100,*,100" frameborder="no" framespacing="0"> と、書き換えて、ついでにスクロールバーを変更して見ましょう。
|
<frameset rows="100,*,100" frameborder="no" framespacing="0">
<frame src="frame1.html" name="f1" scrolling="no">
<frameset cols="150,*,100">
<frame src="frame2.html" name="f2">
<frame src="frame3.html" name="f3" scrolling="yes">
<frame src="frame4.html" name="f4">
</frameset>
<frame src="frame5.html" name="f5">
</frameset>
|
実際に表示すると・・ついでに
最初の見本と比べてみてください。
このように区切り線を消すことが出来ます。
それと、今度は区切り線を消すのではなく、区切り線の太さや色を指定する方法です。
<frameset> の中に、太さは
boder="太さ" 色の方は
bordercolor="色指定" を書き加えます。
”太さ”はピクセル単位の数字、色はカラーネームまたはＲＧＢコードで指定します。
例えば
<frameset rows="100,*,100" border="16" bordercolor="red">のようにした場合、
こんなふうになります。
◆
区切り線をマウスでドラッグすると、フレームのサイズを変えることが出来ますが、これを出来なくする指定もあります。
|
<frameset rows="100,*,100">
<frame src="frame1.html" name="f1" noresize>
<frameset cols="150,*,100">
<frame src="frame2.html" name="f2">
<frame src="frame3.html" name="f3">
<frame src="frame4.html" name="f4">
</frameset>
<frame src="frame5.html" name="f5">
</frameset>
|
このように指定した場合、そのフレームの上下左右の区切り線が動かなくなります。
この場合、１番上の枠に指定したので、上と左右の区切りははウィンドウの端に当たりますので、このフレームの区切りは下だけですね。
そして、そこが動かなくなっています。（”フレーム１じゃ！”と表示されているフレームの下側の区切り線）
確認してみてください。
それから、もし、このように指定するとどうなるでしょう？（ま、ご想像にお任せします。）
|
<frameset rows="100,*,100">
<frame src="frame1.html" name="f1">
<frameset cols="150,*,100">
<frame src="frame2.html" name="f2">
<frame src="frame3.html" name="f3" noresize>
<frame src="frame4.html" name="f4">
</frameset>
<frame src="frame5.html" name="f5">
</frameset>
|
◆
そのほかに、フレームに表示される内容と区切り線との余白を設定することも出来ます。
marginwidth="数字" 左右の余白
maeginheight="数字" 上下の余白
これは各フレームごとに指定します。
例えば
<frame src="frame2.html" name="f2" marginwidth="8" marginheight="6">
という感じです。そしてこの数字もピクセル単位です。
さて、今まで、ｎａｍｅ＝””という形で、各フレームにすきな名前を付けてきました。
これはフレームを使ったページでのリンクに関係があります。
次は、そのお話です。