フレームページを作ろう

簡単なフレームページをつくろう

ここでは、HTMLの基本を理解していることを前提にしています。いきなりフレームに挑戦するのは、水泳教室に通い始めた人が、いきなりドーバー海峡横断遠泳に挑戦するようなものです。（笑）　右上の「メニュー」ボタンをクリックして、最初からお読みいただき、基本を勉強していただくと、理解が早いと思います。
　なお、限りなく初心者に近いせんむが書いていますので、間違い等を発見された方は、ご一報いただければ幸いです。

フレームの基礎知識

フレーム定義ファイルの基本的なHTML

フレームファイルの実際例（練習用）

練習用ファイルを作ってみよう

実際にフレームページを表示してみよう

　　
　フレームの基礎知識

フレームページを作るためには、最低３個のファイルが必要です。
左右に分割したフレームで左側に「menu.htm」、右側に「top.htm」を表示させる場合、「menu.htm」「top.htm」の２個のファイルのほかにフレームを定義するファイルが必要になります。

フレームページにリンクする場合は、内容のページではなく、そのフレームを定義したファイルにリンクすることになります。

たとえば、「index.html」をフレーム化する場合は「index.html」にフレームの定義を書いて、「menu.htm」や「top.htm」を表示させることになります。

この場合「index.html」には、表に見える本文や画像はありません。どのようにフレームとして表示するかの情報が書かれているだけですので、実際に見えるのはフレームとして表示させるようにリンクを設定した「menu.htm」とHPの本文である「top.htm」ファイル（通常のHTMLファイル）です。

この例では便宜的に「menu.htm」と「top.htm」というファイル名を使っていますが、ファイル名は半角英数字であれば、なんでもOKです。たとえば「mokuji.htm」「contents.htm」でもOK。

　【「index.html」をフレーム化した時の３個のファイルの例】

「index.html」

フレームページ

表面には見えないフレームの定義ファイル

外部のHPからは、このファイルにリンクします

「menu.htm」

メニューページ

常に表示される目次のファイル

通常は、他のページへのリンクを書きます

「top.htm」

メインページ

普通のHPのファイル

通常は複数用意します

実際には、たとえば下記のように表示されます。実際のHPでは左側の目次のリンクをクリックすると、該当のページが右側のフレームに表示されます。

TOP

プロファイル

掲示板

「menu.htm」

せんむのホームページへ

ようこそ

「top.htm」

TOP

　　
　フレーム定義ファイルの基本的なHTML

フレームファイルは基本的に下記のようになります

<html>
<head>
<title>～</title>
</head>
<frameset　・・・・・・・・・・・・・・・・・・・　>
<frame src="◇◇.htm" name="○○">
<frame src="◆◆.htm" name="●●">
<noframes>
<body>
フレーム未対応ブラウザを使っている人のためのコメント
</body>
</noframes>
</frameset>
</html>

フレームの定義（<frameset>から</frameset>の間に書きます）

1.左右に分割するか、上下に分割するかをきめる
　（「frameset cols」は左右に分割、「frameset rows」は上下に分割）

2.左右または上下に分割する割合をきめる
　（frameset cols="○○%,*"　または　frameset rows="○○%,*" ）

3.フレームの境界線の性質をきめる
　（frameborder="1" framespacing="5" bordercolor="color"）

4.左右、または上下に分割されたフレームに表示するファイルを指定する
　（frame src="○○"）

5.左右、または上下に分割されたフレームの名前をつける（半角英数字）
　リンク先のページを表示する場所（フレーム）を示します
　１行目が左（または上）のフレーム、２行目が右（または下）のフレームになります
　（frame name="○○"）
　（frame name="●●"）

6.分割されたフレームのそれぞれの性質をきめる
　（frame scrolling="auto"　または"no"）

7.フレーム未対応ブラウザを使っている人のためのコメント
　（<noframes>～</noframes>）

TOP

　　
　フレームファイルの実際例（練習用）

テキストエディター（メモ帳など）で下記のように書いてから、名前をつけて保存しましょう。ここでは、名前を「frame.htm」とします。ファイルの種類は「html」または「html」にします。「txt」で保存してしまったら、「名前の変更」で拡張子を「.html」または「.htm」に変更しましょう。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<title>フレームページの練習</title>
</head>
<frameset cols="20%,*" frameborder="1" framespacing="5" bordercolor="pink">
<frame src="menu.htm" name="FRAME1" scrolling="auto">
<frame src="top.htm" name="FRAME2" scrolling="auto">
<noframes>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
このページを表示するには、フレーム対応のブラウザが必要です。 
</body>
</noframes>
</frameset>
</html>

「フレーム」ファイルで<frameset> に付け加える属性（性質）の例

ここを変更することによって、いろいろフレームを変更できます。
数字を適当に変更して試してみてください。

cols="20%,*"
フレームを左右に分割する場合の割合を指定します。左側と右側の割合をカンマ「,」で区切って書きます。アスタリスク「*」は「残りのすべて」という意味を示します。この場合、左側がウィンドウの２０%、左側は残りすべて（８０％）という意味になります。数字のみだとピクセル指定になります。
フレームを上下に分割する場合は「cols」の代わりに「rows」を使います。

frameborder="1"
境界線を表示する場合は1を、表示しない場合は0を指定します。

framespacing="5"
フレームの境界線の太さを指定します。

bordercolor="pink"
フレームの境界線の色を指定します。
「pink」の部分に色の名前、またはカラーコード（16進数の色番号）を書きます

<frame src="menu.htm" name="FRAME1" scrolling="auto">
<frame src="top.htm" name="FRAME2" scrolling="auto">
最初に書くのが左側のフレーム部分、
次が右側のフレーム部分に表示するファイル名。
（上下に分割する場合は最初が上のフレーム、次は下のフレームになります）

name="FRAME1"
左側（または上側）フレームの名前です。（お好きな名前でOK、ただし半角英数字）

name="FRAME2"
右側（または下側）フレームの名前です。（お好きな名前でOK、ただし半角英数字）

scrolling="auto"
自動スクロールさせる設定です。（書かないと自動スクロールになります）
「scrolling="no"」にすると、スクロール禁止になりますが、見る人のPC環境によってはスクロールしないと見えない場合もありますので注意。

<noframes>～</noframes>
これはフレームに対応していないブラウザを使った時に表示されるコメントです。ここに、TOPページへのリンクを貼ってあげると、さらに親切です。

その場合、TOPページの中に各ページへ飛ぶリンクを書く必要があります。できれば各ページにも、それぞれリンクを書くといいですが、少なくともTOPページへ戻るリンクは設定しましょう。

TOP

　　
　練習用ファイルを作ってみよう

左側フレームの目次をクリックすると、右側フレームにＴＯＰページ、プロフィールのページ、リンク集の各ページを表示するようにする練習です。上で作成した「frame.htm」の他に下のようなファイルを作りましょう。内容（本文）は適当に変えてください。

テキストエディター（メモ帳など）で下記のように書いてから、それぞれ名前をつけて保存しましょう。ファイルの種類は「html」にします。「txt」で保存してしまったら、「名前の変更」で拡張子を「.html」または「.htm」に変更しましょう。ここでは、「.htm」に統一しています。ファイル名はもちろん、拡張子が違ってもエラーになりますので注意してください。

「menu.htm」ファイル

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<title>メニュー</title>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">

<a href="top.htm" target="FRAME2">TOPページ</a>
 

<a href="profile.htm" target="FRAME2">プロフィール</a>
 

<a href="link.htm" target="FRAME2">リンク集</a>
</body>
</html>

【注意】「FRAME2」の部分は「frame.htm」で設定した名前にしてください。大文字、小文字も区別しますので注意してください。

「top.htm」ファイル

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<title>ＴＯＰページ</title>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">

ここがＴＯＰページ
</body>
</html>

「link.htm」ファイル

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<title>リンク集</title>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">

ここがリンク集のページ
</body>
</html>

「profile.htm」ファイル

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<title>プロフィールページ</title>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">

ここがプロフィールのページ
</body>
</html>

通常、「menu.htm」ファイルにメインページへのリンクを貼ります。この時リンク先のページがメインのフレームに表示されるようにする必要があります。

たとえば、「TOPページ」というテキスト（文章）の部分をクリックすると右側フレームに「top.htm」が表示されるようにするには・・・・・・・・・・・

<a href="top.htm" target="FRAME2">TOPページ</a>　と書きます。

重要なのは「target="FRAME2"」と入れることです。
これによって「TOPページ」の部分をクリックすると「frame.htm」で設定した「FRAME2」という名前のフレーム（右側フレーム）に表示されるようになります。これを書かないと、「top.htm」が同じフレーム（左側）内に表示されてしまいます。
「FRAME2」は好きな名前にできますが「frame.htm」で設定したものと同じにしてください。

「TOPページ」の部分を中央揃えするタグです。

<meta http-equiv="content-type" content="text/html; charset=shift_jis">

ブラウザに対するHTMLの宣言だそうですが、詳しくはわかりません。深く考えずに書いた方がいいと思います。 content="text/html; charset=shift_jis"は漢字コード（キャラクタセット）です。これを設定しておくと、文字化けしません。この例では、シフトJISに設定してあります。

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">

は背景の色がwhite、標準の文字の色がblack、リンクしている部分の文字の色がblue、一度クリックしたリンク部分の色がpurple、マウスを乗せたときの文字の色がredと言う意味です。ここは自由に変更できます。

TOP

　　
　実際にフレームページを表示してみよう

出来上がった「frame.htm」「menu.htm」「top.htm」「link.htm」「profile.htm」の各ファイルを同じ場所に保存します。保存場所はとりあえずデスクトップでもOKですが、ばらばらにおくと管理しにくいですので、すべてのファイルをひとつのフォルダの中に入れるようにしましょう。

「frame.htm」をクリックしてみましょう。

フレームページがでましたか？

左側フレームの目次をクリックして、右側に該当のページが表示されれば成功です。

うまく表示されない場合は、「表示」→「ソース」とクリックすると、「frame.htm」のHTMLソースが見られます。間違ったところを修正してから上書き保存し、ブラウザの更新ボタンを押してみましょう。きちんと修正が出来ていれば、正常に表示されるはずです。

リンクがおかしい場合は、目次ページのHTMLが間違っていることが考えられます。目次ページ（左フレーム）の中の何もないところで右クリック、「ソースの表示」で「menu.htm」のHTMLソースが見られますので、上記のやり方で修正しましょう。

さらに詳しく知りたい方は「とほほのWWW入門」をおすすめします。

TOP