■フレームを実際に作ってみましょう

フレームの構造は、説明文にすると難解なようですが、実際に作ってしまえば簡単に習得できます。では、いきなり作り始めましょう!!
●最初に最低限必要な書類
・フレームの分割方法を指定した空枠のHTML書類
・その分割されたそれぞれの中身を書いたHTML書類(分割したセル数だけ必要)

【例 題】
例えば横2段で、下段のみがさらに縦に2列に分割している、3つのセルからなるページを作る場合を考えてみよう。

【STEP 1】まず、フレームの枠を作ってみましょう。
まず全体を<FRAMESE>タグで挟みます。フレームタグを使う場合は<BODY></BODY>のかわりに<FRAMESE></FRAMESE>とします。

<HTML>
<HEAD> <TITLE>マイ・ホームページ</TITLE></HEAD>

<FRAMESET>
・・・・フレームのレイアウトの指定・・・・
</FRAMESET>

<NOFRAMES>
・・・フレーム機能をサポートしていないブラウザ用の表示・・・
</NOFRAMES>
</HTML>

これがフレームによる分割を指定する基本形です。では、実際のソースをいきなり書いちゃいますので、分からない部分をクリックして見て下さい。詳細はこのページの上のセルに出ますので、文字が見えないときは枠をドラッグして調整してください。


<HTML>
<HEAD><TITLE>マイ・ホームページ</TITLE></HEAD>

<FRAMESET ROWS="72,*">
 <FRAME SRC="ue.html" NAME="ueframe" SCROLLING="no">
 <FRAMESET COLS="160,*">
  <FRAME SRC="hidari.html" NAME="hidariframe" SCROLLING="auto">
  <FRAME SRC="migi.html" NAME="migiframe" SCROLLING="auto">
 </FRAMESET>
</FRAMESET>

<NOFRAMES>
 <CENTER>
 フレーム機能をサポートしていないブラウザの方は
 <A HREF="noframe.html">こちら</A>をご覧ください。
 </CENTER>
</NOFRAMES>

</HTML>

【STEP 2】それぞれのセル内に表示するHTML書類を作ります
上記のベースとなる書類のほかに、それぞれのセル内に表示するHTML書類が必要です。各セルの中に使用する書類の書式は通常のHTMLでかまいません。通常と異なるのはリンクに関する部分だけです。ただし、先ほど分割指定しましたので、ページレイアウトは、それぞれのセルの表示エリアを意識して作っておいてください。これも前述のテーブルタグなどを利用すれば便利でしょう。

では、先ほど作った左下のセルに、リンクボタンを作り、上のセルに表示される内容を変更するようにしてみましょう。

<A HREF="ue2.html" TARGET="ueframe">ここを押してね</A>

さて、リンクの指定ですが、フレームを使用したページでは、リンク指定したhtml書類を何処へ表示するかを<A HREF>タグのTARGETで指定しなければなりません。

TARGETには大きく分けて下記の種類があります。
●各フレーム内へのターゲット
●フレームを解除して外に出る
●新しいウインドウを自動作成し表示する

※この他、TARGET="_self"(自フレームに表示)。
TARGET="_parent"(親フレームに表示)。などの書き方もあります。

■ベースタグでまとめて指定
例えばリンク集のページを作りたい場合など、沢山のリンク指定の全てにいちいちTARGETを指定するのはたいへんです。そこでまとめてターゲットを指定するのがタグです。内に一回書けば、あとはターゲットを書かなくても、全て指定した場所へ飛んでいってくれます。

<HTML><HEAD><TITLE>タイトル</TITLE>
<BASE TARGET=_top></HEAD>
<A HREF="boku.html">僕もフレームから脱出<A>
<A HREF="watashi.html">私もフレームから脱出<A>
・・・・・・・・・・・・・・

■ソース例
◇index.html フレームの分割指定をした書類
◇ue.html   上のセル用のHTML
◇hidari.html 左のセル用のHTML
◇migi.html  右のセル用のHTML
◇ue2.html  変更する上のセルのHTML
※フレームに未対応のためのHTMLも必要ですが、これは通常のものですので省略

●上記作業までのテスト用完成品を見る

○Webでの使用例(大量情報の整理)
○Webでの使用例(遊びの中に使ってみる)

【応用編】一つのリンクスイッチで2つのフレームをスイッチする。
これは、フレームを入れ子にすることによって実現できます。


※この他にも、フレームの境界線の色を変えたり・消したり、またJavaScriptを使用してサイズ指定をした新規ブラウザウインドウを表示したりと、いろいろな楽しみ方があります。詳しくは本書をご覧ください。


[戻る] [選ぶ] [進む]