フレーム基礎編
超簡単ＨＴＭＬ基礎

ここでは、フレームを使ったページ作成について紹介しています。
フレームページを作成するには、フレームページの構造を指定する一つのHTMLファイルと各フレームに表示させるHTMLファイルが必要になります。うまく使いこなすと、格好良くてページ内を回りやすいフレームページ・・・けっこう簡単に作ることができますので、是非挑戦してみて下さい。
■STEP3-1．フレーム内に表示させるトップページ作成
　フレームページを作る前に、フレーム内に表示させるトップページを作成しておきます。
このページは、ＨＴＭＬ基礎の基礎 前編で解説したページと基本は全く同じで、
<HTML><HEAD>・・・</HEAD><BODY>・・・</BODY></HTML>　の構造になっています。
<HTML>
<HEAD>
<TITLE>トップページ</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<CENTER>
<BR>
<H3>フレームトップページだよ</H3>
Welcome to Sample Page !!
<BR><BR>
<IMG SRC="ron_gray.jpg">
</CENTER>
</BODY>
</HTML>




ron_gray.jpg
HTMLサンプルページ (top1.html)
よくあるサイトのトップページ風に作ってみました。テキスト２行と写真１枚のシンプルなページです。

HomePage作成支援Top HomePage

■STEP3-2．フレーム内に表示させるメニューページ作成
　フレームページを作る前にもう一つ。フレーム内に表示させるメニューページを作成します。
このページも基本的なページです。メニューなので、<A HREF="リンク先">・・・</A>でリンクをはっています。
<HTML>
<HEAD>
<TITLE>メニューページ１</TITLE>
</HEAD>
<BODY BGCOLOR="#DDDDFF">
<BR><BR><BR><BR>
<FONT SIZE="2">
<A HREF="top1.html">Home</A>
<BR><BR>
<A HREF="sample09.html">うちのロン</A>
<BR><BR>
<A HREF="sample17.html">色々な犬種</A>
<BR>
</FONT>
</BODY>
</HTML>




top1.html
このページの最初に作った
フレームトップページ

sample09.html
テーブル基礎編で作ったページ

sample17.html
テーブルもうちょっと応用編で
作ったページ
HTMLサンプルページ (menu1.html)
こちらもよくあるフレームページのメニューです。

HomePage作成支援Top HomePage

■STEP3-3．いよいよフレームページ作成
　いよいよフレームページを作成します。
フレームページでは、<BODY>・・・</BODY>タグを使わず、かわりに<FRAMESET .... >・・・</FRAMESET>タグを使ってフレームの構造を指定します。ここでは、左右に２分割したフレームとして、各々のフレームに前のSTEPで準備しておいた「メニューページ(menu1.html)」と「トップページ(top1.html)」を表示させてみます。
<HTML>
<HEAD>
<TITLE>フレームサンプルページ１</TITLE>
</HEAD>
<FRAMESET COLS="120,*">
<FRAME SRC="menu1.html" NAME="menu">
<FRAME SRC="top1.html" NAME="body">
</FRAMESET>
</HTML>
 		<FRAMESET COLS="120,*">
　　　　　　　　　　　　....</FRAMESET>
フレームの構造を指定します．
　COLS="120,*"で、
　・左右に分割
　・左フレームの幅120ピクセル
　・右フレームの幅は残り全部

ちなみに上下に分割する場合には、
　ROWS="上ピクセル数 ,下ピクセル数"

<FRAME SRC="ファイル名" NAME="名前">
各フレームに表示するHTMLファイルと
フレームの名前を指定します．
HTMLサンプルページ (flame1.html)
これで、フレームページができました。但し、メニューページのリンク指定に問題がある為、このままでは完全なフレームページとして機能しません。試しにメニューのリンクをクリックしてみて下さい。

HomePage作成支援Top HomePage

■STEP3-4．メニューページとフレームページの修正
　前のSTEPで作成したページHTMLサンプルページ (flame1.html)では、メニューのリンクをクリックすると、メニューのフレームにリンク先ページが表示されてしまうので、ちょっと修正を加えます。
メニューページの <A HREF="...." >のタグ内に TARGET="フレームの名前" を追加することによって、リンク先を表示させるフレームを指定することができます。
<HTML>
<HEAD>
<TITLE>メニューページ２</TITLE>
</HEAD>
<BODY BGCOLOR="#DDDDFF">
<BR><BR><BR><BR>
<FONT SIZE="2">
<A HREF="top1.html" TARGET="body">Home</A>
<BR><BR>
<A HREF="sample09.html" TARGET="body">うちのロン</A>
<BR><BR>
<A HREF="sample17.html" TARGET="body">色々な犬種</A>
<BR>
</FONT>
</BODY>
</HTML>

 		<--- menu2.htmlで保存．






TARGET="フレームの名前"
リンク先を表示するフレーム名の指定．
フレームページの
<FRAME SRC="...." NAME="名前">
で指定した名前で指定します．






<--- flame2.htmlで保存．



メニューページを修正したので、
menu2.htmlに変更．
<HTML>
<HEAD>
<TITLE>フレームサンプルページ２</TITLE>
</HEAD>
<FRAMESET COLS="120,*">
<FRAME SRC="menu2.html" NAME="menu">
<FRAME SRC="top1.html" NAME="body">
</FRAMESET>
</HTML>
HTMLサンプルページ (flame2.html)
とりあえず、最も基本となるフレームページが完成しました。メニューのリンクをクリックして、うまく表示されることを確認してみましょう！（このフレームページ、次のSTEPでもう少し修正を加えます）

HomePage作成支援Top HomePage
Prev.
テーブルもうちょっと応用編		 Next
フレームちょっとした手直し編
Copyright(C) 2001 T.Kaze/Family Page Hiroshima