フレームの境界線を指定してみましょう。
まずは おさらいとして 前回のフレームページを見てください。
>> 3つのウィンドウでできたフレームページ
このページには フレームの枠がくっきりと出ているのがわかりますね。
今回は このフレームの枠をとってしまうやり方です。
完成ページは こんな感じです。
>> フレーム枠を0にしたフレームページ
では さっそくやってみましょう。
フレーム枠をなしにするには <frameset> のタグに frameborder の属性を指定します。
指定できる値は 表示したいときは 1(yes) 表示したくないときは 0(no) を
それぞれ
指定します。
このタグは frameset にも frame にも設定することができます。
今回は frameset に指定してみました。
frameset に指定した場合と frame に指定した場合とでは
環境によって 見え方に若干の違いがあるようです。
<frameset rows="100,*" frameborder="0">
<frame src="ue.html">
<frameset cols="200,*" frameborder="0">
<frame src="hidari.html">
<frame src="migi.html">
</frameset>
</frameset> |
完成したページは これです。
>> フレーム枠を0にしたフレームページ
● フレーム境界線を完全に消したい
frameborder="0" を指定して 境界線をなしにしたとしても
若干の隙間が空いてしまいます。 これを完全に消したい なんて思う人も
きっといらっしゃると思います。
そんな時は frameset のところに framespacing="0" と
付け加えると 境界線が完全になくなります。
この framespacing は 1つ以上の framesetに対応していて
特に指定しなければ 内側の入れ子になっている frameset にも適応されます。
<frameset rows="100,*" cols="*" frameborder="0" framespacing="0">
<frame src="ue.html">
<frameset rows="*" cols="200,*" frameborder="0">
<frame src="hidari.html">
<frame src="migi.html">
</frameset>
</frameset> |
こんな感じです。
>> フレーム枠を 完全に消したフレームページ
ちなみに 2つ目の frameset の framespacing を 10 にしてみると
<frameset rows="100,*" cols="*" frameborder="0" framespacing="0">
<frame src="ue.html">
<frameset rows="*" cols="200,*" frameborder="0"framespacing="10">
<frame src="hidari.html">
<frame src="migi.html">
</frameset>
</frameset> |
縦に分割した部分だけ 隙間があいているのがわかります。
>> 2つめの frameset に framespacing="10" にしました。
● 境界線を動かしてみよう
フレームページの境界線は 動かしてその大きさを変えることができます。
ページを再度読み込むと 元の状態に戻ります。
ちょっと 下のページで 境界線を動かしてみましょう。
>> 境界線を動かしてみよう
ところが 先ほどの 境界線を完全に消してしまったページでは
境界線を動かすことはできません。
こちらも 確認してみましょう。
>> 境界線を完全に消したページ
境界線を完全に消すと 線がないので見栄えはよくなりますが、
境界線自体はは動かせなくなる ということも 覚えておいてくださいね♪ |