フレームを使う
よく、サイト内を区分けしているのを見かけます。
これにはいくつかの方法がありますが、その一つにフレームを使用するという方法があります。
SEOという「検索サイトにいかにヒットさせるか」というものとは相性が悪いです。
フレーム自体ではなく、フレームで指定しているページがヒットしてしまって、
そのページから動けなくなってしまうためです。
書式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>簡単なフレーム設定文書</title>
</head>
<frameset cols="20%, 80%">
<frameset rows="100, 200">
<frame name="frame1" src="contents_of_frame1.html">
<frame name="frame2" src="contents_of_frame2.gif">
</frameset>
<frame name="frame3" src="contents_of_frame3.html">
<noframes>
<body>
<p>このフレーム設定文書は、次のものを含む。</p>
<ul>
<li><a href="contents_of_frame1.html">いい感じのコンテンツ</a>
<li><img src="contents_of_frame2.gif" alt="いい感じの画像">
<li><a href="contents_of_frame3.html">また別のいいコンテンツ</a>
</ul>
</body>
</noframes>
</frameset>
</html>
フレームに対応したブラウザで上記を表示すると、以下のような感じになります。
--------------------------------------- | | | | Frame 1 | | | | | |---------| | | | Frame 3 | | | | | Frame 2 | | | | | | | | ---------------------------------------
通常のページとの違い
- 宣言部のURLがフレームを扱えるようにしてあります。
- フレーム自体を宣言しているページにはnoframes要素があり、noframe要素の中にbody要素があります。
個々の要素について
ページを縦に分ける場合
<frameset cols="20%, 80%">
この場合だと画面を20%部分と 80%部分に分けるように指定しています。
ページを横に分ける場合
<frameset rows="100, 200">
書式の場合は画面を100ピクセル:200ピクセルに分けます。
(残り部分は比例配分されるのが正しい仕様ですが...)
ページを縦に分ける場合と横に分ける場合で指定の仕方を変えてありますが、
これはどちらを使ってもかまいません。さらに、"1*, 4*"という指定も出来ます。
この場合は1つ目が1、2つ目が4の割合になるように分割されます(ページを5等分して1:4にする感じです)。
割合を指定するのはどの方式でも良いのですが、%または*を使うのが好ましいといえます。
ページを作るときはなるべく絶対的な値で指定しない方が好ましいからです。
noframes要素
framesetの中には1つだけnoframes要素を含むことが出来ます。
ここに書いた内容はフレームを表示できない場合などに表示されます
(Operaではフレームを表示する/しないを切り替えることができます)。
htmlエディタなどでページを作成するとここには何もかかれていない場合が多いですが、
何もかかれていないと「真っ白」なページが表示されてしまいます。
少なくともページがある、またはフレームを使用している程度は記述しているほうが良いと思います。
frameset要素を書いているページにスタイルシートを指定するとnoframes要素内を表示するときに反映されます。
フレーム内にページを表示する
<frame name="frame1" src="contents_of_frame1.html">
nameでそのフレーム(この場合はページの左上側)の名前を付けます。
src以降には表示したい内容を書いたページのありかを記述します。
フレームの名前はリンクで別ページを表示する場合に表示する個所を指定するために使います。
具体的には以下のようになります。
<a href="main_1.html" target="frame3">メイン1</a>
このように指定し、リンクをクリックするとフレームの右側(frame3の部分)に「main_1.html」が表示されます。
左側は変わりませんので、
「contents_of_frame1.html」と「contents_of_frame2.gif」を表示したままになります。
フレームの名前は「アルファベットで始めること」との規定があります。
これはアンダーバーで始めるものには予約語(すでに動作が決まっている語)が
いくつかあるためもあると思います。
予約語
_blank
指定された文書を名前のない新規ウインドウに表示します。
_self
指定された文書がリンクがあるフレームに表示されます。
例えば上の例でframe3で表示しているページのリンクに「_self」が指定してある場合、
frame3にリンク先のページが表示されます。
_parent
指定された文書が、現在のフレームの直接の親である FRAMESETに表示されます。 これは、現在のフレームに親フレームが存在しない場合、_selfと同等の動きになります。
_top
全てのフレーム割を解消し、元ウインドウ全体に指定文書が表示されます。
これは、現在のフレームに親が存在しない場合、 _selfと同等の動きになります。
「_self」「_parent」を指定すると場合によってフレーム分割の状態が保持されてしまいます。
このため、フレームを使ったページからの他のサイトへのリンクには
「_top」または「_blank」を指定するようにしましょう。
他のサイトの内容を自分のサイトのように見せるのはマナー違反です。