| HTMLの書き方 基礎１４ | ||
| 発言番号 | 発言日時 | 発言者 |
| 01358 | 98/02/08 13:36 | にゃん |
画面を二つとか三つとかの部分に仕切って、それぞれの部分（フレーム）に、違う内容を表示させることができます。よくあるのは、一方（たとえば左）のフレームに目次を表示させて、他方（たとえば右）のフレームに内容を表示させるという使いかたです。左のフレームで、目次の項目をクリックするごとに、右のフレームにその内容が表示されるので、迷子にならずに快適にあちこち見てまわったり、ほしい情報を探したりすることができます。翻訳フォーラムのホームページでは、「翻訳に役立つリンク集」などに、フレームを使っています（この「ホームページの作り方」も、ご覧のとおりフレームに入っています）。
これ以外にも、いろんな仕切り方や使い方があります。このように縦横入り乱れて、たくさんのフレームを切るときの指定のしかたは、ややこしいので、ここでは説明しません。書店にある HTML タグ辞典などを参照してください（はずかしいけど、このページのソースを表示させてみてもいいでしょう）。
画面を二つに仕切って、左と右のフレームに別々の文書を表示させる場合、全部で三つの html ファイルが必要です。一つはフレームを定義する文書、もう一つは左に表示する文書、最後は右に表示する文書です。「翻訳に役立つリンク集」の場合、link.htm という文書でフレームを定義し、左のフレームに li_idx.htm（リンク集の目次）を表示、右のフレームに li_form.htm（リンク集のうち検索エンジンのページ）を表示させています。ブラウザで link.htm を呼び出すと、画面が二つに仕切られて、左右のフレームにこれらのファイルが表示されるという仕組みです。
それでは、link.htm の中身を見てみましょう（現在のものとは少し違います）。
<HTML> <HEAD> <TITLE>FHONYAKU LINKS（翻訳フォーラム・リンク集）</TITLE> </HEAD> <FRAMESET COLS="25%,75%"> <NOFRAME> <A HREF="li_menu.htm"> If your browser does not support frames, please click here to choose NO-FRAME VERSION OF FHONYAKU LINK MENU </A> </NOFRAME> <FRAME NAME="L" SRC="li_idx.htm"> <FRAME NAME="R" SRC="li_form.htm"> </FRAMESET> </HTML> |
まず気がつくと思いますが、この html 文書には <BODY>〜</BODY> がありません。その代わりに <FRAMESET>〜</FRAMESET> タグがあります。
<FRAMESET> は、フレームを切るという宣言をするタグで、オプションによって、フレームを縦に切るか横に切るか、どれだけの広さに切るかを定義します。
オプション COLS は、画面を左と右に切り分けます。オプション ROWS は、画面を上と下に切り分けます。その後に書く数字が、フレームの広さを定義します。単位はピクセル数かパーセントです。フレームの広さをパーセントで定義する場合は、もちろん合計が 100% になっていなくてはなりません。数字の代わりに「*」と書くと、「残り全部」という意味になります。
上の例のように <FRAMESET COLS="25%,75%"> だと、画面の左側 25% が一つのフレームになり、残りの 75% がもう一つのフレームになります。
<FRAMESET ROWS="100,*,20%"> だと、画面が上下３段に仕切られて、上のフレームが100 ドットの高さ、下のフレームが 20% の高さ、その残りが中央のフレームになります。
<FRAME> タグは、個々のフレームの具体的な内容を定義します。フレームを切った数だけ、<FRAME> タグを並べてやってください。左から右、上から下の順序で、それぞれのフレームに <FRAME> タグの記述が割り当てられて行きます。
<FRAME> タグの SRC オプションは、そのフレームに表示するファイルを指定します。
<FRAME> タグの NAME オプションは、そのフレームに名前を付けます。この名前は、後述のターゲットウィンドウ機能で使います。
<FRAME NAME="L" SRC="li_idx.htm">
<FRAME NAME="R" SRC="li_form.htm">
というのは、左のフレームに L という名前を付けて、li_idx.htm を表示し、右のフレームに R という名前を付けて、li_form.htm を表示するということです。
最後に、<NOFRAME>〜</NOFRAME> ですが、これは必ず書くことが、お作法です。世の中には、まだフレーム機能を持っていないブラウザがありますので、そういうブラウザでアクセスした人が困らないようにするためのものです。
フレーム機能を持っているブラウザは、<NOFRAME>〜</NOFRAME> の間に書かれているものを完全に無視します。一方、フレーム機能を持っていないブラウザは、<NOFRAME>〜</NOFRAME> の間に書かれているものだけを画面に表示します（というか、それ以外の部分はすべて「理解できないタグ」なので、ここだけしか表示できないわけです）。そこで、この <NOFRAME>〜</NOFRAME> の中に、フレーム機能を持っていないブラウザのためのリンクを書いておきます。
上の例では、<NOFRAME><A HREF="li_menu.htm">If your browser does not supportframes, please click here to choose NO-FRAME VERSION OF FHONYAKU LINK MENU</A></NOFRAME> となっていますから、フレーム機能を持っていないブラウザでこのファイルを見ると、li_menu.htm へのリンクだけが見えるはずです。そこで、そのリンクをクリックしてもらうと、フレームを使わないメニューが表示されるので、フレーム機能を持っていないブラウザでもちゃんとリンク集を利用してもらえるという仕組みです。
次の記事