フレームのページを作る

フレームタグはページを分割したい時に用います。ページを上下や左右に分割したりすることでコンテンツが多いページでも閲覧しやすいホームページを作ることができます。

■フレームのオプション

フレームタグのオプションで基本的なものをいくつか挙げてみます。

オプション	説明
bordercolor	フレームの枠の色を指定します。
src	フレームのソースのURLを示します。
name	フレーム名を指定します。
scrolling	scrolling="yes"、scrolling="no"でスクロールバーを表示するかしないかを指定します。
height	フレームの高さを指定します。
width	フレームの幅を指定します。
frameborder	フレームの枠の有無を指定します。frameborder="yes" frameborder="no" frameborder="1"のように指定します。

■フレームセットのオプション

次にフレームセットのオプションをいくつか挙げてみます。

オプション	説明
cols	ページを縦に分割します。比率はCOLS="18%,80%"、 COLS=",20%"のように指定し逆にcols="100%,"と *を数字の後ろにもってくるとframeborder="1"としてもフレームが見えないページになってしまいます。
rows	ページを横に分割します。指定の仕方はcolsと同じ要領でできます。
border	フレームの枠のサイズを指定します。
bordercolor	フレームの枠の色を指定します。
frameborder	フレームの枠の有無を指定します。frameborder="yes" frameborder="no" frameborder="1"のような指定をします。

■フレームのページを作る

では上記のオプションを用いて縦に分割された基本的なページを作ってみます。まず、フレームページ本体のファイルを作ります。

ソース frame.html

<HTML>
<HEAD>
<TITLE>MyHomePage</TITLE>
</HEAD>
<FRAMESET COLS="100,*">
<FRAME SRC="menu.html" name="hidari">
<FRAME SRC="main.html" name="migi">
</FRAMESET>
</HTML>

次に左のページのファイルを作ります。

ソース menu.html

TARGET="migi"はメニューの項目（日記1～3のページ）を右側のページに表示するということでありname="migi"に対応しています。

次に右のページのファイルを作ります。

ソース main.html

<HTML>
<HEAD>
<TITLE>メイン</TITLE>
</HEAD>
<BODY bgcolor="blue">
ようこそわたしのホームページヘ
</BODY>
</HTML>

次にメニューの日記1、日記2、日記3のファイルを作ります。

ソース nikki1.html

<HTML>
<HEAD>
<TITLE>日記1</TITLE>
</HEAD>
<BODY>
今日は晴れだった。
</BODY>
</HTML>

ソース nikki2.html

<HTML>
<HEAD>
<TITLE>日記2</TITLE>
</HEAD>
<BODY>
今日は雨だった。
</BODY>
</HTML>

ソース nikki3.html

<HTML>
<HEAD>
<TITLE>日記3</TITLE>
</HEAD>
<BODY>
今日は雷だった。
</BODY>
</HTML>

以上で全部で6つのファイルができました。これらをまとめると下記のようなフレームページができます。

サンプルページ

Follow @hp_master_2003

■ その他の項目

・インラインフレームを作る