ウェブサイト構築のヒント集 ＞ 「作成の順序＜本文→レイアウト＞」
HTML や XHTML で HTML文書を作成するとき、皆さんどのようにされているでしょうか？ まずワープロ（のようなもの）で 原稿を執筆して、そのテキストを <p> などで構造化、そして最後に CSS で装飾、という手順を踏まえる方は 滅多にいないんじゃないかと思います。 特に一人で作る場合、「執筆・構造化・装飾」を同時進行でやっていくのが一般的ではないかと察します。
例えば図のようにページの頭の部分（ヘッダー）だけまず作ったりします。 あと、背景や文字の色指定なども先にやってしまうかもしれません。
上の例でいくと h1要素（<h1>...</h1>）を作って構造化、h1内の文章も書いて（HTML と CSS の分離）います。 さらには h1 の装飾も既にやっているので、「執筆・構造化・装飾」を同時進行で行っていると言えます。
現実的な問題として、執筆と構造化は同時進行で行えばいいのですが、 装飾に関しては後から切り離して行うコトが可能です。 ある程度 CSS を使ったウェブデザインを行った経験があるのなら、 想像力をもってして無装飾のページに装飾を施した結果のイメージ映像を考えるコトもできるでしょう。
ここでは執筆と構造化だけ行って HTMLファイルを作成した後に CSSファイルを後付で作るというやり方を考えてみたいと思います。 ちなみにここまで読んでお分かりかと思いますが、 手打ちかテキスト・エディターを用いて作成するコトを前提にしております。 「ホームページ・ビルダー」とかは使った経験が無いのでよく分からんのです。
執筆と構造化だけ行っていく作業は、質の悪いワープロを使って文章を書いていくようなものです。 通常のワープロと違って <p> </p> や <h1> </h1> などのタグを、 テキストの適切な個所に埋め込んでいく必要があります。 とても21世紀とは思えないローテクな作業となります。
人工知能による「自動執筆マシーン」が開発されていないのは皆さんご存知の通りですが、 テキストを自動的に構造化する「マークアップ・マシーン」も同様に開発されてはいません。 要するに機械にどこが引用文（blockquote要素）かを判断させるワケにはいきませんし、 h1からh6要素にしても明確な運用規定があるワケではないのでプログラミング化はできません。 ましてや、機械が文脈を読み取って段落（p要素）と段落の切れ目を自動判定するなど無理なハナシだ！ と、いうワケです。
つまり、データさえ入力すれば機械が勝手に論文を書いてくれる「自動執筆マシーン」が開発されるまでは、 マークアップ（構造化）は手作業で行うしかないのです。 手作業という言い方が悪いのならば、「人間の言語判断能力に頼るしかないプロセス」とでも解釈しておいてください。
それで、テキストを構造化する過程で留意すべき点は、 全てのテキストはいずれかの要素に属するという点です。
<body> <h1>日本の都市</h1> <h2>東京都</h2> 首都 <p> 上京するといえば、現代ではトキオに行くことを指します。 信長の時代は「上京＝京都に行く」だったのでしょうが...。 </p> . . . </body>
上の例で示すならば”首都”という文字は <h1></h1> にも <p></p> にも囲まれていません。 このような境遇の文字を「body直下に書く」と表現したりします（コレはやってはいけない）。 そこで、”首都”に関しては h2要素に組み込む、h3要素として扱う、p要素に組み込む、などの方法によって 「body直下に書く」コトを避けるように心がけてください。 無所属はいかんですよ。
要素は結構な数の種類があるのですが、よく使うものは限られてきます。 基本的には以下の数種類程度を使いまわせば良いかと思います。
| 大別 | 要素名 | 用途 |
|---|---|---|
| ブロック | h1...h6 | 見出し |
| ブロック | p | 段落 |
| ブロック | ol-li | 番号つきリスト |
| ブロック | ul-li | リスト |
| ブロック | blockquote | 引用 |
| ブロック | hr | 横線 |
| ブロック | pre | 整形済みテキスト |
| インライン | a | ハイパーリンク |
| インライン | img | イメージ画像 |
| インライン | strong | 強い強調 |
| インライン | em | 強調 |
実際にはこれだけでは済まないのでしょうが、もうキリがないので省略します。 それで、一応執筆と構造化が済んだとします。
例えばこんなコトは思わないでしょうか？ 「この段落は重要だ。 しかし、全文を strong要素で括ってしまうのも不細工な気がする。 できれば、段落自体に枠線を付けるなどして強調させたい。しかし、段落の種類は p要素の一つしかないから...」
上記のように特別な、あるいは例外的な見栄えを持つ段落を作りたくなるケースは多々あります。 もしくは <strong> による強調も数種類あると助かる、だとか...。 このような場合、とりあえず以下のように記述しておきましょう。
<p class="super"> 上記のことをまとめると、 <strong>ＸＸＸＸＸＸ</strong>だと言えます。 </p>
そして宣伝紙の裏でもメモ帳でも何でもいいので、 新しく作った class や id の用途と装飾内容を書き残しておきましょう。
.super まとめの段落とかで使用 ＊ border: 適当に実線 ＊ background-color: 黄色系で黒字クッキリ p strong p要素内のstrong は下線を付ける ＊ text-decoration: under-line ＊ color: 赤っぽい色で
それで、このメモ書きを外部CSSファイルを作る際に再現してやればよいワケです。
まとめの段落は常に同様の体裁となる為、サイトの閲覧者にとっても内容が頭に入りやすくなるでしょう。
<p style="border: solid 4px green"> などと場当たり的に処理してしまうと（やってしまいがちですが）、
膨大な数のファイルができたときの管理に困ります。
例えば何らかの事情で border をやめようと思っても、修正していくのが面倒になってしまいます。
作るときに手間をかけておくコトによって、管理や変更が容易になる。 この考え方は意外と重要ではなかろうかと思う今日この頃です。