さてさて、ＨＰ作成講座、脱初心者編をスタートします。
このＨＰ作成講座も、ネットスケープでの表示については確認しません。
いよいよ、さらに細かな内容に入っていきます。
そうすると、いっそうブラウザによる表示の差が大きくなります。
「初心者のためのＨＰ作成講座」のときもそうでしたが、でも、大体どのブラウザでも表示できる内容にとどめました。
この脱初心者編では、ますますＩｎｔｅｒｎｅｔ Ｅｘｐｌｏｒｅｒ向きの内容になります。
と言うわけで、まだ紹介していなかったタグからお話ししましょう。
◆
画面を分割して、それぞれに別のページを表示する方法です。
サイコロＴｏｗｎ！にちょうど見本がありますので、
こちらを見てください。
画面が３つに分割されていますね。
このようなページを作る方法です。
この例では、３つのＨＴＭＬファイルをそれぞれの分割された画面に出しています。
このように分割した画面のことをフレームと言います。
このために使うのは、
<frameset></frameset>です。
ま、いくつにでも分割できますが、まずは２つに分けるやり方からお話ししましょう。
まず、このように横方向に２つに分割するとします。
ここで仮に、左のフレームに menu.htmlというＨＴＭＬファイルを表示して、右のフレームに main.htmlというＨＴＭＬファイルを表示させるとすると・・・・・・
必要なものは、menu.htmlというファイルと
main.htmlというファイルに、もう一つ！、<frameset></frameset>（フレームタグ）を記述したＨＴＭＬファイルです。
つまり、区切り方を指定したＨＴＭＬファイルが１つ余分に必要なのです。
では、具体的にどんなものか。（
<!-- -->で囲まれた部分はコメントです。）
|
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=x-sjis">
<title>タイトル</title>
<frameset cols="50%,50%">
<frame src="menu.html" name="hidari"><!--（左から１番目）-->
<frame src="main.html" name="migi"><!--（左から２番目）-->
</frameset>
</head>
<body>
</body>
</html>
|
というふうにＨＴＭＬファイルを作ります。そして<head>〜</head>の中に書きます。
<body>〜</body>には何も書きません。
そして、そのファイルを”好きな名前．ｈｔｍｌ”と拡張子をｈｔｍｌにして、つまりＨＴＭＬファイルとして作成します。
まず、<frameset cols="50%,50%">は、
colsが横方向の分割を示しています。
"50%,50%"というのは、このページを見る人のブラウザのウィンドウ横幅全体の５０％ずつに（つまり半分に）分割すると言うことです。
もちろん好きなように・・例えば20%,80%というように指定できます。
%で指定すると、見ている人のブラウザのウィンドウの何％のサイズかということになります。
ただ、これだと見る人のウィンドウの大きさによって実際に表示される幅が変わりますので、例えば左のページの幅を固定したいときは"150,*"というように指定します。
この場合は、左の方が１５０ピクセル、そして右の方がその残り（ *は、残りを示す）ということになります。
１５０ピクセルとは、↓この長さです。（ 150pxと正式には書きます。)
ちなみに２５０ピクセルは↓この長さ。
そして、"*,250"と書くと左側の方が残りの幅で、右の方が２５０ピクセルの幅になります。
◆
その下に書いてある<frame src="menu.html" name="hidari">ですが、これは左側に表示したいＨＴＭＬファイルを指定しています。
その下の<frame src="main.html" name="migi">は、右側に表示したいＨＴＭＬファイルの指定です。
横方向に分割する場合は、このように左のページからから順番に記述していきます。
それによってどのファイルがどの位置に表示されるかが決まります。
src="menu.html"は、表示したいファイルのアドレスです。絶対アドレスでも相対アドレスでもかまいません。
name="hidari"は、それぞれの分割された画面に対して、適当な名前を付けておくのです。
そのように名前を付けておくと、実は後で役立ちます。（好き何前を適当につけておきます。もちろん半角ローマ字で！）
そして、最後に</frameset>をお忘れなく！
◆
さて、横方向だけではなく、縦方向にも分割できます。
縦方向の場合、「横方向が、cols= 」だったのに対して、縦方向は rows= というふうに書きます。
すると、左の図のように、縦方向の分割になります。
それ以外には横方向との違いはありませんが、もちろん表示するＨＴＭＬファイルの指定は、上に表示するものから順番に記述していきます。
横方向の例を、そのまま縦方向の分割に変えた例です。
（
<!-- -->で囲まれた部分はコメントです。）
|
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=x-sjis">
<title>タイトル</title>
<frameset rows="50%,50%">
<frame src="menu.html" name="hidari"><!--（上から１番目）-->
<frame src="main.html" name="migi"><!--（上から２番目）-->
</frameset>
</head>
<body>
</body>
</html>
|
colsがrowsに変わっただけです。
これで、分割は縦方向になります。
上のフレームには、menu.htmlが表示されて、下のフレームには、main.htmlが表示されます。
そして、このページをブラウザに表示させるには、このフレームを記述したＨＴＭＬファイルを表示させるのです。
そうするとフレームタグで指定したページが表示されます。
さて、フレームの話はまだまだ続きます。