<フレーム表示しよう>

 いきなりですが、私は個人的にはフレーム表示はあまり好きではありません。
とは言ってもフレーム表示が便利だという事は事実ですし、そう言う私自身のホームページでも使用していますが、ここで大切なのは画面をフレームで分割させすぎないという事です。せいぜい2分割か3分割までが許容範囲ではないでしょうか。いきなりどうでもいい私的な意見を書いてしまいましたが、とりあえずフレームについて勉強してみましょう。フレーム機能を使うには少しだけややこしい所もあったりしますが、しっかりと手順を追って作っていけば大丈夫です。フレーム表示の為の基本的な作り方は次の通りです。
1. それぞれのフレーム画面に表示するためのHTMLドキュメントを作ります。画面を2分割するのであれば2つ作らなくてはいけませんし、3分割するのなら3つのドキュメントを作ります。
2. 1で作ったドキュメントを入れる(表示する)為の親のドキュメントを作ります。(フレーム枠を設定しただけのドキュメント)
この部分を作ることが今回の作業になります。

 それでは、フレーム画面を作る為のフレームタグを紹介しましょう。タグは<FRAMESET></FRAMESET>です。そして、分割の仕方として縦に分割する場合(画面を横に並べる場合)は「COLS」、横に分割する場合(画面を縦に並べる場合)は「ROWS」というオプションを記述します。
 ここで1つ注意しなければいけないことがあります。フレームを設定する為のドキュメントは、通常のHTMLドキュメントと少し記述方法が違うという事です。
 下の例を見て下さい。(このサンプルは、試さないで下さい。)

<HTML>
<HEAD>
<TITLE>フレーム表示</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
フレーム表示の中身

</FRAMESET>
</HTML>

 さて、普通のHTMLの記述と違うところがお分かりでしょうか?答えは<BODY>〜</BODY>タグで挟まれていないという事です。これは覚えておきましょう。
 そして、オプションの部分ですが、サンプルでの意味は画面全体を左20%・右80%の割合で分割しなさいという事です。3つに分割するにはもう1つコンマで区切って%を記述します。ここで気を付けなければいけないのは、必ず全体で100%になる様に設定しなければいけないということです。また、%で指定する他にピクセル数値で指定する事も出来ます。更に残りの1つの指定を「*」とすることで、画面全体から数値や%で指定した部分を引いた残りという記述も出来ます。次にその例を挙げます。

<FRAMESET COLS="20%,*">  画面全体を左20%、右はその残りの大きさで分割

<FRAMESET ROWS="33%,*,33%">  画面全体を上と下は33%、真中はその残りの大きさで分割

<FRAMESET COLS="*,100">  画面全体を右は100ピクセル、左はその残りの大きさで分割

 さて、次に各々のフレームに表示させるHTMLドキュメントを指定する必要があります。
それには<FRAME SRC="">というタグを使います。このタグは単独で使用します。○の部分に入れるのは表示の対象となるHTMLのアドレス(URL)で、絶対パスでも相対パスでもOKです。それでは、2つのHTMLドキュメントを用意して記述して確認してみましょう。この色の部分にあなたの用意したHTMLドキュメントを指定して下さい。

<HTML>
<HEAD>
<TITLE>
フレーム表示</TITLE>
</HEAD>
<FRAMESET COLS="
40%,*">
<FRAME SRC="1つめのドキュメントのアドレス">
<FRAME SRC="
2つめのドキュメントのアドレス">
</FRAMESET>
</HTML>

 左右に分割された画面のそれぞれにあなたの指定したドキュメントの表示がされましたね。分割の仕方やサイズをいろいろと指定して表示のされ方を見てみましょう。ただし、分割する数とHTMLドキュメントの数は同じになる様に注意して下さい。
 次にフレームタグに用意されているオプションについて説明します。

NAME="フレーム画面の名前"・・・「TARGET」で指定する時に必要なので普段からなるべく付けておく
MARGINHEIGHT="ピクセル数"・・・フレーム画面とその中のテキストとの縦の間隔
MARGINWIDTH="ピクセル数"・・・フレーム画面とその中のテキストとの横の間隔
SCROLLING="YES,NO,AUTO"・・・スクロールバーの表示[表示する,表示しない,必要なら表示する]
NORESIZE・・・フレームの境界線を動かせなくする設定(記述するだけでOK)

 下の記述例を参考にいろいろ設定して確認してみましょう。

<HTML>
<HEAD>
<TITLE>
フレーム表示</TITLE>
</HEAD>
<FRAMESET COLS="
40%,*">
<FRAME SRC="1つめのドキュメントのアドレス" NAME="HIDARI" MARGINHEIGHT="15" SCROLLING="NO" NORESIZE>
<FRAME SRC="
2つめのドキュメントのアドレス" NAME="MIGI" MARGINHEIGHT="10" MARGINWIDTH="15">
</FRAMESET>
</HTML>

 これまで説明した方法で記述する事でフレーム表示は出来るわけですが、ブラウザの中にはフレーム表示に対応していないものもあります。(フレームやテーブルの機能はHTML3.0からサポートされていますので、それ以前のブラウザなどは対応していない事も考えられます。)
 もし、フレーム機能に対応していないブラウザでフレーム設定されたページを見ようとすると、<BODY>タグが無いので何も表示されないという事になってしまいます。
 そこで、フレーム未対応ブラウザの為にフレームを使っているという内容を表示させなければいけません。それには、<NOFRAME></NOFRAME>というタグを使います。そして、このタグの中に<BODY>タグを入れて通常のHTMLのように記述する事でフレーム未対応ブラウザにその中の内容を表示させる事が出来ます。

<HTML>
<HEAD>
<TITLE>
フレーム表示</TITLE>
</HEAD>
<FRAMESET COLS="
40%,*">
<FRAME SRC="1つめのドキュメントのアドレス" NAME="HIDARI">
<FRAME SRC="
2つめのドキュメントのアドレス" NAME="MIGI">
<NOFRAME>
<BODY>
フレームに対応していないブラウザに表示する内容を記述
</BODY>
</NOFRAME>

</FRAMESET>
</HTML>

 次にリンク先を別のフレームに表示させる方法を説明します。
これはどういう事かと言うと、例えば左右2つにフレーム分割したあなたのホームページの左側の画面にコンテンツを表示をしておいて、そのメニューをクリックすると右側の画面にリンクされたコンテンツの内容が表示されるといったもの(ナビゲーションバーのように使う)です。
 では、実際に記述して操作してみましょう。HTMLドキュメントを3つ用意し、左のフレームに表示させるドキュメントにはリンクを指定し、リンク先は残りの2つのドキュメントにします。下記サンプルのこの色の部分はあなたが書き換えて表示させてみて下さい。

 フレーム設定用のHTML:

<HTML>
<HEAD>
<TITLE>
フレーム表示</TITLE>
</HEAD>
<FRAMESET COLS="
50%,*">
<FRAME SRC="left.htm" NAME="LEFT">
<FRAME SRC="
right.htm" NAME="RIGHT">
<NOFRAME>
<BODY>
フレームに対応していないブラウザに表示する内容を記述
</BODY>
</NOFRAME>

</FRAMESET>
</HTML>

 「left.htm」の内容:

<HTML>
<HEAD>
<TITLE>
「left.htm」</TITLE>
</HEAD>
<BODY>

<A HREF="right.htm" TARGET="RIGHT">ここをクリックすると右のフレームに「right.htm」が表示される</A><BR>
<A HREF="another.htm" TARGET="RIGHT">ここをクリックすると右のフレームに「another.htm」が表示される</A>
</BODY>
</HTML>

 「right.htm」の内容:

<HTML>
<HEAD>
<TITLE>
「right.htm」</TITLE>
</HEAD>
<BODY>

これは、「right.htm」の内容です。
</BODY>
</HTML>

 「another.htm」の内容:

<HTML>
<HEAD>
<TITLE>
「another.htm」</TITLE>
</HEAD>
<BODY>

これは、「another.htm」の内容です。
</BODY>
</HTML>

 この様に、フレームに「NAME」を付ける事によって表示させる「TARGET」(ターゲット)を決める事が出来ます。また、フレームに表示するのではなく、新しい画面を開いて表示させたい場合には「TARGET」の指定を次のようにします。(上で使ったサンプルのセットをそのまま使います。)

 「left.htm」の内容をこの様に書きかえる:

<HTML>
<HEAD>
<TITLE>
「left.htm」</TITLE>
</HEAD>
<BODY>

<A HREF="right.htm" TARGET="RIGHT">ここをクリックすると右のフレームに「right.htm」が表示される</A><BR>
<A HREF="another.htm" TARGET="_BLANK">ここをクリックすると右のフレームに「another.htm」が表示される</A>
</BODY>
</HTML>

 これで実行すると、"another.htm"は新しい画面に表示されます。"_BLANK"というのがその意味の記述になります。このようなオプションは、他に次のものがあります。

"_PARENT"・・・親ウインドウに表示する
"_SELF"・・・現在のウインドウに表示する
"_TOP"・・・フレームを解除して表示する

 いずれも最初にアンダーバー” _ ”が付くので記述するのを忘れないようにしよう。
 もし、どのリンクも同じウインドウに表示する場合はフレーム設定のドキュメントの<HEAD>〜</HEAD>タグの間に<BASE TARGET="ターゲット先">と記述すれば、それぞれのリンクタグにターゲットを指定する必要がなくなります。

 最後に、フレームの境界線に色をつけたり表示させなくする設定を説明します。どちらも<FRAMESET>タグのオプションとして次のように記述します。

色指定:<FRAMESET BORDERCOLOR="色指定(RGBまたは色名)">

境界線非表示:<FRAMESET FRAMEBORDER="NO">もしくは<FRAMESET BORDER="0">

 境界線の非表示は上の2つでは若干違いがありますので試してみて下さい。


メニュー / 基礎 / 文字 / 装飾 / 画像 / リンク / テーブル / フレーム / フォーム / ステップ