フレーム（１）

☆フレームを作る（１）

◎ フレームとは何か
ホームページを縦あるいは横に画面を分割して表示することです。

例えば、この『メモ帳だけで作るホームページ』は全体をフレームを使って構成しいます。
左側に「メニュー」を右側に「説明」と左右に２分割して表示していますが、このように画面を分割して表示するときにフレームを使います。

◎ フレームの仕組み
フレームの構成を指定したベースのHTMLファイルがひとつあり、そのベースのファイル上に表示させようとする複数のファイルが乗っているという形になっています。

例えば、２分割の場合、フレームのベースファイルが１つ、表示させるべきファイルを２つ、合計３つのファイルを用意しなければならないのです。

※ フレームの[ベースファイル]には分割する際の細かい指定をします。
（１）：左右に２分割するよ、分割の割合は何％だよ
（２）：右のフレームには「abc1.html」、左には「abc2.html」を表示させるよ
（３）：境界線（分割線）の幅や色はどうする

◎ フレームのタグ（１）
＜FRAMESET＞～～＜/FRAMESET＞がフレームに関する指定をするタグです。

※ フレーム開始タグ＜FRAMESET＞内に細かい指定をする属性を記入します。

COLS="n%,*"	左右に分割するときに指定します分割の比率、左側に「n％」残りが「*」という意味です
ROWS="n%,*"	上下に分割するときに指定します分割の比率、上側に「n％」残りが「*」という意味です
BORDER="n"	フレームの境界線（分割線）の太さを指定します「n」に数値（ピクセル）を記入します
BORDERCOLOR="m"	フレームの境界線（分割線）の色を指定します「m」にカラーネームあるいはRGB値を記入します
FRAMEBORDER= "1 or 0"	フレームの境界線（分割線）の表示か非表示を指定します境界線表示のとき「1」または「YES」境界線非表示のとき「0」または「NO」と書く

※ タグ記入例

意味：
「今からフレームを指定するよ」
「左側が２５％、右が残り（７５％）の割合で左右に分割するよ」
「境界線の幅５ピクセル値だよ」
「境界線の色はグリーンだよ」

◎ フレームのタグ（２）
＜FRAME SRC="abc"＞が表示させるファイルを指定します。
「abc」のところに表示させるファイル名を記入。

＜NAME="xyz"＞
がフレームに名前を付けます。
「xyz」のところに、そのフレームの名前を付けておきます。
※名前を付けておくのはこの先、リンクしたりするときに管理すするのに必要です。

※ タグ記入例

意味：
「"myframe10"という名前のフレームに"abc.html"を表示させます」

◎ フレームのタグ（３）
＜NOFRAME＞～～＜/NOFRAME＞はフレームが表示できない時、「～～」のところに記入したコメントがかわりに表示させれます。フレームに対応していないブラウザでこのページを表示させようとしたときに変って表示します。

◎ サンプル雛形（実例）(１)のソース
→ フレームサンプル雛形（１）へ

（１）フレームのベースファイルサンプル

<HTML>
<HEAD>
<TITLE>フレームサンプル（１）</TITLE>
</HEAD>

<FRAMESET ROWS="30%,*" BORDER="5">
<FRAME SRC="framefile1.html" NAME="frameA">
<FRAME SRC="framefile2.html" NAME="frameB">

<NOFRAMES>
このページはフレーム対応のブラウザでご覧ください。
</NOFRAMES>

</FRAMESET>
</HTML>

意味：
※「今からフレームを指定するよ」
※「上側が３０％、下が残り（７０％）の割合で上下に分割するよ」
※「境界線の幅５ピクセル値だよ」
※「最初のフレーム（上）は”frameA”という名前で”framefile1.html”というファイルをこのフレームに表示させますよ」
※「次のフレーム（下）は”frameB”という名前で”framefile2.html”というファイルをこのフレームに表示させますよ」
※「フレーム未対応のブラウザのときは”このページはフレーム対応のブラウザでご覧ください。”のコメントを表示させますよ」

（２）フレームＡに表示させるファイル１
＜ファイル名＝framefile1.html＞

<HTML>
<HEAD>
<TITLE>フレームＡに表示させるファイル１</TITLE>
</HEAD>

<BODY bgcolor="YELLOWGREEN">

フレームＡに表示させたファイル１

</BODY>
</HTML>

（３）フレームＢに表示させるファイル２
＜ファイル名＝framefile2.html＞

<HTML>
<HEAD>
<TITLE>フレームＢに表示させるファイル２</TITLE>
</HEAD>

<BODY bgcolor="LIGHTBLUE">

フレームＢに表示させたファイル２

</BODY>
</HTML>

◎ サンプル雛形（実例）(２)
もし、フレームのベースファイルで表示させるべきファイル名を間違って指定したとき
（表示させるファイルが見つからないとき）
サンプルのようにならないようファイル名はリンクで説明したようにスペルはもちろん大文字小文字の区別間で正確に指定してください。

→ フレームサンプル雛形（２）へ
※ このフレームサンプル(２)はわざと間違ったファイル名をソースに記述しています。
「NOT FOUND」あるいは「ページを表示できません」等、エラーメッセージが出ます
ウインドウで確認が済みましたら「×」で閉じてください。

◎ フレーム利用時のソースの表示（確認）方法
（詳しくは「ページの利用方法」あるいは「ソースの確認方法」で説明しています。）

※１ フレーム内のHTMLファイルのソースの表示方法
右クリックして、そのメニューの中のソースの表示をクリックしてソースを表示させる

※２ ツールバーからのソース表示方法
フレームがある時にこの方法を使うと
フレームのベースファイルのソースが表示されます
ツールバーの「表示」クリック、表示メニューの「ソース」クリックしてソースを表示させます。

利用方法の説明ページへ