Frame

フレーム

フレーム機能は一つのページに複数の書類を表示させる機能です。各書類はフレームセルと呼ばれ、ユーザはウィンドウと同じようにフレームセルのサイズを変更したり、スクロールすることができます。セルには NAME属性によってフレームセル(ウィンドウ名)の名前が与えられ、他の書類からそのフレームへリンクすることも可能です。

フレームは<FRAMESET>タグによって作成されます。これは通常のHTML文書の<BODY>と同じ役目をします。すなわち、二つのフレームセルを作成する場合、次のようになります (<BODY>を記述すると、フレーム機能は失われます)。

<HTML>
<HEAD>
～ ヘッダ部 ～
</HEAD>
<FRAMESET>
～ フレーム部 ～
</FRAMESET>
<FRAMESET>
～ フレーム部 ～
</FRAMESET>
</HTML>

また、一つのフレームセットの中には複数のフレームセルを作成できます。フレームセルを作成するには <FRAME>タグを使用します。

フレーム関連タグ

<FRAMESET>

<FRAMESET>タグにはフレームサイズの初期サイズを決める二つの属性 ROWSとCOLSを持ちます。先程、説明したようにフレーム書類は BODYタグを持ちません。フレームではBODYタグが、このFRAMESETに置き換わったものと考えられます。フレームはNORESIZE属性を指定しなければ、ユーザがサイズを変更することが可能です。

なお、FRAMESETタグは入れ子にすることができます。

ROWS="横列の高さ"

ROW属性はフレームの高さを指定することができます。複数のセルフレームセルがあれば、カンマで分けて指定します。その値はピクセル数または書類サイズのパーセンテージ(1～100%) で指定します。パーセンテージの場合、合計が100%になるように指定して下さい。

例えば、三つの列がある場合、以下のように記述します。

<FRAMESET ROWS="20%,60%,20%">

COLS="縦列の幅"

COSL属性はフレームの幅を指定します。シンタックスはROWS属性と同じです。

FRAMEBORDER="yes | no"

フレームの境界線を設けるか、設けないかを指定します。

デモ

BORDER="境界線の幅"

フレームの境界線幅を指定します。入れ子にしたフレームは親フレームのBORDERを継承します。

BORDERCOLOR="境界線の色"

フレームの境界線の色を指定します。

デモ

<FRAME>

このタグはフレームセルを作るタグで、六つの属性SRC、 NAME、MARGINWIDTH、MARGINHEIGHT、 SCROLLING、そしてNORESIZEを持ちます。 FRAMEタグはIMGタグのように終了タグを持ちません。

SRC="url"

SRC属性は表示する書類のURLを指定します。 FRAMEタグにSRC属性が無い場合、枠だけが表示されます。

NAME="ウィンドウ名"

NAME属性はターゲットウィンドウ機能を使用する際に用いるウィンドウ名を定義します。

MARGINWIDTH="値"

MARGINWIDTH属性はフレームの左右のマージンを制御する際に指定します。値はピクセル値で指定し、1より小さい値は指定できません。

MARGINHEIGHT="値"

MARGINHEIGHT属性は上下のマージンを指定します。

デモ

SCROLLING="yes|no|auto"

SCROLLING属性はスクロールバーを付けるかどうかを指定します。yesは常にスクロールバーを表示し、 noはスクロールバーを表示しません。また、 autoはブラウザがスクロールバーが必要かどうかを判断します。SCROLLINGを指定しなければ、autoとなります。

NORESIZE

NORESIZE属性を指定すれば、ユーザはフレームサイズの変更ができなくなります。

FRAMEBORDER="yes | no"

フレームの境界線を設けるか、設けないかを指定します。

<NOFRAMES>

このタグはフレームをサポートしていないブラウザのために使用します。NOFRAMESタグは開始タグと終了タグを持ち、この間にフレームをサポートしていないブラウザ向けのデータを挿入します。もし、フレームタグをサポートしていないブラウザを使った場合、フレーム用のタグは無視され、NOFRAMESタグにある文書が表示されます。逆にフレームタグをサポートしたブラウザには NOFRAMESタグの内容は表示されません。

<FRAMESET COLS="50%,50%">

<NOFRAMES>
<h1 align=center><blink>FRAMESET ALERT!</blink></h1>
<p>
This document is designed to be viewed using <b>Netscape 1.2</b>'s
FRAMESET features.  If you are seeing this message, you are using
a frames <i>challenged</i> browser.
</p>
<p>
A <b>FRAMESET-capable</b> browser can be gotten from
<a href=http://home.netscape.com/>Netscape Communications</a>.
</p>
</NOFRAMES>

  <FRAMESET ROWS="50%,50%">
    <FRAME SRC="cell-1.html">
    <FRAME SRC="cell-2.html">
  </FRAMESET>
  <FRAMESET ROWS="33%,33%,33%">
    <FRAME SRC="cell-3.html">
    <FRAME SRC="cell-4.html">
    <FRAME SRC="cell-5.html">
  </FRAMESET>
</FRAMESET>

フレーム例

次のようなフレームを作成してみます。

フレームの作成例

HTMLソースは次のように記述します。

<FRAMESET COLS="50%,50%">
  <FRAMESET ROWS="50%,50%">
    <FRAME SRC="cell-1.html">
    <FRAME SRC="cell-2.html">
  </FRAMESET>
  <FRAMESET ROWS="34%,33%,33%">
    <FRAME SRC="cell-3.html">
    <FRAME SRC="cell-4.html">
    <FRAME SRC="cell-5.html">
  </FRAMESET>
</FRAMESET>

デモ

フレーム機能を使った画面

ノーフレーム・キャンペーン

[Up] [Next] [Previous]