HTMLでフレームを設定する

よし、フレームページ作るぞ。既に数ページ作ってる人用の説明なので、０から作る人は「1時間で作る」を読んで、基本ページを作っておくこと。自分のページを既に作っている人も、同じ手順でフレームを使う事ができる。

まず何を用意すればいいでしょう？出来るだけ簡単に作りたいんですけど。

手順を追って説明しよう。<frame>タグの詳しい説明は後回し。書いてあるとおりに進めてみてくれ。

まず自分のホームページが入っているフォルダを開いて、「index.html」を「top.html」に変更する。ファイル名の変え方は「右クリック→名前の変更」だ。「top.html」のファイル名は半角英数字なら何でもよい。

「top.html」をコピーして新しくファイルを作り、ファイル名を「menu.html」とする。コピーの方法は「top.html」の上で「右クリック→コピー」をしてから、同じフォルダ内で「右クリック→貼り付け」だ。出来上がった「コピー〜top.html」のファイル名を「menu.html」に変更すればOK。

次に新しくファイルを作ってファイル名を「index.html」に変更する。作り方はフォルダの中で「右クリック→新規作成→テキストドキュメント」。

作った「index.html」をメモ帳（他のテキストエディターでもOK）で開く。開いたらフレーム設定のソースを入力する。

「index.html」のソース

ここで「index.html」をブラウザで確認してみてくれ。フレームになってるだろ？

あ、出来てます。でもメニューの所が右のページといっしょですね。

うむ、左のメニュー部分にあたる「menu.html」は「top.html」をコピーしただけだからな。ついでに左メニューのリンクをクリックすると？

うぁ、左側でページが変わりました。これ、駄目ですよね。

フレームを使う時に、注意しないといけないのがターゲットフレームの指定だ。もう一度「index.html」のソースを見てくれ。↓の部分でname="*"と指定してるよな。

<frame src="menu.html" name="menu">
<frame src="top.html" name="main">

これは各フレームに名前を付けているのだ。つまり左のメニューフレームには「menu」という名前が、右のフレームには「main」という名前がついてるわけだ。
※フレーム名は半角英数字なら何でもかまわない。

ということは<a></a>でリンクする時に、フレームの名前を指定しないといけない？

そのとおり。それを踏まえて「menu.html」 の中身を変更しよう。いらない部分を削除してリンク部分にフレームのターゲット指定をしよう。

「menu.html」のソース
※「1時間で作る」で作ったページではなく、前から作っていた自分のページを
改造する場合は↑のソースのリンク部分を参考に変更してください。

出来ました！フレームの分け方と、リンクする時のターゲットフレーム指定を覚えれば、簡単ですね。

もう一つだけ注意。出来上がったフレームページを開いてリンク集から他のページへ飛んでみてくれ。

あ、右側のフレームにページが表示されました。

これをすると、まるでリンク先のページが自分で作ったページのように誤解されてしまう。リンク先の管理人さんに失礼なので、リンク部分のターゲット指定をtarget="_top"かtarget="_blank"にしておこう。また右フレームにメニューが重複して表示される場合もリンクをtarget="_top"にすれば表示されないようになる。

※フレームを追加する前に各ページから「index.html」へリンクしていた個所は、指定先を「top.html」に変更するか、target="_top"指定を追加してください。

最後にノーフレーム対策をして終わりだな。

あれ、これで終わりじゃないんですか？

「index.html」のソースを開いてみてくれ。ソースの下のほうに<noframes></noframes>という部分があるだろ？ここに「menu.html」のソースの中の<a></a>で指定したリンク部分をコピーしておこう。

「index.html」にソース追加

ソースを変更しても特に何も変わりませんでしたけど、何か意味あるんですか？

フレームページに対応していないブラウザで見た時に<noframes></noframes>の間に入力した内容が表示されるのだ。

ブラウザってホームページを見る時に使うIEとかですよね。フレームに対応してないのがあるんですか？

結論から言うと、ほとんどない。インターネットが普及しはじめた頃には、対応してないブラウザもあったが、今ではフレームページが見れないブラウザを探すほうが大変だな。実は<noframes></noframes>にリンク部分を入力するのは、どちらかというと検索エンジン対策なのだ。

つまり<noframes></noframes>の間にメニューのリンクをしておけば、ロボット型の検索エンジンにも登録されやすいってことですね。

そういうこと。ただし、フレームを使ったページと使っていないページを比べると、使っていないほうがロボット型の検索エンジンには登録されやすいという話もある。フレームは管理の手間が省けるのが魅力だけども、そういった弱点はあるからフレームを使うかどうかは、よく考えてから導入しよう。