Wrong HTML - フレームを使う

HTML 4.01 Frameset

画面をメニュー(ナビゲート用のA要素が並んでいるもの等)とメインコンテンツに分割して表示したりするためには、フレームセットを使用することで実現できます。実際に表示させるメニューとメインコンテンツは今まで通りに作成して用意しておきましょう。今回はフレームを設定するためのHTML文書の説明です。

今回は左右に2分割するとして、ファイル名は分かりやすいように、menu.html、main.html、frame.htmlとしておきます。さっそくframe.htmlにHTML文書を書いていきましょう。まずはDOCTYPE宣言

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

今までのDOCTYPEと少し違いますね。名前の通りですがHTML4.01のフレームセット用のDOCTYPE宣言です。続いてHeadとTitleも加えましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<title>フレーム設定</title>
</head>

さて、続いてですがBodyを加えません。よくある間違いなのですが、FramesetではBodyではなくFrameset要素を使用します。そして、この要素の属性として分割の方法を示す、cols,rows属性が用意されています。colsは左右に、rowsは上下に分割する際に使用しますので、今回は

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<title>フレーム設定</title>
</head>
<frameset cols="20%,80%">

と、このように左右にそれぞれ20%、80%の割合で分割するように指定してみました。この割り付けの指定の方法には絶対値も使用できますが、環境に依存するので使用しないほうがいいでしょう。

また、相対的な指定方法として、col="20%,1*"のように[i*]を使用することもできます。これは先に%やピクセルで指定した分を割り当て、残りを[*]についた整数の比率で分割します。

col="40%,1*,2*"として3分割すると、最初に40%を割り当てていますので残りの60%を1対2の比率で割り当てられます。また、1*は*だけでもいいです。

次はそれぞれのフレームに表示する内容の指定です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<title>フレーム設定</title>
</head>
<frameset cols="20%,80%">
<frame src="menu.html">
<frame src="main.html">
</frameset>
</html>

とりあえずこれだけで2分割としてフレームに対応したUAでは表示されますが、未対応のUAにも配慮しましょう。使用する要素はNoframesです。ここでBodyが出てきます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<title>フレーム設定</title>
</head>
<frameset cols="20%,80%" title="(サイトのタイトルなど)">
<frame src="menu.html" title="メニュー">
<frame src="main.html" title="文書">
<noframes>
<body>
<p><a href="noframe.html">フレーム未対応用のページ</a></p>
</body>
</noframes>
</frameset>
</html>

Noframesの内容として未対応UAを使用しているユーザーに対するリンクなどを指定しておけばいいでしょう。

また、各フレームにTitle属性を加えます。これはWeb Content Accessibility Guidelines 1.0にあるようにフレームの特定や操作を容易にするためです。

Frame要素のName属性

これまでに作った文書をブラウザなどで表示するとなにかおかしいことがあると思います。左側にメニューを表示していますが、その中のリンクをクリックすると内容が左フレームに表示されてしまうことです。右フレームに表示できるようにするためにフレームに名前をつけましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<title>フレーム設定</title>
</head>
<frameset cols="20%,80%" title="(サイトのタイトルなど)">
<frame src="menu.html" title="メニュー" name="menu">
<frame src="main.html" title="文書" name="contents">
<noframes>
<body>
<p><a href="noframe.html">フレーム未対応用のページ</a></p>
</body>
</noframes>
</frameset>
</html>

Frame要素にName属性を追加しました。次はmenu.htmlを修正しましょう。A要素にTarget属性を追加するだけです。

menu.htmlの例(Bodyの内容だけ)
<ul>
<li><a href="./index.shtml" target="contents">HOME</a></li>
<li><a href="./contents1.html" target="contents">Contents1</a></li>
<li><a href="./contents2.html" target="contents">Contents2</a></li>
</ul>

これで右のフレームに内容が表示されます。尚、このTarget属性を使用したことで、文書型はLooseになります。

Framesetの入れ子

Framesetは入れ子にすることができますので、いろいろと試してみましょう。次の例ではどうなるでしょうか?実際に試してみてくださいね。(各フレームのTitleは除いています。)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<title>フレーム設定</title>
</head>
<frameset cols="20%,80%">
<frame src="menu.html"name="menu">
<frameset rows="70%,*">
<frame src="main.html" name="contents">
<frame src="footer.html" name="footer">
</frameset>
<noframes>
<body>
<p><a href="noframe.html">フレーム未対応用のページ</a></p>
</body>
</noframes>
</frameset>
</html>