フレーム基礎編
超簡単HTML基礎

ここでは、フレームを使ったページ作成について紹介しています。
フレームページを作成するには、フレームページの構造を指定する一つのHTMLファイルと各フレームに表示させるHTMLファイルが必要になります。うまく使いこなすと、格好良くてページ内を回りやすいフレームページ・・・けっこう簡単に作ることができますので、是非挑戦してみて下さい。
STEP3-1.フレーム内に表示させるトップページ作成
 フレームページを作る前に、フレーム内に表示させるトップページを作成しておきます。
このページは、HTML基礎の基礎 前編で解説したページと基本は全く同じで、
<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)
よくあるサイトのトップページ風に作ってみました。テキスト2行と写真1枚のシンプルなページです。

HomePage作成支援Top HomePage

STEP3-2.フレーム内に表示させるメニューページ作成
 フレームページを作る前にもう一つ。フレーム内に表示させるメニューページを作成します。
このページも基本的なページです。メニューなので、<A HREF="リンク先">・・・</A>でリンクをはっています。
<HTML>
<HEAD>
<TITLE>メニューページ1</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>タグを使ってフレームの構造を指定します。ここでは、左右に2分割したフレームとして、各々のフレームに前のSTEPで準備しておいたメニューページ(menu1.html)トップページ(top1.html)を表示させてみます。
<HTML>
<HEAD>
<TITLE>フレームサンプルページ1</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>メニューページ2</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>フレームサンプルページ2</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