これまではタグを使うことで文字の装飾や画像の表示ができることを紹介しました。
テーブルによるレイアウト
マイクロソフトのエクセルのような表計算ソフトをワープロ代わりに使ったことのある方ならものすごく理解しやすいレイアウトです。
HTMLにも「テーブル」を表示するタグがあるため、このテーブルタグで幅や高さを調節し、文字や画像を配置するやり方です。
もちろん表の枠も消せますし、色を付けたり、線の幅を変更することもできるため、レイアウトの主流にもなったテクニックです。
以下に、このテーブルによるレイアウトで作られたサイトを紹介します。
市野接骨院（http://www.itino-bs.com/）
私がお世話になっている接骨院のサイトで、いつ行っても満員です。歩けずに這って行った妻がスキップして帰ってくるくらいですから・・・
市野接骨院のアドレスを紹介しましたが、接骨院の情報を知るのではなく、ソースを見ることによりテーブルによるレイアウトで作られていることを知って下さい。
フレームによるレイアウト
ブラウザのウィンドウに仕切りを作って、複数のHTMLの内容を表示する仕組みを「フレーム」と言います。
ページ上部にバナーやメニューを固定し、左部にはメニュー（サブメニュー）を固定し、コンテンツ部のみをスクロール表示させたい時などに使われるレイアウトです。
分割した数だけのHTMLファイルが必要ですが、上部にバナーを設置したり左部にメニューを設置した場合、これらはすべてのページに共通（使い回し可能）であるため、ページを増やす時はコンテンツ部のみを考えれば良いというメリットがあります。
当サイト「ガソリンスタンドで働く」において作成されるページはフレームを予定しています。
サンプルページだけでも早く作ろうと思っているのでしばらくお待ち下さい。
http://bokechans.net/virtual_station/index.html
スタイルシートによるレイアウト
これまではタグやタグの属性で「見栄え」を定義してきました。
<font color="green">とすれば文字を緑色になるのですが、この見栄えの指定と同時に、本文も記述していくことになるので、それなりに凝ったページを作ろうとすると、やたらとゴチャゴチャしたHTMLになってしまいます。
そのため、文書の内容と文書の見栄えを分離し、「見栄えはスタイルシートで記述しよう」という動きと、対応するブラウザが増えてきたため、これからの主流になりつつあるレイアウト方法です。
内容と見栄えを分離することで、いろいろなメリットがあるので以下にいくつままとめておきます。
・複数文書のスタイルを一括管理でき、メンテナンスの効率が大幅に向上する
・HTMLがシンプルで読みやすくなり、あとから編集しやすくなる
・キメの細かい表現が可能になる
・出力メディアごとに異なるスタイルを設定できる
世界で圧倒的なシェアを誇るブラウザの最新バージョンが、製品候補版として最近リリースされたにも関わらずきちんと対応していないため、ブラウザはApple社のSafariかFirefoxまたはoperaを使うようにして下さい。
・HTMLがシンプルで読みやすくなり、あとから編集しやすくなる
・キメの細かい表現が可能になる
・出力メディアごとに異なるスタイルを設定できる
