とほほのHTMLリファレンス(フレーム)

HOME > とほほのWWW入門 > とほほのHTMLリファレンス > フレーム
1998年7月19日
<FRAMESET>〜</FRAMESET> フレーム N2/e3
説明
フレームとはブラウザのウィンドウを複数の領域に分割して使用する機能です。 NN2.0からサポートされており、 IEでも3.0からサポートされました。

属性
COLS="..." 縦に分割する際の大きさ(ピクセル値)や割合(%)を指定します。
ROWS="..." 横に分割する際の大きさ(ピクセル値)や割合(%)を指定します。
FRAMESPACING=n e3。フレームの境界線の太さを指定します。
FRAMEBORDER=... N3/e3。 境界線の両側の<FRAME>でNOを指定すると、境界線を平面的に表示するようになります。 デフォルトの値はYESです。
BORDER=n N3/e4。境界線の幅を指定します。
BORDERCOLOR="color" N3/e4。境界線の色を指定します。NN30以降。

使用例
画面を左右に区切るには、次のようなHTMLファイルを作成して表示してください。
<HTML>
<HEAD>
 <TITLE>フレームテスト</TITLE>
</HEAD>
<FRAMESET ROWS="20%,*">
 <FRAME SRC="xxx1.html" NAME="FRAME1">
 <FRAME SRC="xxx2.html" NAME="FRAME2">
 <NOFRAMES>
  <BODY>
  フレーム未対応ブラウザ用メッセージ
  </BODY>
 </NOFRAMES>
</FRAMESET>
</HTML>
左側に xxx1.html、右側に xxx2.html が表示されます。縦に分割するには ROWS の代わりに COLS を用います。

右側の部分をさらに分割するには、次のようにしてください。
<HTML>
<HEAD>
 <TITLE>フレームテスト</TITLE>
</HEAD>
<FRAMESET ROWS="20%,*">
 <FRAME SRC="xxx1.html" NAME="FRAME1">
 <FRAMESET COLS="30%,*">
  <FRAME SRC="xxx2.html" NAME="FRAME2">
  <FRAME SRC="xxx3.html" NAME="FRAME3">
 </FRAMESET>
 <NOFRAMES>
  <BODY>
  フレーム未対応ブラウザ用メッセージ
  </BODY>
 </NOFRAMES>
</FRAMESET>
</HTML>

補足
フレーム内のリンクをクリックすると、通常、そのフレームだけを書き換えてしまいますので注意してください。

フレームを解除するには次のようにします。
  <A HREF="xxx" TARGET=_top>XXX</A>

リンク先のページを別のフレームに表示するには、<FRAME>のNAME属性で用いた名前を指定して、次のようにします。
  <A HREF="xxx" TARGET="FRAME1">XXX</A>

一度に複数のフレームを書き換えるには、JavaScriptを用います。

フレームの境界線を消すには <FRAMESET BORDER=0 FRAMEBORDER=0 FRAMESPACING=0> としてください。 BORDER=0 だけではIE3.0など古いブラウザで境界線が表示されてしまいます。


<FRAME> 各フレームの内容 N2/e3
説明
<FRAMESET>において 個々のフレームの中身を指定します。

属性
SRC="..." N2/e3。フレームの中身として表示するファイルを URLで指定します。
NAME="..." N2/e3。フレームに名前をつけます。 この名前は<A HREF="...">タグのTARGET属性等で使用します。
SCROLLING=... N2/e3。フレームのスクロールバーの表示・非表示を指定します。 ...には yes(表示), no(非表示), auto(必要に応じて表示)のいずれかを指定します。 省略時は auto になります。
MARGINWIDTH=n N2/e3。フレームの左右の空白を指定します。
MARGINHEIGHT=n N2/e3。フレームの上下の空白を指定します。
NORESIZE N2/e3。フレームのリサイズを禁止します。
FRAMEBORDER=... N3/e?。境界線の両側の<FRAME>でNOを指定すると、境界線を平面的に表示するようになります。 デフォルトの値はYESです。
BORDERCOLOR="color" N3/e?。境界線の色を指定します。

使用例
<FRAMESET>を参照してください。

<NOFRAMES>〜</NOFRAMES> フレームに対応していないブラウザへの配慮 N2/e3
説明
フレームをサポートしていないブラウザで表示する文章を指定します。 多くの書籍などで<NOFRAME>と紹介されていますが、<NOFRAMES>が正しい名前です。

使用例
<FRAMESET>を参照してください。

<IFRAME>〜</IFRAME> 浮遊フレーム e3
説明
ウィンドウや他のフレームの枠に接しないフレームを生成します。 <IMG>で画像を表示する感覚でフレームを表示できます。 IEでのみ使用可能です。

属性
SRC="..." フレーム内に表示する文書を指定します。
HEIGHT=... フレームの高さを指定します。
WIDTH=... フレームの横幅を指定します。
ALIGN=... フレームを表示する位置を指定します。
FRAMEBORDER=... FRAMEBORDER=0とすると、 フレームの外枠の境界線を表示しません。
MARGINHEIGHT=... フレーム内の上部のスペースを指定します。
MARGINWIDTH=... フレーム内の左右のスペースを指定します。
NAME=... フレームに名前をつけます。 これは<A>タグのTARGET属性の値として使用できます。
SCROLLING=... フレーム内のスクロールをyesまたはnoで指定します。

Copyright(C) とほほ ( http://www2e.biglobe.ne.jp/~s-hasei/ )