■フレームとは？
フレームは、WWW ブラウザーのウィンドウの中を分割し、分割したそれぞれの領域に、異なるHTML ファイルを表示させることができる機能です。
各領域は他の領域に関わりなくページを変化させることができるので、複数のページに連載共通するタイトル、ナビゲーション用ボタン、あるいはメニューなどを固定した表示領域としてフレームで確保しておき、メインの領域だけを書き換えていくといった使い方がよくされています。

■フレームで作るページの構成
フレームを使ったページは、少なくとも3 つのHTML ファイルで構成されます。
1 つは、ページの構造を記述したHTML ファイルです。これはウィンドウをどのようにフレームに分割し、各フレームに何を表示するかを指定するHTML ファイルです。これ以外のHTML ファイルは、フレーム内に表示されるものを記述したHTML ファイルです。

川添 歩 （かわぞえあゆむ）
アクセス株式会社

http://www.axes.co.jp/

第8回
フレームの作り方
今回はフレームの作り方を紹介します。フレームは、Netscape 2.0 から加えられた、Netscape の拡張機能ですが、Internet Explorer 3.0 でも採用されています。

290 INTERNET magazine 1996/9

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

フレームを作成するためのHTML ファイル
は、次のような内容になります。

し、いちばん上のフレームはウィンドウの上かさせないオプションもあります。 これはら40 ピクセル、真ん中はウィンドウの高さの「SCROLLING」を使って、下記のように記20%、下のフレームはその残りの部分という述します。

ふうに分割されます（図 1）。

<HTML>

このような指定だと、ウィンドウの大きさを<HEAD>変えた場合、いちばん上のフレームの高さは<TITLE>Title</TITLE><FRAME SRC="child1.html"
SCROLLING=NO>

変わりませんが、下の2 段はウィンドウの大き</HEAD><FRAMESET ROWS="30,*">さによって相対的に高さが変わることになり「SCROLLING=YES」と書けば、逆にどの<FRAME SRC="child1.html">ます。ピクセル数で指定するか、パーセンテような場合でもそのフレームにスクロールバー<FRAME SRC="child2.html">

ージで指定するかは、そこに表示する内容にを表示します。

よって選びます。

</FRAMESET>

また、「*」は2 つ以上使うこともでき、そ</HTML>の場合は「残り」を「*」の数だけ等分して、<HTML> や<HEAD> はおなじみのタグでフレームが作成されます。その際、さらに「*」すが、このHTML ファイルには<BODY> があの前に数字をつけて「3*」のように指定するりません。< B O D Y > の代わりに < F R A M Eこともできます。たとえば、

図1 FRAME SET タグのオプションでページを分割
各画面の幅は「ピクセル数」、「ウインドウの幅のパーセンテージ」、「残り」などで指定できる

SET> タグを使用します。<FRAMESET> タグで、ウィンドウをどのように分割するかと<FRAMESET COLS="50,*,3*">

いうことを指定します。
次の行にある<FRAME> タグによって、分という指定をすると、いちばん上に50 ピクセ割した結果できたフレームに何を表示するかル分のフレームを作り、残りを1 対 3 の高さのということを指定します。

2 つのフレームに分割することになります。

フレームの指定は、ご覧のようにすべてタ■ <FRAME> タグ

グの中でオプションによって行います。

40pixel<FRAME> タグでは、<FRAMESET> で作■ <FRAMESET> タグ成した各フレームに表示させる内容を指定し<FRAMESET> タグでは、オプションとします。HTML ファイルを指定するオプションてROWS、COLS を持ちます。このオプショは画像などでファイルを指定するのと同様にンはページを縦横どちらに分割するかを指定

SRC で行います。

するもので、ROWS であれば上下に、COLSフレーム間を示す線は、通常マウスでドラであれば左右に分割します。ROWS またはッグして動かし、フレームの大きさをユーザー

COLS のあとに、「=」に続けて各フレームのが変更することができます。これを動かすこと幅を指定します。幅の指定は、ピクセル数、ができないようにするには、ウィンドウの幅のパーセンテージ、あるいは「*」で行います。
「*」はピクセル数やパーセ20%

残り<FRAME SRC="child1.html" NORESIZE>

ンテージで指定した部分以外の「残り」を表します。たとえば、というように N O R E S I Z E オプションをFRAME タグにつけます。
また、フレームの大きさがフレーム内に表示<FRAMESET ROWS="40,20%,*">

する内容よりも小さいと、スクロールバーが横と指定すると、ウィンドウを上下 3 段に分割と下に現れますが、このスクロールバーを表示

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1996/9291

■フレームの入れ子■名前とターゲット

果が、他のフレームに表示されるようにする

縦または横に分割するだけでなく、上下 2フレームを用いた場合、各フレームは完全には、リンクを指定する<A HREF> タグで、段にして下の段を左右にさらに分割するように独立して表示されるので、あるフレーム内表示先のフレームをターゲットとして明示しなことも可 能 です。 その場 合 には、でトップページに戻るリンクをクリックすると、なければなりません。

<FRAMESET> を入れ子にして記述します。

そのフレームの中にトップページが表示され、たとえば図 2 のようなフレームを作成したけれ他のフレームは変化しません。

ば、しかし図 3 の上段のフレームのように、ナビゲーション専用のフレームを作成した場合などは、それでは具合がよくありません。上部のフ<FRAMESET ROWS="45,*">

そこで、前もって表示先のフレームに名前をつけておき、この名前でターゲットを指定するようにします。
フレームの名前は<FRAME> タグのオプションでつけます。

レーム内にあるボタンをクリックしたら、その<FRAME SRC="child1.html" ><FRAMESET COLS="30%,70%">

フレームにではなく、下のフレームの表示がそ<FRAME SRC="child1.html"<FRAME SRC="child2.html">の指示に従って書き換わってほしいわけです。

NAME="kaisetsu">

あるフレーム内でリンク先をクリックした結<FRAME SRC="child3.html"></FRAMESET></FRAMESET><HTML><HEAD><TITLE>FRAME TEST</TITLE><HEAD><FRAMESET ROWS="45,*"><FRAME SRC="nav.html" SCROLLING=NO>のようになります。

ナビゲーション用のフレーム
表示先のフレームに名前をつける<FRAME NAME="kaisetsu" SRC="child1.html">

ここではまず上下 2 段に分割する指定をし、2 行めで上部のフレームに表示するHTML フ</FRAMESET></HTML>ァイルを指定しています。3 行目で、下部のフレームをさらに左右 2 つに分割するために、<FRAMESET> タグを用いています。そして4、5 行目に、その左右のフレームに表示するHTML ファイルを指定しています。
<HTML><HEAD><TITLE>FRAME TEST</TITLE><HEAD><BODY><H3><A HREF="child1.html"
TARGET="kaisetsu">Child1</A>

ターゲットの指定<A HREF="child2.html"
TARGET="kaisetsu">Child2</A></H3></BODY></HTML>

図 2 ：フレームで画面を上下、左右に分割した例
FRAME SET を入れ子にして作成する

図 3 ：あるフレーム内のリンクをクリックした結果を別のフレームに表示する

292 INTERNET magazine 1996/9

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

ターゲットの指定

こうして名前がつけられたたフレームに、別のフレームでリンクボタンをクリックした結果を表示させるには、■フレームを認識しないブラウザ
ーのために</HEAD><FRAMESET ROWS=30,*><FRAME SRC="child1.html">ところで、以上で書いてきたフレームの指<FRAME SRC="child2.html">

定は、すべてタグによって書かれています。
<A HREF="setsumei.html"
TARGET="kaisetsu">のように書きます。
また、フレーム内からリンク先をクリックし認識できないタグは無視をするというのが</FRAMESET>WWW ブラウザーのきまりですから、もしフレ<NOFRAMES>ームの機能をもたないブラウザーでこのHTML<BODY>

ファイルを表示しようとした場合、空白のペ

このページはフレーム対応のブラウザーでご覧ージが表示されてしまうことになります。

ください。
</BODY>た結果を、フレームをなくしたウインドウにそれでは都合が悪いので、フレームを認識表示させたい場合があります。たとえばトッしないブラウザーを使っているユーザーがこのプページに戻るような場合、トップページがページに来たときに表示する内容を用意しなフレームの中に表示されるのでは困ってしまければなりません。 そのためのタグがいます。そのような場合には、ターゲットと<NOFRAMES> 〜 </NOFRAMES> です。

ここでは、フレーム非対応のブラウザーで見して"̲top"と記述します。

<NOFRAMES> タグ自体は、フレームを認識た場合、「フレーム対応のブラウザーでご覧くしないブラウザーでは無視しますが、それで囲ださい。
」という文章だけが表示されることにわれた部分はタグではありませんので表示されなります。しかし実際には、このような文章ます。一方、フレームに対応しているブラウだけを表示するのは不親切です。できるだけフザーでは、<NOFRAMES> で囲われた部分のレームを使ったときと同じ内容（見え方やユ内容は無視するようになっています。

ーザーインターフェイスだけが違う）が表示さ<A HREF="index.html" TARGET="_top">

別のターゲットを指定するもう1 つの方法に、"̲blank"があります。これは特にフレームを使っていなくても便利な機能です。この指定をすると、今開いているウィンドウのほかに、新<NOFRAMES> を使ったHTML は、下記のようになります。

</NOFRAMES></HTML>れるように、従来のフレームを使わないやり方できちんと記述したほうがよいでしょう。

しいウィンドウをもう1 つ別に開いて、そちらにリンク先のページを表示します。リンク先に飛んだあと、また再び元のページに必ず戻ってきてほしいような場合に、とても有効です。

<HTML><HEAD><TITLE>Title</TITLE>

図 4 ・ 5 ：フレームを効果的に使っているホームページの例

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1996/9293

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この PDF ファイルは、株式会社インプレス R&D（株式会社インプレスから分割）が 1994 年～2006 年まで発行した月刊誌『インターネットマガジン』の誌面を PDF 化し、「インターネットマガジン バックナンバーアーカイブ」として以下のウェブサイト「All-in-One INTERNET magazine 2.0」で公開しているものです。

http://i.impressRD.jp/bn
このファイルをご利用いただくにあたり、下記の注意事項を必ずお読みください。
z 記載されている内容（技術解説、URL、団体・企業名、商品名、価格、プレゼント募集、アンケートなど）は発行当時のものです。
z 収録されている内容は著作権法上の保護を受けています。著作権はそれぞれの記事の著作者（執筆者、写真の撮影者、イラストの作成者、編集部など）が保持しています。
z 著作者から許諾が得られなかった著作物は収録されていない場合があります。
z このファイルやその内容を改変したり、商用を目的として再利用することはできません。あくまで個人や企業の非商用利用での閲覧、複製、送信に限られます。
z 収録されている内容を何らかの媒体に引用としてご利用する際は、出典として媒体名および月号、該当ページ番号、発行元（株式会社インプレス R&D）、コピーライトなどの情報をご明記ください。
z オリジナルの雑誌の発行時点では、株式会社インプレス R&D（当時は株式会社インプレス）と著作権者は内容が正確なものであるように最大限に努めましたが、すべての情報が完全に正確であることは保証できません。このファイルの内容に起因する直接的および間接的な損害に対して、一切の責任を負いません。お客様個人の責任においてご利用ください。

このファイルに関するお問い合わせ先
All-in-One INTERNET magazine 編集部
im-info@impress.co.jp
Copyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.