フレーム

WEBページの中には、メニューが分離されてて、メニューのアイコンをクリックするとその内容がもう片方のフレームに表示される、そのようなページがあります。例えば分科会情報のページなどがそのような構造になっています。このようなページを作る方法を紹介していきたいと思います。

フレームを表示する

２フレームに分かれたページを作る場合、ページ全体のHTMLファイルと個々のフレームそれぞれのHTMLファイル、全部で3つのファイルを用意する必要があります。
まず、ページ全体のHTML文書の中身を次のように書いてみます。

<html>
<frameset cols="200,*" border="10">
<frame src="htext1.htm" name="left">
<frame src="htext2.htm" name="lright">
</frameset>
</html>

表示

<frameset>はフレームに関する設定を行うタグで、この中で個々のフレームに関する設定を行います。左右に分割したいときはcols、上下に分割したときはrowsを使います。次に、分割する幅をコンマで区切って指定します。上の場合200,*と指定すると左200ピクセルが固定になり、逆に指定すると右の幅が固定になります。また、30%,70%のように割合で示すこともできます。また、このタグはbodyタグの内部に記述しないで下さい。border属性はフレームとフレームの隙間を埋めるスペースの幅の設定です。
<frameset>タグの中の<frame>タグでは個々のフレームに関する設定を行います。src属性でそこに貼り付けたいHTML文書を指定します。nameはそのフレームに名前をつけるというタグで、後でこれが重要になってきます。別にleft,rightである必要はありません。

フレームへのリンク

こうして無事フレームを表示させることができたわけですが、例えばここで貼ってあるリンクに飛んでみると、そのリンク先の内容がそのフレーム内に表示されるはずです。しかし、例えば左側がメニューで右側がそのコンテンツを表示する、というWEBページをつくるとき、左のフレームから右のフレームを操作する方法が必要になります。それについて説明します。
具体的にメニュー付きのWEBページを作って見ましょう。<frameset>タグの書かれたページをindex.html、トップページをtop.html、メニューのページをmenu.html、リンク集のページをlink.htmlとします。
まず、index.htmlは次のようになります。

index.html
<html> <frameset cols="120,*" border="10"> <frame src="htext1.htm" name="left"> <frame src="htext2.htm" name="lright"> </frameset> </html> 表示

top.htmlは次のようになります。<a>タグに特別なことをしなくても貼られてるリンクを選択するとこのフレーム内に内容が表示されるのでそれで十分です。

top.html
<html> <body> ようこそ××のページへ。リンク集は<a href="link.html">こちら</a>。 </body> </html>

問題はmenu.htmlです。今まで通りにリンクを貼ると、その内容がこのフレーム内に表示されてしまうのでそれを防ぐため<a>タグのtarget属性をrightにします。

menu.html
<html> <body marginheight="2" marginwidth="2" topmargin="2" leftmargin="2"> <a href="top.html" target="right">TopPage</a><br> <a href="link.html" target="right">Link</a><br> </body> </html>

<a>タグのtarget属性は、リンクする場所を指定する属性です。また、このrightというのは先ほどindex.htmlの<frame>タグのname属性で指定した値です。要するにname属性を指定することでそれに対するリンクが貼れるようになるということですね。また、<body>タグにmarginheight="2"などの設定がされていますが、これはフレーム内の余白を設定する属性で、これを設定しないと余白が大きすぎて違和感を感じるからです。
最後にlink.htmlをつくります。

link.html
<html> <body> <a href="http://www.u-tokyo.ac.jp/" target="_top">東京大学</a><br> </body> </html>

リンクのページはよくありますが、ここで普通にリンクを貼ると、リンク先のページがフレーム内に表示されるということが起こってしまいます。これを防ぎ、リンク先のページをフレーム解除して表示したい場合は、target="_top"としてください。これはリンク先の対象をページ全体にするという意味で、このほかにも自分自身を表す_self、親フレーム(ここではindex.htmlを指す)を表す_parentなどがあります。
これでフレームつきのページに関する説明は終わりましたが、早く終わりすぎたのでもう少し説明を加えることにします。
ブラウザの中にはフレームを表示できないページもあるようです。このようなページを持つ人からも見られるよう、WEBページを設計する際はフレームありのページとなしのページを作るとより親切かもしれません。
また、googleなどで検索にかけられた場合、index.htmlでひっかかる場合は極めて少なく、たいていの場合top.htmlなどでひっかかる場合が多いです。この場合、トップページだけがページ全体に表示されてしまい、メニューが表示されない、という事態が発生してしまいます。これを防ぐ方法を教えましょう。<body>タグに次のような文を加えてください。
<body onLoad="if(top.frames.length==0){location.replace('index.html');}">
これは、このページがロードされたときに、フレームの数がゼロだったら(つまりtop.htmlがページ全体に表示されていたら)このページをindex.htmlに置き換える、という処理をやっています。これはJavaScriptといわれるHTML文書内に埋め込むことができる簡易言語です。とりあえずこの説明は後回しにします。

戻る