Webコーディング技術の変遷

1990s - 2026：黎明期から現代の「おもてなし」へ

1. イントロダクション

同じ見た目のwebページでも、時代背景や技術標準によってコードの書き方は劇的に変化してきました。
本資料では、その進化のプロセスを比較・分析します。

2. 技術変遷の比較表

時代・規格 レイアウト手法 デザインの記述 文字コード 主な特徴
HTML 3.2 table タグ HTMLタグの属性 Shift-JIS
Unicode
EUC-JP		 大文字タグ、構造とデザインが混在。
HTML 4.01 div + float htmlファイルとCSSファイルを分ける。
インラインスタイルも時に併用。
バージョンはCSS2		 UTF-8が主流に 構造(HTML)とデザイン(CSS)の分離。
クローラーを意識したコーディング。
XHTML 1.0 div + float htmlファイルとCSSファイルを分ける。
バージョンはCSS2		 UTF-8 XML準拠の厳格な文法ルールと拡張性。
HTML5 Flexboxとレスポンシブ対応 htmlファイルとCSSファイルを分ける。
バージョンはCSS3		 UTF-8 CSSで関数やアニメーションが使えるようになる。
HTMLの構造に意味（semantic)を持たせ、SEO対策やアクセシビリティを向上させる。
HTML Living Standard Flexbox / Grid 外部CSS (変数) UTF-8 使う人への「おもてなし」。
検索時の「AIによる概要」を意識したコーディング。

3. 各バージョンの重要ポイント

1990s

HTML 3.2 版（黎明期）

見た目と構造が渾然一体となった記述法

  • 「動けば良い」時代：視覚的な配置のために、本来「表」を作るための tableタグ をレイアウトに使用。いわゆるテーブルレイアウト。
  • デザイン属性の直接指定： bgcolor や font タグを多用。色を変える際、すべてのページの全タグを書き換える必要があり、メンテナンスが大変だった。
  • 大文字・Shift-JIS： 当時の日本の慣習的な仕様。htmlファイルの文字コードについては、Shift-JIS、UTF-8(Unicode)、EUC-JPが使われており、「文字化け」がよく起こっていた。
2000s

HTML 4.01 / XHTML 1.0（標準化）

標準化への移行と厳格なルール

  • HTMLとCSSの分離： 構造と装飾を分ける設計。「HTMLは文書構造を、CSSは見た目を」という役割分担が明確になった。
  • floatの時代：複雑な float と、その回り込みを解除する clearfix の技術が必須だった。
  • XML準拠： タグを必ず閉じる等の厳格な記述「XHTML」。XMLアプリケーションと組み合わせて使用でき、当時はその拡張性を期待された。
Modern

HTML5からLiving Standardへ

ユーザー体験(UX)を追求した「おもてなし」

  • マルチデバイス前提：スマホ・PC・タブレットを一つのコードで捌く「レスポンシブ」が標準。
  • Flexbox／Grid：floatレイアウトに代わる、フレックスボックス。直感的で強固な横並びレイアウト。
  • 自動ダークモード： OS設定に応じた自動色調変化。
  • アニメーション： 物理法則に近い滑らかなアニメーション。