オーサリングツールから HTML 4.01 + CSS の移行 #01
このリソースは、所謂、ホームページ作成ソフトを利用した HTML ドキュメントを、HTML 4.01 Strict に準拠させ CSS を利用したドキュメントに移行する手順を私の経験に基づき記述したリファレンスである。このドキュメントがあなたの Web 制作に役立つことを切に願う。
移行手順 #01
大前提として、ホームページ作成ツールを利用したドキュメントが必要。これを、スタイルシートを利用したドキュメントに移行するのが、このページの趣旨である。
- HTML から装飾的なものを排除
- 文書構造を成型
- スタイルシートを適用
HTML から装飾的なものを排除
現在発売されている大部分のオーサリングツールによって吐き出された HTML は、HTML 4.01 Transitional の不完全なものになっていることが多い。このドキュメントに含まれる「装飾的な要素と属性」を削除することからはじめる。
削除すべき、全ての要素と属性を列挙するのは無理なので、主なものを列挙する。また、全てのドキュメントは作業前にバックアップを行うことをお勧めする。
ホームページビルダーを使用したドキュメントの例。これを最初の状態とする。
削除すべき要素
これらの削除すべき要素は、属性も含め全て削除する。
- 例
- <font size="4" color="red" > などとしている部分を <～>までを削除する。本文は削除の対象としない。またこれを終了させている</font> も削除の対象になるので要注意。
- basefont
- ドキュメントの基礎となる font の内容を指定しているもの
- center
- センタリング
- font
- 文字の色や大きさを指定しているもの
- big
- 文字を大きくする
- small
- 文字を小さくする
- i
- 文字を斜体に（イタリック）する
- b
- 文字を太くする
これらの他にもまだあるが、基本としては HTML 4.01 Strict で定義されない要素と、Transitonal で推奨されない要素を削除する。
テーブルレイアウト
ここでの例は、解説のために簡単なドキュメントを使用したが、オーサリングツールによっては表として使用すべき <table> をレイアウトとして使用する場合がある。特に Dreamweaver ではその傾向が強い。レイアウト枠という紛らわしい名前を使用した「表として使用していない表」は、様々な弊害を生む。確かにレイアウトを簡単に行うテクニックであることは否定しないが、メンテナンスを行う上でのデメリットはあまりにも多い。顕著なものとしては、使用するタグがあまりにも多いためにメンテナンスに非常に手間がかかることである。読み込むデータが多いということは、ドキュメントの読み込み自体も遅くなるのは、明白である。画像との併用を行った場合のアナログ回線での読み込みは、明らかに遅い。
ここでスタイルシート使用したドキュメントと、テーブルを使用したレイアウトのドキュメントの比較を行う。例えば、大きなセルを用意して、その中に、本文を書くものを例として使用してみたい。テキストファイル上に必要な内容を示したものを用意した。適時ダウンロードして比較して欲しい。完成のイメージは 2001 年 11 月 9 日の当サイトの日記を参照されたい。
上記の例の場合、大きな枠の中に日記の見出しと、本文がある構成になっている。スタイルシートの例では、class に chapter を設定し、ボーダとして四方向に引く指定をしていた。テーブルレイアウトに関しては、限りなく似せる努力をしているが、実際は無理である。力量不足もあるかもしれないが、厳密に言うと HTML のテーブルだけでは、再現不可能である。
注目したいのは、ソースの内容である。テーブルレイアウトには、以下のコードが、スタイルシートを使用したドキュメントに比べ「余計に」存在する。
<table border="1"> <col span="1" align="right"> <tbody> <tr> <td width="70%" align="left"> </td> </tr> </tbody> </table>
今回の例は、一日分の日記であったために、この程度で済んだけれども、何日分もの日記が存在し、画像などが存在した場合はもう目も当てられないコードになるであろう。恐らくオーサリングツールを使用していて慣れた操作で作成していれば、手間はあまりかからないかも知れないが、貴方の知らない間に、HTML ドキュメントは膨れ上がっているのである。W3C の仕様では、レイアウト目的の使用を明確に否定している。仕様に従うかは、各自の判断だが、今後のメンテナンスにおいての作業効率を考えた場合、これらのテーブル関連の要素、及び属性は削除し、適当なブロックで div などで括っておくのがよいであろう。
なお W3C の定める HTML 4.01 の仕様については、W3C HTML 4.01 日本語訳が適切であろう。リンク先を一度熟読されたい。
削除すべき属性
これらの属性は、削除すべき要素を削除した上で、残された要素に存在している属性を見極め削除していく。
- 例
- <img src="hoge.gif" border="1" height="5" width="5"> の場合 border="1" が削除の対象となる。
- border
- img 要素などに含まれる枠線の太さを指定する。border="1" など。
- align
- 行揃えを指定する。align="right"
- style
- スタイルシートを適用する。これについては、後ほどまとめて記述するため不要。
- body 要素の全ての属性
- 背景色や、フォントカラーなどを指定している。bgcolor="#FFFFFF" など。
- target
- リンクにおけるターゲットを指定。target="_blank" など。全ての target 属性を削除する。フレームを使用したドキュメントは target 属性が多いため注意。