レイアウトしよう
こんなこと言いますが、「HTMLの仕様は、レイアウトについては、ほとんど考えていない」ということです。
事の始まりは学術分野出身のHTML君です。文書の「構造」を記述しそれがどう見えるか「見栄え」については驚くほど無頓着です。HTML
4からは、「見栄えや美しさにこだわるなら、スタイルシートを使ってくれ！」ということになっています。
そうは言っても、絶対にきれいなレイアウトを作りたい。HTMLを勉強しつつ、スタイルシートを勉強するのは面倒・・・、古いタイプのWebブラウザではスタイルシートが満足に表示されないし、DHTML,JavaScript,等はブラウザによって表示方法が違う・・・という、私たちのレベルではどうしようもない問題もあります。
◆ HTMLの上下左右
例えば、ハガキ、チラシ、校内・社内掲示などのように、1枚の紙の中でレイアウトを行う場合、「見出しは左上、この写真を上のほうに置いて、説明文は写真の右流して、ちょっとした話題を左下に流し書いて・・・」というように、レイアウトを考えます。では、Webページでのレイアウトは、どのように考えていくのでしょうか?
レイアウトの考え方はほぼ同じです。Webページを構築する場合は、「上下」と「左右」の位置を分けて考えます。「上下」の配置は基本的にHTML文書中での順番と同じ。最初のタグ（上）に書かれたものほど上に表示され、後書き（下）のものほど下に表示されるという、ごくシンプルな仕組みになっています。
では、左右のレイアウトはどのように行うのでしょう? Webブラウザでは、基本的にすべてが左寄せで表示されて文字は横書き、HTML文書中で右から書いても、右側から表示されるとは限りません。「しかし、画像で左右を別けているし、縦書きもある！」と言われる声も聞こえますね・・・
属性値のtop｜bottom｜middle｜left｜center｜right 等は確かに左右上下を決めるために使いますが、値にしかすぎないのです。要素そのもので左・右・上・下と言う要素は存在しません。とりあえず、左右のレイアウトについては後ほど紹介します。
文字の縦書きもIEのみのレイアウト指定で他のブラウザには通用しません。PRE要素を使って頑張られている方もいらっしゃいますが・・・
下書き（コンテ）
配置を決める前に自分で集めた情報や素材を整理しテーマごとにまとめることから始めます。もちろん整理する間にもっと詳しい情報やインパクトのある素材も欲しくなるでしょう。とりあえずはある物で製作しましょう。詳しくは、はじめの一歩＞製作前の準備をご覧下さい。
基礎的なデザインに関しては、「Web デザインの基礎」をご覧下さい。
ページの見栄えを整えるには、先ほどの属性値のtop｜bottom｜middle｜left｜center｜right 等のほかに、リスト｜テーブル｜フレーム｜コンテナ要素(DIV｜P）等を使い配置します。今ではスタイルシートの領域と呼ばれるスタイル指定でかなり自由度が増し見栄えが工夫されています。
まず、大き目の白い用紙を用意し、自分のセンス合わせて整理した情報を並べて見ます。並べた配置を見ると、上下左右やスペースに気を配り作られたことと思います。しかし、余りHTMLの限界をお考えにはならなかったのでは？次のページでは、HTMLタグでのレイアウトの限界を説明します。
【←BACK ┃NEXT→】