フレーム境界線の表示・非表示(ちょこっとHTML)

公式サイトも利用中!携帯メール配信システム

ホームページは難しくない  ちょこっとHTML  Lesson8

<flame frameborder="○"> 〜 </flame>

フレームの境界線を指定してみましょう。
まずは おさらいとして 前回のフレームページを見てください。

 

>> 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" にしました。

 

 

 

● 境界線を動かしてみよう

 

フレームページの境界線は 動かしてその大きさを変えることができます。
ページを再度読み込むと 元の状態に戻ります。
ちょっと 下のページで 境界線を動かしてみましょう。

 

>> 境界線を動かしてみよう

 

ところが 先ほどの 境界線を完全に消してしまったページでは
境界線を動かすことはできません。
こちらも 確認してみましょう。

 

>> 境界線を完全に消したページ

 

境界線を完全に消すと 線がないので見栄えはよくなりますが、
境界線自体はは動かせなくなる ということも 覚えておいてくださいね♪

ホームページは難しくない  ちょこっとHTML  Lesson8

当ホームページは リンクフリーです! 
Copyright (C) 2006. mamoho. All Rights Reserved.
掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます。