今どきのWebページは，ウインドウの大きさを変えてもレイアウトが変わらない。見栄えもWebサイト全体で統一されている。このようなレイアウトや見栄えの指定にも，HTMLのタグが使われている。
3ステップでページ作成
Webページ制作者から見ると，Webページの作り方は3ステップ。この作り方の手順に沿って見ていこう（図2-1[拡大表示]）。
ステップ1ではレイアウトを決める。使い勝手や見栄えを考えてレイアウトを決めて，Webページに貼り付ける要素を考えながら枠を区切るわけだ。具体的には，枠を固定して区切ることができるタグを使ってHTMLファイルを作成する。
ステップ2は，スタイルの定義だ。デザインを考えれば，ページ内の文字の大きさなどは揃えたい。しかし，今どきのWebページは，もともとは別のファイルを組み合わせて作ることが多い。部分ごとに，更新頻度が違っていたり，作成者が違ったりするからだ。こうなると，見栄えを揃えるのは簡単ではない。
そこで，別々のファイルを組み合わせたWebページについては，要素となるファイルごとに見栄えを定義するのではなく，すべてのファイルに共通の見栄えを定義する。
最後のステップ3は，部品の貼り付けだ。イメージや動画などは，HTMLファイルの中に直接書き込めない。そこで，Webブラウザが別に読み取って，貼り付けて表示するように，アクセス先のURLを指定するタグを記述する。
＜frameset＞でウインドウを区切る
では，枠の区切り方から実例で見ていこう。枠の区切り方は＜frameset＞を使う方法と，＜table＞を使う方法がある。まずは＜frameset＞タグを使ったレイアウトからだ（図2-2[拡大表示]）。
＜frameset＞タグは，ブラウザのウインドウをフレーム（枠）で複数のウインドウに分割するタグである。分割された各ウインドウは，それぞれが独立したWebブラウザのように動き，それぞれで別のWebページを表示する。
例に示したHTMLファイルでは，ブラウザのウインドウ全体をまず左右に区切り，次に右側のウインドウを上下に区切っている。そのために，＜frame set＞タグを入れ子にして使っている。
＜frameset＞タグは＜/head＞タグのすぐ後ろに書く＊すぐ後ろに書く。最初の＜frame set＞タグは，ウインドウ全体を左右に区切っている。「frameset」の後ろの「cols="550,250"」は「左右に550ドット：250ドットの割合で分割する」ことを指定した属性だ（a）。
大きさは，ドットで指定せずに，「cols="60%,40%"」といった具合に比率を指定してもよい。また，数字の代わりに「＊」を使うことで，大きさを指定せずにウインドウを区切ることもできる。
ウインドウを縦に区切るときには，「cols=」の代わりに「rows=」を使う＊「rows=」を使う。それがHTMLソースの2番目に出てくる＜frameset＞タグである（b）。
枠線を表示しないようにする
「cols=」や「rows=」のあとに続く三つの属性である「frameborder="0" framespacingグ="0" border="0"」は，枠線を完全に消すための属性指定である。frameborder=0は，仕切り線を非表示にする指定。ただし，この指定だけでは灰色の細い線が残る。そこで「framespacing="0"」と「border= "0"」を追加して，灰色の線も消えるようにする。
ただし，枠線を完全に消すこれら三つの属性指定は，ブラウザ・メーカーが独自に定義したものである＊独自に定義したものである。また属性のうち，framespacingはInternet Explorer用のもので，borderはMozillaやFirefox用のものだ。両方指定すれば，どちらのブラウザでも枠線が消える。
枠内のページは別ファイルで用意
＜frameset＞タグでウインドウを分割するHTMLファイルには，区切ったウインドウ内に表示する内容は書き込めない。その代わり，別に作成したHTMLファイルのURLを書く。
URLは，ウインドウごとに一つの＜frame＞タグを使って指定する。＜frame＞タグでは，name属性でフレームの名前を指定し，src属性で貼り付けるHTMLファイルのURLを指定する＊URLを指定する（図2-2c[拡大表示]）。中身を指定する順番は，まず上段左端，次にその右側，上段が終わったら次の段の左端からと決まっている。
＜frameset＞タグを使ってHTMLファイルを記述するときは，フレーム表示ができないブラウザのことを考えておく。最後の＜/frameset＞の前に，＜noframes＞と＜/noframes＞タグを置く。その中にはフレーム表示ができないブラウザが解釈できるように，＜body＞タグから始まるHTMLデータを書き込む（d）。
＜table＞タグを使うレイアウト法
次に，＜table＞タグで枠を区切る方法に話 を移そう。もともと＜table＞タグは，HTMLを使って表を記述するためのもの。それをWebページのレイアウトを固定するのに流用する。ブラウザのウインドウ全体を表に見立てて，セルごとに大きさを指定していくわけだ。
表を定義する＜table＞タグは，レイアウトだけのHTMLファイルを作るときでもボディ部の中に書く。最初に，表の指定を始めることを宣言する＜table＞タグを書き，次に行を示す＜tr＞タグを書く。行内のセルは一つずつ＜td＞と＜/td＞タグを使って指定し，1行が終わると＜/tr＞タグで閉じる。＜tr＞タグから＜/tr＞タグまでの指定は行数分だけ繰り返し，最後に＜/table＞タグで閉じる。このように＜table＞タグ，＜tr＞タグ，＜td＞タグを入れ子にして使う。
図2-3[拡大表示]のHTMLファイルでは，＜table＞タグでウインドウ全体の幅を800ドットに固定し，枠線を消している＊枠線を消している（a，b）。セル1個ずつの幅と高さは，セルごとに＜td＞タグで指定する。＜table＞タグや＜td＞タグで幅と高さを指定しないと，指定しなかった部分の大きさは可変になる。大きさを固定したいところだけ指定しておけば，一部のセルだけ大きさを固定するレイアウトが作れる。
＜table＞タグも，＜frameset＞のときと同じように，入れ子にして枠の中に枠を区切れる。入れ子にする＜table＞タグは，セルを指定する＜td＞と＜/td＞タグの間に記述する（c）。
内容を直接書き込める
＜td＞タグで定義したセルに，ほかのHTMLファイルを貼り付けるには，＜iframe＞タグを使う（図2-3d[拡大表示]）。もともと＜iframe＞タグは，Webブラウザのウインドウ内に，ほかのHTMLファイルを表示させるインライン・フレームを作るためのもの。＜iframe＞タグでほかのHTMLファイルのURLを指定すれば，イメージと同じように表示される。
表で作ったレイアウトにHTMLファイルを貼り付けるには，大きさをセルと同じにする。こうすれば，ブラウザで表示したときにインライン・フレームの枠線が表示されなくなる＊表示されなくなる。図2-3の例では，幅と高さの指定を＜td＞タグで指定したセルの幅と高さの指定と合わせている＊合わせている。
＜table＞を使うのが一般的
＜frameset＞タグと＜table＞タグのどちらでも，同じようにウインドウを区切れそうだ。しかし，今どきのWebページでは，＜table＞タグをメインに使い，補助的に＜frameset＞タグを使うのが多いようだ。
＜table＞タグを多用する最大の理由は，レイアウトの固定が確実にできる点にある。＜frameset＞タグでウインドウの大きさをドットで指定しても，ほとんどのブラウザは大きさを完全に固定しない。ウインドウ全体を小さくすると，フレームで区切ったウインドウは縮んでしまう。一方の＜table＞タグを使う方法では，大きさが完全に固定できる。
ただ，＜frameset＞タグにもいいところがある。＜frameset＞で区切ったウインドウは，一つずつ独立したWebページを表示する。このことを利用すれば，一つのウインドウの表示だけを別のWebページに切り替え，ほかのウインドウの表示はそのままにするといったことができる。例えば，＜frameset＞タグでウインドウを左右2個に分割し，左側にリンク集のWebページを表示する。そして，そのどこかをクリックすると，右側のウインドウにリンク先のWebページを表示する。そんなWebページが作成できる。
また，ブラウザのウインドウの下側に大きさを固定した広告バナー用のウインドウを作るときは，＜frameset＞タグを使う。
サーバー側でHTMLを合成する方法
以上のように，＜frameset＞タグを使ったり，＜table＞タグと＜iframe＞タグを組み合わせてWebページを作成すると，1ページが複数のHTMLファイルに分かれる＊分かれる。
これに対して，HTMLファイルにWebサーバーに対する命令を書き込んでおいて，WebブラウザからアクセスされたときにHTMLファイルを一つに組み立てて返信する方法がある＊返信する方法がある。
それには，HTMLファイル中にWebサーバーに対する命令を書き込むしくみ「サーバーサイド・インクルード（SSI）」を使う。具体的には，「＜!--#」で始まり「--＞」で終わるタグ＊「＜!--#」で始まり「--＞」で終わるタグをHTMLファイル中に書いておく。
例えば，SSIが書かれているtop.htmというファイルをWebブラウザが要求したとしよう（図2-4(1)[拡大表示]）。要求を受け取ったWebサーバーは，top.htmファイルを取得して（2），中身をチェックする（3）。Webサーバーが「＜!--#」で始まるタグを見つければ，その中の命令を実行する。図2-4では，そこに「include file="index. txt"」と書かれているので， top.htm中の「＜!--#」から「--＞」の部分をindex.txtの内容に書き換えて（4），Webブラウザに送信する（5）。
見栄えを統一するにはCSSを使う
次は複数のHTMLファイルからなるWebページや，リンク先のWebページ（同一サイト内）の見栄えを統一するテクニックを見ていこう。それには，カスケード・スタイル・シート（CSS）というしくみを活用する。
では，簡単な例でCSSの中身を覗いてみよう。CSSでは，見栄えを適用する範囲を最初に指定し，そのあとに｛ と ｝で囲ってスタイルを定義する。
この例では，最初の3行で＜td＞と＜/td＞タグで囲った範囲の見栄えを指定している（p.102の図2-5a[拡大表示]の(1)）。1行目の「td」の部分で＜td＞タグを指定し，2行目で上下左右に20ドットの空白を空けることを定義している。
後半の4行は，適用範囲をタグではなくクラス名という，タグに付けられる分類名で指定している（(2)）。つまり，「＊.midashi」の「＊」は，「どんなタグでもよい」という意味で，続く「midashi」がクラス名である＊クラス名である。こうすれば，midashiというクラス名を付けたタグと，対応する終了タグの間は，タグの種類にかかわらず指定したスタイルを適用する。こちらでは，背景を白にし，文字の大きさを20ドットにするよう指定している＊指定している。
適用範囲は自由に指定できる
こうして作ったCSSは，別ファイルとして保存する。そしてHTMLファイルがCSSファイルを参照するように，HTMLファイルのヘッダー部に＜link＞タグでCSSファイルのURLを指定する（図2-5bの(1)[拡大表示]）。
すると，CSSファイルで見栄えを指定したタグやクラス名が使われている部分（(2)，(2)’）が，CSSファイルで指定された見栄えになる。HTMLファイルの中のタグにクラス名を付けるときは，タグにclass属性を加えて書く＊class属性を加えて書く。
このようにしておけば，WebブラウザがHTMLファイルをウインドウに表示するとき，指定されたCSSファイルを参照し，タグやクラス名で指定された見栄えに従って表示する（図2-5c[拡大表示]）。複数のHTMLファイルが同じスタイル・シートを参照するようにしておけば，Webサイト内の全ページで見栄えを統一できる。
局所的に見栄えを変えることも可能
HTMLファイルに適用するCSSは， HTMLファイルから参照する外部のファイルとして用意する以外に，HTMLファイルに直接書き込んでおくこともできる。
一つは，ヘッダー部に＜style＞タグを使って書き込む方法。もう一つは，スタイルを指定するタグの中にstyle属性を使って直接書き込む方法がある。ヘッダー部で指定すれば，そのWebページ全体に適用する見栄えが決まり，タグに書き込めばそのタグだけに適用される。
このようなCSSは，適用される範囲が狭いが，より広い範囲で使われるCSSよりも優先される。このことを利用すれば，基本はWebサイト全体で共通の見栄えを使いながら，一部だけに独自の見栄えを適用できる。
