[コラム]HTMLコーディングの歴史（ホームページ制作を振り返る）

1990年代のホームページ制作からHTMLコーディングの歴史をざっくりと振り返ってみたいと思います。

テーブルタグでレイアウト

1990年代、ホームページのコーディングは、現在からは想像もつかないほどカオスな状態でした。
レイアウトを作るには、とにかくテーブルタグを使って無理やりにレイアウトするというやり方が当時の主流でした。

テーブルの中にテーブル、その中にまたテーブルを入れ・・・。

テーブルの入れ子が永遠に続くさまは、まるでマトリョーシカ。

もう、どこまでが親テーブルかわからん。という状態。

どんなにタグがカオスであろうとブラウザでの表示が最優先で、表示崩れを防ぐためにピクセル数でがちがちに固定して表示させていました。

幅や高さを調整するためには、spacer.gifという透明の画像ファイルあちらこちらに配置。

今、そんなことを知らない人が見たら、なんじゃこの無駄な画像ファイルは？となること間違いなしの謎ファイルだらけ。

当時はそれが当たり前だったのです。

そんな作り方なので、ほんの少しでもレイアウトを変えようとすると、あちこちに影響が出るわ出るわ。

崩れるし、はみ出すし、隙間が空くし。それをテキストエディタでポチポチと直し…毎日そんな戦いの連続でした。

ファイル名、フォルダ名の変更の恐怖

それだけではありません。

もちろん当時はCMSなどありませんから、すべて静的なHTMLファイルです。

フォルダ名やファイル名の変更、フォルダ階層の変更となれば、全置換するしかありません。

ファイル名だけの変更ならまだしも、階層ごと変更となると、相対リンクされているところ全部の書き換えが必要で、想像しただけで・・・ってなる始末。

ナビゲーションにはframeタグ

グローバルメニューやサイドメニューを作るには、frameタグを使っていました。

メニュー項目に追加などがあっても、1つのファイルを変更すればよく、大変ありがたい存在ではあったのですが、このframeには、検索エンジンで問題が。

検索結果に、frameで作成したメニュー部分のみがヒットしたり、逆にコンテンツページのみがヒットしてしまい、ナビゲーションがないため他のページに移動できなかったりと不具合が出てきたのです。

そのため、frameによるナビゲーションは徐々に使われなくなり、その代わり１つのHTMLファイル内にナビゲーション部分も含める作り方が主流となっていきます。

そうなると困るのが、メニュー項目の追加や削除などが発生したときです。

メニュー項目に変更があると、すべてのファイルを変更しなければならなくなってしまったのです。

Dreamweaverという救世主誕生

そんなコーディングの闇を少し明るくしてくれたのが、Dreamweaverでした。

とくに役にたったのが次の3つの機能です。

・テーブルタグ枠の可視化

・ファイル名やフォルダ階層を変更すると自動的にリンク先も変更

・テンプレート機能

テーブルタグ枠の可視化

入れ子になったテーブルの枠を可視化してくれるので、すごく分かりやすくなりました。

しかも、枠幅をドラックで変更できるし、それに合わせて他の枠幅も自動的に変更してくれます。
今までなら１つの枠幅を変更すると、他の枠幅もいちいち計算して1つずつ変更していたのですごく便利にしてくれました。

リンクの自動変更機能

「このページはやっぱりこっちのカテゴリーの中にして」となった場合、今までなら大変な作業でした。

相対リンクの関係をしらみつぶしに調べて全置換して、漏れているリンク先はないか、全リンクをクリックしてチェック。

なんてことをしなければいけませんでした。

それが、ファイルをドラックドロップするだけで、全部のリンク先を自動的に変更してくれるんです。
なんと便利なんでしょう。

テンプレート機能

ヘッダーやフッター、ナビゲーションといった共通項目を１つのテンプレートファイルを変更するだけで済むようになったのです。

この機能のおかげで、大規模なウェブサイトでも管理可能に。

というか、静的HTMLファイルのウェブサイトでは、無くてなならない機能となりました。

CSS初期の時代

Dreamweaverのおかげでテーブルを扱うのがだいぶ楽にはなったのですが、あとからHTMLに変更を加えることの大変さには変わりありません。

レイアウト、画像の大きさ、文字の大きさや色、など変更しようとするとHTMLのいろんな箇所に影響が及んでしまいます。

そんな中、CSS（カスケーディングスタイルシート）の登場です。

CSSを使えば、今までHTMLタグの中に指定していた様々な装飾の要素を外部ファイルで指定することができます。

それに、同じ装飾を１つにまとめることができ、1か所を変えればサイト全体の変更が可能になりました。

これに合わせて、レイアウトの方法も大きく変わりました。

テーブルタグを使う方法から、CSSのfloatを使う方法に変わっていきました。

テーブルタグの分かりづらさから解放され、すっきりとした記述が可能に。

今までよりはるかに見通しよくタグを書くことが出来るようになったのです。

そう思ったのもつかの間。

floatレイアウトとブラウザバグとの新たな戦いが始まるのでありました。

floatには、ブラウザによってさまざまなバグがあり、思った通りに配置されないということがしばしば起こるのでした。

今ではバグの対処方法もまとまっていて、比較的容易に対処できますが、当時は情報も少なく試行錯誤しながらの対処でした。

さらにこのfloatレイアウトは、Dreamweaver上できちんと表示されないといった不具合も。

そんなわけで、テーブルレイアウト時代にはお世話になったDreamweaverさんでしたが、floatを使うようになってからは出番が少なくなってしまいます。

HTML5とCSS3

そんなこんなしているうちに時代は流れ流れて。
現在では、HTML5とCSS3で制作するのが主流です。

今ではテキストエディタの高機能化、周辺技術の高度化により、昔と比べると格段にホームページ作りがしやすい環境となりました。

とは言うものの、作りやすくなった反面、周辺技術の複雑化がとどまることを知らず、煩雑さが増しているという状況も発生しています。

あまりにも多くの技術が出てきていて、また、変化のスピードも加速している今、どの技術を使い、どの技術は使わないのかといった選択が必要な時代となっている気がします。