夏休みの宿題にホームページを作ろう

「ユキ。俺、もう、お前との関係はフレームセットにしたいんだ」
「素直に別れようって言おうよ」

17.フレームで画面を分断する

サイトメーカー「はい!今回は闇の魔術師・フレームセットの最大最強の術、フレームを解説致します!」

ホーム君「名前からして炎系の呪文だね!?」

サイトメーカー「全然違います!フレームを使うと、画面を二つに分断することが出来るのです!!」

ホーム君「……パソコンのディスプレイが壊れる?」

サイトメーカー「いいえ!!パソコンのディスプレイは壊れません!画面が分かれるのです!早速解説していきましょう」

サイトメーカー「フレームを使うには、htmlが書かれたファイルを三つ用意する必要があります」

ホーム君「三つも!?さすが最強魔術。イケニエを三人捧げることで、世界を崩壊させる最強の炎術を──」

サイトメーカー「まずはファイルその1。ファイル名は何でもいいです。えーっと、今回はとりあえずoyabun.htmlとでもしておきますか。中身にはこんな感じに書きます」

<!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="100,*">
<frame src="hidari.html">
<frame src="migi.html">
</frameset>
</html>

親フレーム

ホーム君「おお……闇の魔術師のDOCTYPE宣言が!!そして新しいタグ<frameset>と<frame>が登場!!さらにさらに<body>タグが無い!!」

サイトメーカー「そして、あと二つのファイル。こちらも名前は何でもいいのですが、今回の例ではhidari.htmlとmigi.htmlとしました。まずはhidari.html」

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>左側に表示されるよ!</title>
</head>
<body>
<p>左側に表示されるよ</p>
</body>
</html>

左の子フレーム

サイトメーカー「そしてmigi.html」

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>右側に表示されるよ!</title>
</head>
<body>
<p>右側に表示されるよ</p>
</body>
</html>

右の子フレーム

ホーム君「あれ?hidari.htmlとmigi.htmlのDOCTYPE宣言はさまよえる旅人、transitionalのDOCTYPE宣言なんだね」

サイトメーカー「さて。書き終わったらoyabun.htmlのページへアクセスしてみましょう」

フレームセット

ホーム君「おぉ!!画面が右と左に分かれてる!!」

サイトメーカー「そうです。それでは簡単にタグの解説をします」

サイトメーカー「<frameset>は<frame>を囲うためのタグです。<frameset>の中にいくつでも<frame>を入れることが出来、その数に応じて画面が二つに分かれたり三つに分かれたり四つに分かれたりします。」

ホーム君「へー。2つ以上にも分けられるんだ」

サイトメーカー「<frameset>のcols属性で、中に入っている<frame>の画面のそれぞれの横幅を指定します。今回の例では"横幅100ピクセル"と"残りの横幅"を指定しました」

ホーム君「"残りの横幅"を指定したい時は数字じゃなくて記号の*を使うんだね。記号の*はどのキーを打てば出てくるの?」

サイトメーカー「Shiftキーを押しながら、ひらがなの"け"と書かれたキーを押すと出てきます(キーボードの種類によって異なるかもしれません)」

サイトメーカー「<frameset>の中の<frame>タグのsrc属性ではそれぞれどのファイルを読み込むかを指定します」

ホーム君「指定するファイルは闇の魔術師フレームセットのDOCTYPE宣言じゃなくていいんだね」

サイトメーカー「はい。フレームセットのDOCTYPE宣言はあくまでも"複数の分断された画面を一度に表示する画面"にのみ使用します。なので、指定するファイルのDOCTYPE宣言はフレームセットのDOCTYPE宣言とは限りません──が!!」

ホーム君「が?」

サイトメーカー「フレームセットのDOCTYPE宣言を使ってもいいですし、もちろん厳格なる騎士ストリクトのDOCTYPE宣言を使っても構いません」

ホーム君「え?どういうこと?さまよえる旅人トランジショナルじゃないといけないんじゃないの?」

サイトメーカー「フレームセットのDOCTYPE宣言は、"画面を分割するページに使用する"DOCTYPE宣言ですが、中に含まれている個々のページはその個々のページに合わせたDOCTYPE宣言を使用してください。例えば、migi.htmlのファイルの中身が厳格なる騎士ストリクトのhtmlで書かれたファイルなら」

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>ストリクトでも構わんよ!</title>
</head>
<body>
<p>ストリクトでも構わんよ!</p>
</body>
</html>

サイトメーカー「というように、ストリクト宣言されたファイルをmigi.htmlに書いても構いませんし、なんならmigi.htmlファイルに」

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>フレームでも構わんよ!</title>
</head>
<frameset cols="200,*">
<frame src="別のファイル名">
<frame src="また別のファイル名">
</frameset>
</html>

サイトメーカー「と書いて、別のフレームセットのページを指定することも可能です」

ホーム君「なるほどー。フレームセットの中に別のフレームセットのページを入れちゃうこと出来るんだ」

サイトメーカー「今回教えたフレームセットを利用すれば、メニューを左側に。コンテンツを右側に。と言う風なページを作れちゃいますが、実際の例の前に次回は上下に分断した例をお見せしたいと思います」

ホーム君「え!上下にも分断できるの!?」

このエントリーをはてなブックマークに追加