簡単なホームページの作り方第七回目
「フレーム(分割表示)」

 今回は「フレーム」についてです。

フレームとは?
 今までに皆さんは幾つのホームページを見てきたでしょうか?
 今までに見てきたホームページの中には、画面が幾つかに分割されて表示されているページを見てきていることでしょう。
 たとえば、左右に分割されていて、左側にメニューが表示され、そのメニューのリンクをクリックすると右側にそのリンク先が表示される・・・
 そういったページを見たことがあると思います。
 それは、「フレーム」という方法を使っています。

実際の使い方は?
 タイトルにも表示されているとおり、フレームは画面を分割して表示するためのものです。
 この機能を使用すれば、メニュー項目の場所と表示するページの場所が別々となります。
 これは、リンクを管理するのが楽となり、また見に訪れた人たちもページからページを移動するのが楽になります。
 私の個人的な意見を交えて言わせてもらえば、情報が多いページなどは、ページを見に来た人たちがすぐに他のページに移動できるように考えて作られているところが多いみたいです。

どうやって表示させるのか?
 フレーム表示させるために使用するタグは、「<FRAMESET></FRAMESET>」でフレームの使用を宣言します。
 この「<FRAMESET></FRAMESET>」タグは、フレーム表示させるときの設定をするタグです。
 フレーム表示では、今までのタグと少し違ったところがあります。
 今までのタグは、そのタグを書くことによって、タグに挟まれたところが効果を発するようになっていました。
 このタグは、ブラウザを区切る設定を行うタグです。
 このタグの設定で、上下や、左右に分割する事が出来ます。
 そして、その設定にあわせて、表示させるHTMLファイルを表示させます。
 表示させるHTMLファイルを設定するタグは、「<FRAME SRC>」タグです。
 例えば、上下に半分ずつ分割するとします。
 上下半分で分割する設定は、「<FRAMESET ROWS="50%,50%">」と、します。
 これで、上下二つに分割されます。
 それでは、上半分に「top.html」、下半分に「botom.html」というファイルを表示させるにはどうすればいいのでしょうか?
 それは、「<FRAMESET></FRAMESET>」の間に「<FRAME SRC="top.html">」「<FRAME SRC="botom.html">」を入れればいいのです。
 この時、挿入する順番を間違えないようにしてください。
 挿入する順番どおりに表示します。
 ためしに自分で「frame.html(フレーム設定のファイル)」「top.html(上半分に表示するファイル)」「botom.html(下半分に表示するファイル)」を作成して表示してみてください。
 今までのHPの作成の仕方を覚えていれば簡単に作成できるでしょう。

フレーム分割の設定について
 フレームの分割のオプションで「ROWS」というのを使用しました。
 このオプションは、「上下に分割」でした。  では、「左右に分割」をするにはどうすればいいのでしょうか?
 これは、「COLS」というオプションを使えば簡単に出来ます。
 使用法は、「ROWS」と同じです。
 さて、「ROWS」も「COLS」も、設定で「%」を使用しましたが、実は「ピクセルサイズ」で区切ることも出来ます。
 「ピクセルサイズ」で区切る場合には、数値をそのまま入れます。
 また、「上だけ200ピクセル、残りは指定しない」というような場合には、「*」を使用すれば、残りの部分の大きさを勝手に割り振ってくれます。
 今までの説明は、二つに分ける場合だけを説明していますが、「三分割」「四分割」をする場合には、数値を「,」で区切っていくだけです。
 「上下に分割し、さらに左右に分割」する場合はどうするのでしょうか?
 これは、下のようになります。

<FRAMESET ROWS="30%,*">
<FRAME SRC="top.html">
<FRAMESET COLS="200,*">
<FRAME SRC="left.html">
<FRAME SRC="right.html">
</FRAMESET>
</FRAMESET>

オプション
 「<FRAMESET>」タグのオプションは、上記したとおりです。
 では、「<FRAME>」タグのオプションはどうでしょうか?
 「<FRAME>」タグのオプションにはフレームのウィンドウに名前を付ける「NAMEオプション」、
フレームと文字の間隔を決める「MARGINHEIGHTオプション」(高さ)、「MARGINWIDTHオプション」(横)、
スクロールバーの表示・非表示を決める「SCROLLING」、
フレームの境界を移動できないようにする「NORISIZE」があります。
 「MARGIN〜オプション」は、「MARGIN〜="num"」(numは数字)で指定します。
 「SCROLLINGオプション」は、「SCROLLING="option"」で指定して、「"yes"」だと必ずスクロールバーが表示されます。
 「"no"」だと必ずスクロールバーは非表示になります。
 「"auto"」だと表示・非表示はブラウザに任せます。

リンクの表示される場所について
 フレームで区切った場合、リンクが表示されるのはどこでしょうか?
 基本的には、そのリンクがある所と同じフレームのところに表示されます。
 では、他のフレームに表示させるにはどうすればいいのでしょうか?
 そのために、リンク(<A></A>)タグには、「TARGETオプション」があります。
 「TARGET="option"」の、「option」の部分に、表示させたいフレームの名前を指定します。
 また、「option」の部分に、「"_top"」を指定すると、フレームを解除して表示します。
 「"_TOP"」を指定すると、新しいウィンドウを作成して表示します。

フレームを扱う場合の注意
 フレームを扱う場合に注意しなければならないことがあります。
 それは、ブラウザのによっては、フレーム表示ができないものがあるということです。
 今の所、Internet ExprolerはVer.3から、Netscape NavigatorはVer.3からフレーム表示をサポートしていることを確認しています。
 フレーム表示できないブラウザのために、「<NOFRAME></NOFRAME>」というものがあります。
 このタグは、「<FRAMESET></FRAMESET>」タグの外に書きましょう。
 「<NOFRAME></NOFRAME>」の中に、フレームタグをサポートしていないブラウザのために内容を書きます。
 また、今までに確認した所、Netscape Navigatorだと、「<BODY>」タグを書き込むと、フレームの表示ができないことを確認しています。

 いかがでしょうか?
 フレームに付いては、ほとんどすべて書きました。
 補足は、別の機会に行います。
 次回は「リスト」です。


第六回目に戻る  講座トップページに戻る  第八回目に行く