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

とほほのWWW入門 > とほほのHTMLリファレンス > フレーム
1999年6月13日

<FRAMESET>〜</FRAMESET> - フレーム - H4/e3/N2

■ 説明

フレームはブラウザのウィンドウを複数の領域に分割して使用する機能です。NN2.0以降、IE3.0以降でサポートされました。

■ 属性

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

■ 使用例

画面を左右に区切るには、次のようなHTMLファイルを作成して表示してください。

【HTMLソース】
<HTML>
<HEAD>
 <TITLE>フレームテスト</TITLE>
</HEAD>
<FRAMESET COLS="20%,*">
 <FRAME SRC="xxx1.html" NAME="FRAME1">
 <FRAME SRC="xxx2.html" NAME="FRAME2">
 <NOFRAMES>
 フレーム未対応ブラウザ用メッセージ
 </NOFRAMES>
</FRAMESET>
</HTML>

この(↑)を表示するとブラウザ画面がこの(↓)ように分割されます。

【ブラウザでの表示】
xxx1.html
の内容


xxx2.html
の内容


右側の部分をさらに分割するには、次のようにしてください。

【HTMLソース】
<HTML>
<HEAD>
 <TITLE>フレームテスト</TITLE>
</HEAD>
<FRAMESET COLS="20%,*">
 <FRAME SRC="xxx1.html" NAME="FRAME1">
 <FRAMESET ROWS="30%,*">
  <FRAME SRC="xxx2.html" NAME="FRAME2">
  <FRAME SRC="xxx3.html" NAME="FRAME3">
 </FRAMESET>
 <NOFRAMES>
 フレーム未対応ブラウザ用メッセージ
 </NOFRAMES>
</FRAMESET>
</HTML>

これ(↑)を表示するとブラウザ画面がこの(↓)ように分割されます。

【ブラウザでの表示】
xxx1.html
の内容
xxx2.html
の内容
xxx3.html
の内容


■ 補足

フレーム内のリンクをクリックすると、通常、そのフレームだけを書き換えてしまいます。フレームを解除して全ウィンドウで表示するには次のようにします。

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

フレームの境界線を消すには次のようにします。

    <FRAMESET BORDER=0 FRAMEBORDER=0 FRAMESPACING=0>
一度に複数のフレームを書き換えるには、JavaScriptを用います。(→ 複数のフレームの内容を書き換える)

<FRAME> - 各フレームの内容 - H4/e3/N2

■ 説明

<FRAMESET>において 個々のフレームの中身を指定します。

■ 属性

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

■ 使用例

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

<NOFRAMES>〜</NOFRAMES> - フレームに対応していないブラウザへの配慮 - H4/e3/N2

■ 説明

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

■ 使用例

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

<IFRAME>〜</IFRAME> - インラインフレーム - H4/e3

■ 説明

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

■ 属性

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


Copyright (C) 1996-1999 とほほ
http://wakusei.cplaza.ne.jp/twn/wwwreffr.htm