Ume Jam HTML help - How to: FRAMEs

Last Updated: Sunday, 11-Jul-1999 03:37:33 MDT

Make FRAMEs Layout

フレームはNetscapeが Navigator 2.0 で取り入れたHTMLへの拡張機能です。
フレームはNetscape NavigatorとInternet Explorer (他にサポートしているブラウザーを知っていたら教えて下さい。osami@abacuss.com）がサポートしていますが、細部で若干違いがあります。また、Internet Explorerでは "IFRAME"という拡張エレメントを使った「フローティング・フレーム」と呼ばれる全くタイプの違うフレーム機能を作っています。
ここで紹介する「フレームの作り方」では、フローティング・フレームは入っていません。また、 Navigator only、Explorer only, というオプションのエレメントやアトリビュートも入っていません。ここで紹介しているのは、基本的にどちらのブラウザーでもサポートしている「フレーム・レイアウト」の作り方です。

フレームとは

フレーム作成では通常のHTMLファイルと違い、ブラウザー・ウインドーをフレームにレイアウトするドキュメントとフレームに表示される内容の書かれたドキュメントを別々に作ります。フレーム作成では、

フレーム・レイアウト用のファイル：FRAMEドキュメント
それぞれのフレームにロードされる内容の書かれたファイル

の二種類のファイルを作成します。
FRAMEドキュメントにはフレーム・レイアウトの情報と共に、各フレームに表示される内容の書かれたドキュメントのURLが記入されます。（HTML ドキュメントにイメージを取り込む際に、IMG タグにイメージファイルのURLを指定するのと同じ作業です。）
フレーム機能ではそれぞれのフレームがマルチウインドーのように動作します。

フレーム機能は、各フレームに独自のURLを指示する事ができるので、それぞれのフレームは独立してドキュメントをロードする事が出来きます。
フレームにはそれぞれに名前を付けることができ、そうすることで、どのドキュメントをどのフレームにロードするのかという指示も簡単に出来るようになっています。
各フレームのサイズはFRAMEドキュメントで指定しますが、ユーザーがカーソールを使って変える事も出来ます。

FRAMEドキュメントには、FRAMESETエレメントとFRAMEエレメントという、全く新しい二つのエレメントが使用されます。
まずサンプル・フレームを見てください。

Making FRAME Layout

FRAMEドキュメント

FRAMESETエレメント

FRAMEエレメント

NOFRAMESエレメント

ターゲット・ウインドー

マジック・ターゲット・ネイム

FRAMEドキュメント

FRAMEドキュメントの基本構造はHTMLドキュメントと同じですが、HTMLドキュメントの「ボディー」を表わす <BODY> </BODY>タグの代わりに、<FRAMESET> </FRAMESET> というタグを使います。
従って、 FRAMEドキュメントには、BODYエレメントもまたそれに入るどんなエレメントも使いません。

下に書いたソース・コードはサンプル・フレームのFRAMEドキュメントです。

    <HTML>
       <HEAD> 
           <TITLE>Sample Frame</TITLE>
       </HEAD>

          <FRAMESET ROWS="40,*,65">
             <FRAME SRC="top.html">
             <FRAMESET COLS="*,100">
                <FRAME SCROLLING=AUTO SRC="result.html" NAME="result">
                <FRAME SRC="index.html">
             </FRAMESET>
             <FRAME SRC="bottom.html" NORESIZE>
          </FRAMESET>

          <NOFRAMES>
          Sorry, this document was designed  to be viewed  by
                      FRAMEs-capable browsers. 
          </NOFRAMES>

     </HTML>

サンプル・フレームではウインドーを４フレームに分けていますから、そのレイアウトを書いた： FRAMEドキュメント "frame.html" と、それぞれのフレームにロードされるドキュメント： "top.html", "result.html", "index.html", "bottom.html" という４つのファイルと、 "Lesson１～７" のサンプル・ファイルが使われています。

FRAMESET エレメント

Tags：	<FRAMESET> </FRAMESET>
Attributes：	ROWS=n,%,* (height value list), COLS=n,%,* (width value list), FRAMEBORDER=0\|1.
Children：	FRAMESET, FRAME, NOFRAMES
Parents：	HTML

フレーム・レイアウトのデザインとそれぞれのフレームのサイズを決めるのはこのFRAMESET エレメントです。

FRAMESETは、

オープン・タグ <FRAMESET>とクローズ・タグ</FRAMESET>が必要です。
他のタグをネスト(含む)することができます。ネストできるタグは、FRAMESET、 FRAME、 NOFRAMES の三つです。
アトリビュート(attribute) には
1. FRAMEBORDER
  　FRAMEBORDER="1 "：フレームボーダー有り
  　FRAMEBORDER="0 "：フレームボーダー無し
2. ROWS
3. COLS
FRAMEBORDER アトリビュートはフレーム枠を付けるか付けないかの選択です。ヴァリューには "1" で枠が表示され、"0" で枠なしのフレーム表示になります。
ROWSとCOLSは、二つともフレームを作る際の画面分割に使います。ROWSは横列、COLSは縦列に画面を分割します。ROWS, COLS, にはそれぞれヴァリュー・リスト (value list) を記入します。リストには複数のヴァリューが記入でき、記入するヴァリューの数がフレームの数です。

ヴァリュー・リスト (value list)

ヴァリュー・リストに入れる数値 (value) は必ずコンマ（,）で区切られます。
このヴァリュー・リストに入れる数値の個数がフレームの数を指示することになります。（三つのフレームを作る場合は、三つの数値をリストします。）
ヴァリュー・リストは、「ピクセル(n)」、「パーセンテイジ（%）」、「レラティブ・サイズ (*) (relative size)」の三通りの方法で表記することができます。

それぞれにサンプルを引用しながら、ヴァリュー・リストの書き方を説明しますが、この三通りのヴァリュー・リスト表記はコンビネーションで使うことも出来ます。コンビネーションになっている場合の数値には優先順があります、

ピクセル数値�パーセンテイジ数値�レラティブ・サイズ数値

の順に優先されます。
実際にフレームを作るときには、これらの数値のコンビネーションで表記することの方が多いだろうと思います。

1. <FRAMESET ROWS="height value list">

ROWSは横列に画面分割をしてフレームを作ります。

　ROWS="height value ist"

横列(ROWS)のフレームの高さ(height)の数値(value)のリスト(list)をここに記入します。

value（ピクセル）Sample 1. <FRAMESET ROWS="50,200,100">
ピクセル・ヴァリュー・リストは単純に数字だけで表記します。
他の２つの表記方法と違い、このピクセルによる表記だけが固定数値を意味します。固定ピクセル数値(fixed pixel value)はユーザーのウインドウ・サイズに関係なく、指示されたサイズのフレームを表示します。この例の場合は上から順に最初のフレームが50ピクセル、２段目が200ピクセル、最後が100ピクセル幅の３段のフレームを作ります。
コンビネーションになっている場合は、この固定ピクセル数値が最優先されます。

value%（パーセンテージ）Sample 2. <FRAMESET ROWS="20%,60%,20%">
パーセンテイジ・ヴァリュー・リストは数値の後に（%）を付けて表記します。
この数値はピクセル・ヴァリュー・リストと違って固定数値ではなく、ユーザーのウインドー・サイズに対してレラティブ・スケールで指示をします。この例では、一段目のフレームにウインドー・サイズの20%、二段目に60%、三段目に20%というふうに割り当てが指示されます。もしこのパーセンテイジのトータルが100%よりも大きい場合にはスケールダウン、あるいは、100%よりも小さい場合にはスケールアップをして100％に合わせます。
トータルが100%に満たないケースで、ヴァリュー・リストがレラティブ・サイズ・数値(value*)とのコンビネーションになっている場合は、パーセンテイジ数値の指示の後に残った空スペースを全てこのレラティブ・サイズ・数値が指示するフレームに割り当てます。
コンビネーションになっている場合は、固定ピクセル数値の次に優先的に指示されます。

value*（レラティブ・サイズ）Sample 3. <FRAMESET ROWS="*,200,2*">
レラティブ・サイズ・ヴァリュー・リストは"*"(asterisk)で表記します。
キャラクター"*" が意味するのは：
�@フレームがレラティブ・サイズ・フレームだということ、
�Aウインドーに残された空スペースは全てこのフレームに割り当てる。
ということの二つです。
ヴァリュー・リストを、"*,*,*,*" のように複数のシングル・レラティブ・サイズ数値だけで表記した場合は、フレームは均等分されます。（この場合はフレームは四等分されて表示されます。）
他の２つと違ってこのこのヴァリュー・リストの数値はオプションになります。
この例に使ったヴァリュー・リスト"*,200,2*"は、固定ピクセル数値とレラティブ・サイズ数値のコンビネーションになっていますが、まず二段目のフレームに固定ピクセル数値200（ピクセル）を指示しサイズで割り当てられ、その後で、残りの空スペースの1/3が "*"と指示された最初のフレームに、2/3が"2*"と指示された最後のフレームに割り当てられます。

　注意 1：

パーセンテイジ数値によるフレーム・スペースの割り当てでは、ウインドー画面全体に対して比率計算がされますが、このレラティブ・サイズ数値ではピクセル数値や%数値が占めるウインドー・スペースを除いた後に残された空スペースに対して比率計算がされます。

　注意 2：

レラティブ・サイズ数値の比率計算は、"2*" は "**"、"3*"は "***" だと考えて、ヴァリュー・リストに入っているキャラクター"*"の総数とそれぞれの数値との割合から計算されます。

2. <FRAMESET COLS="width value list">

COLSは縦列に画面分割をしてフレームをつくります。

　COLS="width value list"

COLSはCOLUMNsの略で、ROWSが横列なのに対して、COLSは縦列を意味します。ヴァリュー・リストの中で、heightがwidthに代わっているのもそうした理由ですが、それ以外はこの数値リストの表記の仕方はROWS="height value list"と全く同じです。

Sample 4. <FRAMESET COLS="30%,70%">
これは画面を30%と70%の二つに分割してコラム・フレームを作ります。

Sample 5. <FRAMESET COLS="100,20%,*,50">
これは四つのコラム・フレームを作ります。最初に、一列目と四列目のフレームにそれぞれ100ピクセルと50ピクセル幅のフレームを、次に、二列目に画面全体の20%のフレームを、そして最後に残りの空スペースを全て３列目のフレームには割り当てます。

ROWSとCOLSは横と縦の違いだけでヴァリュー・リストの表記のしかたは全く同じです。実際にフレームを使ってペイジを作る場合は、ヴァリュー・リストの数値のコンビネーションと同時に、このROWSフレームとCOLSフレームのコンビネーションになると思いますが、その場合は、どちらかがどちらかをネストする事になりますから、気をつけて下さい。例えば、先にROWSを使った場合はROWSフレームの中にCOLSフレームをネストすることになります。気をつけないと思った通りのフレーム・レイアウトが出来ません。

FRAMEBORDER=0 or 1
フレームの枠をコントロールするこのFRAMEBORDERに入るヴァリューに "0" あるいは "1" ではなく、"YES" あるいは"NO" を入れると説明しているガイドもありますが、Navigatorはどちらでも良いようですが、Explorerでは問題があるようです。もっともversionによるのかもしれません。確かめてから使った方がよいでしょう。
フレーム・ボーダーが無くなると、ユーザーは自由にフレームサイズを変えることは出来なくなります。
sample 6: <FRAMESET FRAMEBORDER=0>

おまけ: BORDER="n (ピクセル)"Netscape only
フレーム枠を消したフレーム・レイアウトを作成したい人は、FRAMEBORDER=0 が作るものではきっと満足出来ないだろうと思います。実際、フレーム枠無しの場合には、BORDERアトリビュートをを使った方がずっと良いものができます。
BORDERはFRAMESETタグで使われ、フレーム枠の太さをコントロールするアトリビュートです。フレーム枠の太さはディフォルトでは5ピクセル (BORDER=5)です。BORDER=nにはピクセルを表わすナンバーを記入しますが、ここに "BORDER=0" と指示すればフレーム枠は完全に消えてくれます。 BORDER アトリビュートはNavigator だけのオプションです。
sample 7: <FRAMESET BORDER=0>

FRAMEエレメント

Tags：	<FRAME>
Attributes：	SRC=`url`, NAME=`window_name`, MARGINWIDTH=`value`, MARGINHEIGHT=`value`, SCROLLING=`YES\|NO\|AUTO`, NORESIZE, FRAMEBORDER=`0\|1`.
Children：	empty
Parents：	FRAMESET

FRAMESETタグがネスト出来る三つのタグのうちの一つがこのFRAMEタグです。他の二つと違ってこのタグはemptyタグですから、オープン・タグだけを使い、クローズ・タグはありません。
FRAMEタグにはフレームに表示される内容の書かれたドキュメントを取り込むために使う SRC アトリビュートやドキュメントをどのフレームにロードするかを指定するために使うNAMEアトリビュートなどの他、フレーム・レイアウトの細かいコントロールを指示する SCROLLING、NORESIZE、MARGINWIDTH、MARGINHEIGHT、FRAMEBORDER, アトリビュートがあります。

<FRAME SRC="url" NAME="window_name" SCROLLING=YES|NO|AUTO NORESIZE MARGINWIDTH="value" MARGINHEIGHT="value">

SRC="url": Example: <FRAME SRC="top.html">
フレームに表示されるドキュメントのURLを記入します。URLを入れないとブランク・フレームになります。
NAME="window_name": Example: <FRAME NAME="bottom">
フレームに名前を指定します。そうすることで、他のフレームからのリンクのターゲットにすることが出来ます。 NAMEアトリビュートで名付けられたフレームにリンクするには、（後で出てきますが）ターゲットウインドー機能を使います。
NAME アトリビュートもオプションです。ディフォルトでは全てのフレームはunnamedになっています。
MARGINWIDTH="value": フレームの左右に残る余白スペースをコントロールしたいときに使います。"value"に入れる数値はピクセルで表示されます。表記される数値は１よりも大きくなければいけません。
MARGINWIDTH アトリビュートはオプションです。ディフォルトでは、ブラウザーは一番適当と思われる余白スペースを左右に残します。
MARGINHEIGHT="value": MARGINWIDTHが左右の余白スペースのコントロールなのに対して、MARGINHEIGHTは上下の余白スペースのコントロールです。
SCROLLING=YES|NO|AUTO: Example <FRAME SCROLLING=YES>
各フレームのスクロール・バーは、ドキュメントの長さによって必要であったり不要であったりするわけですが、このアトリビュートを使ってコントロールすることができます。
SCROLLING=YES にしておくと、スクロール・バーは常に表示されます。
SCROLLING=NO にしておくと、スクロール・バーは表示されません。
SCROLLING=AUTOにしておくと、必要に応じてスクロールバーを表示します。
このSROLLING アトリビュートもオプションです。ディフォルトではAUTOになっています。
NORESIZE: Example <FRAME NORESIZE>
ユーザーがブラウザーにダウンロードしたフレーム画面は、カーソールでそれぞれのフレーム・サイズを調整することができます。しかし、このNORESIZE アトリビュートを使うとそのフレームは固定され、ユーザーが自在にサイズを変えることが出来なくなります。
注意：幾つかあるフレームの内の一つをNORESIZEをつかってサイズを固定すると、隣接するフレームにもその影響が出ること考慮して使う必要があります。
NORESIZE アトリビュートもオプションです。ディフォルトでは全てのフレームはユーザーによるサイズ調整が出来るようになっています。
FRAMEBORDER="0" or "1": これは、FRAMESETエレメントのFRAMEBORDERアトリビュートと同じです。
FRAMEタグに記入されるこのアトリビュートのヴァリューはFRAMESETタグに記入されたヴァリューをオーバーライド (override) します。

NOFRAMESエレメント

Tags：	<NOFRAMES>, </NOFRAMES>
Attributes：	ナシ
Children：	NOFRAMESエレメント内にはBODYエレメントをはじめ、 HTML ドキュメントの「ボディー・コンテンツ」を記入することが出来ます。
Parents：	FRAMESET

NOFRAMESタグにはオープン・タグとクローズ・タグがあります。このエレメントの中に記述されるドキュメントは、フレームをサポートしないブラウザーを使っている場合に限り表示されます。フレーム画面が表示される場合はここに記述されたテキストは表示されません。

全てのブラウザーがフレームをサポートしている訳ではありませんから、このNOFRAMESエレメントを使って「ページがフレーム機能を使用している」というメッセージを入れるようにして下さい。あるいは、NOFRAMESエレメントにはBODY エレメントを記入すれば、通常のHTMLドキュメントの「ボディー」をそのまま書き入れることが出来ますから、ノンフレーム用のドキュメントを書いておくことも出来ます。

ターゲット・ウインドー

このターゲット・ウインドーという機能は、データが表示されるウインドーをコントロール（指定）するものです。例えば、NAME="window_name"の所で注意しておきましたが、フレーム間でのリンクを作成する場合にアクティブ・フレームをアップデイトしないで、別のフレームに表示したり、あるいはもう一つ新しいウィンドウを作って表示させたい場合などに使用します。

TARGET="window_name"

TARGET="window_name" はA, BASE, AREA, FORM , などのHTMLタグに入るアトリビュートです。

A タグ
<A HREF="url" TARGET="window_name">: アンカーをクリックすると、ブラウザーは新たにウィンドウを作り、そのウィンドウにドキュメントを表示します。つまり、<A>アンカー</A>をクリックすると TARGET="window_name" で指示されたウインドー/フレームにHREF="url"で指示されたファイルがロードされます。
BASEタグ
<BASE TARGET="window_name">: このBASEタグにターゲット・ウインドー名を指定しておくと、そのウインドー名はディフォルト設定になります。従って、ターゲット・ウインドー名を持たない全てのハイパーリンクはこの<BASE TARGET="window_name">で指示したウインドーに表示されます。
一つのドキュメント内にある全ての、あるいは殆ど全てのハイパーリンクが同じウインドー/フレームをターゲットにしている場合に使います。もし、全てのアンカーではなく、そのうちの幾つかのアンカーを違うウインドーに表示させたい場合は、それらのアンカーだけを上記のAタグを使って表記しておけば、ディフォルトになる<BASE TARGET="window_name">にオーバーライドするので問題はありません。BASEタグにはクローズ・タグは必要ではありません。
AREAタグ
<AREA SHAPE="shape" COORDS="x,y,..." HREF="url" TARGET="window_name">: AREAタグはイメージマップ作成でやりましたが、これに TARGET="window_name" を入れることでロードするウインドー/フレームを指示することが出来ます。
FORMタグ
<FORM ACTION="url" TARGET="window_name">: FORMタグにこれを使うことで、ファームデータを送った後のウインドー/フレームを指示することが出来るようになります。

ウインドーネイムについて

ターゲットになるウインドーに付ける名前はアルファベットと数字を使い、その以外のキャラクターは、次に紹介する四つのターゲット・ネイムを除いて、使うことができません。

マジック・ターゲット・ネイム

マジック・ターゲット・ネイムというのはNetscapeがフレーム機能を取り入れた時に使った呼び名で、要するにターゲットウインドーのname valueが予め定義されているということです。

アンダースコアー（＿）から始まるこの四つのターゲットアトリビュートは、リンクした先のドキュメントをどのウインドー/フレームにロードするかを指示するものです。通常、ターゲットを指示する場合にはターゲットになるウインドー/フレームに名前を付ける必要がありますが、この四つのターゲットアトリビュートにはその必要がありません。

TARGET="_blank"Sample 8: リンクした先のドキュメントは、常に新しいウインドー（フル・ボディー）にロードされ、元のウインドーは、新しくロードされたウインドーの背後にそのまま残ります。
TARGET="_self"Sample 8: リンクした先のドキュメントは、常にそのリンクのあるフレームにロードされます。
このターゲットは、その他のターゲットが指示されていない時のディフォルト・ターゲットになっています。
TARGET="_top"Sample 8: リンクした先のドキュメントは、フレームを無視して常にフル・ボディーのウインドーにロードされます。
"_blank" と違って、元のウインドーは残らず、ウインドー自体がアップ・デイトされます。ドキュメントがすでにフル・ボディーのウインドーにある場合は、ディフォルトで、"_self" として働きます。
TARGET="_parent"Sample 8: リンクした先のドキュメントは、そのフレームがチャイルド・フレームの場合に限りペアレント・フレームにロードされます。
ターゲット"_parent"を使えるチャイルド・フレームというのはネストされたフレームです。フレームがネストされない限りペアレント・フレームはできません。フレームがペアレント・フレームを持ってない場合は、ディフォルトで、"_self"として働きます。

Sample 8: FRAMEドキュメントのソースコード

     <HTML>
        <HEAD><title>Sample: Magic target</title>
        </HEAD>

         <FRAMESET ROWS="*,*">
               <FRAME SRC="frame1.html">

            <FRAMESET COLS="*,*">
              <FRAME  SRC="frame2.html">
              <FRAME SRC="frame3.html">　�ペアレント・フレーム
              
            </FRAMESET>
          </FRAMESET>
     </HTML>

サンプルでは<FRAME SRC="frame3.html">をペアレント・フレームにしました。

frame3.html

     <html>
         <head>
             <title>frame3/nested frame</title>
         </head>
    
           <frameset cols="50%,50%">
              <frame src="n1.html">
              <frame src="n2.html">
           </frameset>
     </html>

ここで出来る二つのフレームがチャイルド・フレームです。サンプルではここにロードされるフレーム3-1 (n1.html) にTARGET="_parent"を使い、もう一つのチャイルド・フレームにロードされるフレーム3-2 (n2.html) には target="_top" を使っています。

それぞれのフレーム上でカーソールを使って“戻る”と“進む”をやってみるとこれらのアトリビュートの違いが分かると思います。blankとtopでは単に“戻る”と“進む”が出るだけですがselfとparent では“フレームに戻る”が出る筈です。TARGET="_parent"は他の三つのアトリビュートと違い少し複雑です。始めてドキュメントを書くときには戸惑うかもしれませんが、上手に使うと面白いフレームが出来るかもしれません。

[HTML help] [Basics] [HTML 3.2] [Beginner's] [How]

ABACUSS LTD.
www.abacuss.com