6日でできる 新HTML&CSS入門｜HTMLとCSSの歴史と進化

6日でできる 新HTML&CSS入門｜HTMLとCSSの歴史と進化

HTMLが情報の道を作り、CSSが表現の可能性を広げてきた。歴史をたどれば、現在のWeb制作がもっとよく分かる。

私たちが日常的に閲覧しているWebページは、HTMLとCSSという二つの技術によって支えられています。

HTMLは、見出し、段落、画像、リンクなど、Webページに掲載する情報の意味や構造を表すためのマークアップ言語です。一方のCSSは、文字の色や大きさ、余白、配置、背景、レイアウトなど、Webページの見た目を整えるためのスタイルシート言語です。

現在では、HTMLでページの構造を作り、CSSでデザインを整える方法がWeb制作の基本になっています。しかし、Webが誕生した当初から、この役割分担が完成していたわけではありません。

初期のWebは、研究者同士が文書を共有するための比較的シンプルな仕組みでした。その後、一般家庭へのインターネットの普及、ブラウザ同士の競争、Web技術の標準化、スマートフォンの登場などを経て、HTMLとCSSは大きく進化してきました。

Webの歴史には、便利な機能が増えたという技術的な変化だけでなく、異なるブラウザでも同じページを表示できるようにするための試行錯誤があります。

なぜHTMLとCSSを分けて記述するのか、なぜ古い要素や書き方が推奨されなくなったのか、なぜHTML5という固定された呼び方からLiving Standardへ移ったのか。こうした疑問は、歴史を知ることで理解しやすくなります。

ここでは、HTMLとCSSの誕生から、標準化、ブラウザ間の競争、HTML5とCSSの機能拡張、そして現在の継続的に更新される仕様までを、時代の流れに沿って見ていきます。

HTMLとCSSは異なる役割を持つ

歴史をたどる前に、現在のHTMLとCSSがどのような役割を担当しているのかを整理しておきましょう。

HTMLは、文章の各部分が何を意味するのかを示します。

たとえば、ページの中心となる題名は見出しとして、説明文は段落として、複数の項目は一覧として表します。ブラウザや検索エンジンなどは、このHTMLの構造を読み取り、ページの内容を理解します。

CSSは、HTMLによって構造化された内容を、どのように見せるか指定します。

同じHTMLであっても、CSSを変更すれば、文字の大きさ、背景、余白、並び方などを大きく変えられます。

このように役割を分けることで、情報の構造を保ちながら、デザインだけを変更しやすくなります。CSS2の仕様でも、文書の内容と表示方法を分離することで、Web制作やサイト管理を簡単にできるという目的が示されています。(W3C)

Webは研究者の情報共有から始まった

Webの誕生は1989年にさかのぼります。

当時、スイスにあるCERNでは、世界各地の大学や研究機関から多くの研究者が参加していました。しかし、研究に使用するコンピュータや文書の管理方法が異なっていたため、必要な情報を探したり共有したりすることが難しいという問題がありました。

そこで、CERNに勤務していたティム・バーナーズ＝リー氏は、ネットワーク上の文書をリンクで結び付け、必要な情報へ簡単に移動できる仕組みを提案しました。これがWorld Wide Webの出発点です。

1989年にWebの構想が提案され、1990年にはWebサーバ、Webブラウザ、HTML、HTTP、URLなど、現在のWebにつながる基本技術が作られました。Webは、離れた場所にいる研究者同士が情報を共有するための仕組みとして開発されたのです。(CERN)

CERNは1993年4月30日にWebの基本技術を自由に利用できる形で公開しました。この判断によって、特定の企業や組織だけに管理されない、開かれたWebが広がる大きなきっかけが生まれました。(CERN)

初期のHTMLは文書を結び付けるための言語だった

HTMLはHyperText Markup Languageの略です。

HyperTextは、文書の中に別の文書へのリンクを持たせ、情報同士を結び付ける仕組みを表します。Markup Languageは、見出しや段落など、文章の各部分に意味を付ける言語という意味です。

初期のHTMLで重視されていたのは、豪華なデザインではありませんでした。

研究文書に見出しや段落を設定し、関連する文書へリンクできるようにすることが中心でした。Webページ同士がハイパーリンクでつながることで、利用者は文書を順番に読むだけでなく、必要な情報を選びながら移動できるようになりました。

HTML、URL、HTTP、Webサーバ、Webブラウザが一緒に作られたことも重要です。

HTMLが文書の構造を表し、URLが文書の場所を示し、HTTPが文書を送受信するルールを決めます。WebサーバがHTMLを公開し、ブラウザがHTMLを取得して画面に表示します。

現在のWebは非常に多機能ですが、その基本には、文書を保存し、場所を指定し、通信で取得し、リンクで別の文書へ移動するという仕組みがあります。

図1：HTMLとWebが誕生した流れ

この図から分かること

Webは、最初から動画配信やオンラインショッピングを行うために作られたものではありません。

離れた場所にいる研究者が、文書を共有し、関連する情報へ簡単に移動できるようにすることが出発点でした。

HTMLは文書の構造とリンクを表し、URLは文書の場所を示します。HTTPはブラウザとWebサーバが情報をやり取りするための通信ルールです。

これらの技術が一つの仕組みとして組み合わされたことで、ネットワーク上の情報をブラウザから閲覧できるWebが生まれました。

初期のHTMLでは見た目の指定も混在していた

Webの利用者が増えると、単に文章を表示するだけでなく、文字の色や大きさを変えたり、画像を配置したりしたいという要望が強くなりました。

しかし、初期のWebには、ページ全体のデザインを体系的に管理する仕組みが十分に整っていませんでした。

そのため、HTMLに見た目を指定するための要素や属性が追加され、文書の内容とデザインの指定が同じファイル内に混在するようになりました。

小さなWebページであれば、それでも管理できます。しかし、同じデザインを使用するページが数十ページ、数百ページと増えると、文字色や余白を変更するだけでも多くのHTMLファイルを修正しなければなりません。

また、HTMLが文書の構造ではなく、見た目を作る目的で使われると、ページの意味が分かりにくくなる問題もありました。

こうした問題を解決するために、文書の構造と見た目を分けて管理する考え方が求められるようになりました。

CSSはHTMLからデザインを分離するために生まれた

CSSの歴史は1994年に始まります。

当時CERNで働いていたホーコン・ウィウム・リー氏は、Web文書の見た目を指定するスタイルシートの仕組みを提案しました。

初期のWebには、新聞や雑誌のようなレイアウトを体系的に指定する方法が不足していました。そこで、HTMLとは別に、色、フォント、余白などの表示方法を指定する言語としてCSSの構想が生まれました。(W3C)

CSSはCascading Style Sheetsの略です。

Cascadingには、複数の場所から指定されたスタイルを、優先順位に従って重ね合わせるという意味があります。

Webページの制作者による指定だけでなく、ブラウザの標準設定や利用者側の設定などを組み合わせ、最終的に適用するスタイルを決めることがCSSの大きな特徴です。

1996年12月17日にはCSS1がW3C勧告として公開されました。CSS1では、フォント、色、文字間隔、余白など、現在のCSSにつながる基本的なスタイル指定が定められました。(W3C)

CSSによってWebサイトを管理しやすくなった

CSSの登場によって、HTMLには文章の意味や構造を記述し、CSSには見た目を記述するという役割分担が可能になりました。

たとえば、Webサイト内のすべてのページで同じCSSファイルを使用すれば、見出しの色や本文の文字サイズをまとめて管理できます。

サイト全体のデザインを変更するときも、共通のCSSを修正することで、複数のHTMLへ変更を反映しやすくなります。

構造とデザインを分離する考え方は、現在のWeb制作でも基本になっています。

HTMLをデザインのためだけに使うのではなく、情報の役割が伝わるように記述し、その上でCSSを使って見た目を整えることが大切です。

W3CがWeb技術の標準化を進めた

Webが急速に広がると、共通の技術仕様を作る組織が必要になりました。

そこで、ティム・バーナーズ＝リー氏によって1994年に設立されたのがW3Cです。W3CはWorld Wide Web Consortiumの略で、企業、研究機関、専門家などが協力し、Web技術の標準を開発する組織です。

W3Cが公開する正式な標準は、W3C Recommendation、日本語ではW3C勧告と呼ばれてきました。

W3Cの仕様は、特定のブラウザや企業だけに都合のよい機能を作るのではなく、異なる環境でも同じ技術を利用できるようにすることを目的としています。W3Cは合意、公平性、公開性、品質などを重視した手続きを経て、Web標準を公開しています。(W3C)

ブラウザの競争によって独自仕様が増えた

1990年代半ばになると、一般家庭や企業にもインターネットが広がり、Webブラウザの利用者が急速に増えていきました。

この時期には、Netscape NavigatorとInternet Explorerを中心に、ブラウザのシェアをめぐる激しい競争が起こりました。一般に、この競争は第一次ブラウザ戦争と呼ばれています。

各ブラウザは利用者を増やすために、新しい表示機能を次々と追加しました。

しかし、標準化される前の独自要素や独自機能も多く、あるブラウザでは正しく表示できるページが、別のブラウザでは崩れるという問題が発生しました。

この問題を完全になくすことは簡単ではありませんでしたが、W3Cによる標準化が、ブラウザ間の違いを減らすための共通の基準になりました。

HTML 3.2が当時の実装を整理した

1997年1月、HTML 3.2がW3C勧告として公開されました。

HTML 3.2は、当時のブラウザで広く利用されていた機能を整理し、HTMLの共通仕様としてまとめることを目的としていました。仕様の作成には、MicrosoftやNetscapeを含む複数の企業が関わっています。(W3C)

HTML 3.2は、すべてのブラウザ差を解消したわけではありません。

それでも、各社が個別に機能を増やしていた状況に対して、共通の仕様を示したことには大きな意味がありました。

その後、1997年にはHTML 4が続き、文書の構造、スタイルシート、スクリプト、アクセシビリティ、国際化などを考慮したHTMLへ発展していきました。HTMLの開発史でも、HTML 3.2の完成後、HTML 4が同じ1997年に続いたことが記録されています。(WHATWG HTML Living Standard)

CSS2で対応できる表現が広がった

CSS1の公開から約1年半後となる1998年5月、CSS2がW3C勧告として公開されました。

CSS2では、CSS1の基本的なスタイル機能に加えて、要素の配置、印刷向けの指定、表のレイアウト、メディアに応じたスタイルなど、より幅広い機能が定義されました。(W3C)

ただし、仕様が公開されても、すべてのブラウザがすぐに完全対応したわけではありません。

Web制作者は、どの機能が各ブラウザで利用できるのかを調べながら制作する必要がありました。

図2：ブラウザ競争とWeb標準化

この図から分かること

ブラウザ同士の競争は、Webの機能を増やす原動力になりました。

一方で、それぞれのブラウザが独自の機能を追加すると、同じHTMLやCSSでも表示結果が異なる問題が起こります。

Web制作者は複数のブラウザに合わせて個別の修正を行わなければならず、制作や保守の負担が大きくなりました。

W3CによるHTMLやCSSの標準化は、異なるブラウザが同じルールを共有し、共通のHTMLやCSSをできるだけ同じように解釈できる環境を作るために進められました。

XHTMLではより厳密な文法が目指された

HTML 4の後、W3CはHTMLをXMLの文法に合わせて再構成する方向へ進みました。

その中で生まれたのがXHTMLです。

XHTMLでは、要素を正しく入れ子にする、終了タグを省略しない、要素名を小文字で記述するなど、HTMLよりも厳密な書き方が求められました。

厳密な文法は、文書を機械的に処理しやすくするという考え方につながっていました。

しかし、実際のWebには、古いHTML、文法上の誤りを含むページ、ブラウザ独自の動作などが大量に存在していました。既存のWebページとの互換性を保ちながら、Webアプリケーションとしての機能も発展させる必要がありました。

そのため、HTMLを現実のWebに合わせて進化させようとする新しい動きが生まれます。

WHATWGがHTMLの進化を再び進めた

2004年、Apple、Mozilla、Operaの関係者によってWHATWGが設立されました。

WHATWGはWeb Hypertext Application Technology Working Groupの略です。

当時、W3CがXHTMLを中心とする方向へ進む一方で、WHATWGは、既存のHTMLとの互換性を保ちながら、Webアプリケーションに必要な機能を発展させることを重視しました。(WHATWG)

WHATWGの取り組みは、後のHTML5へつながります。

Web上には膨大な数の既存ページがあるため、理想的な新言語へ一度に置き換えるのではなく、現在のブラウザやWebページがどのように動いているかを確認しながら仕様を作る必要がありました。

HTML5は文書とWebアプリの機能を広げた

HTML5は、従来のHTMLを発展させ、Webページだけでなく、Webアプリケーションにも対応しやすくすることを目指した仕様です。

W3C版のHTML5は、2014年10月28日に正式なW3C勧告となりました。HTML5はHTMLの第5の大きな改訂として位置付けられ、新しい要素やAPI、ブラウザ間の相互運用性を高めるための明確な処理規則が盛り込まれました。

HTML5では、ページ内の情報の役割をより明確に表す要素が増えました。

HTML5より前にも、プラグインなどを利用して動画や高度な機能を提供することはできました。

HTML5では、動画や音声などをHTMLの標準的な要素として扱えるようになり、ブラウザが共通の方法で実装しやすくなりました。

また、ブラウザが不完全なHTMLを受け取ったときの処理方法も細かく定義されました。これにより、ブラウザごとの解釈の違いを減らし、同じHTMLをより一貫して扱うことが目指されました。

HTML5とレスポンシブWebデザインは同じものではない

HTML5の特徴として、スマートフォンへの対応が挙げられることがあります。

ただし、HTML5だけで画面幅に応じたレイアウトが完成するわけではありません。

パソコン、タブレット、スマートフォンなど、異なる画面幅に合わせて表示を調整するレスポンシブWebデザインでは、HTMLの構造に加えて、CSSのメディアクエリや柔軟なレイアウト機能が重要になります。

HTML5の普及期とスマートフォンの普及時期が重なったことで、HTML5とレスポンシブ対応が一つの変化として説明されることがあります。

しかし実際には、HTML、CSS、ブラウザの表示設定など、複数の技術を組み合わせて実現します。

CSS3という呼び方とモジュール化

CSS3は、CSS2に続くCSSの新しい世代を表す言葉として広く使われてきました。

しかし、CSS3という一つの巨大な仕様書が完成し、その後CSS4へ進むという単純な形ではありません。

CSSは機能ごとに仕様を分割するモジュール方式へ移行しました。色、背景、変形、アニメーション、レイアウトなどの仕様が、それぞれ異なる速度で開発されます。

そのため、現在はCSS3やCSS4という全体の固定バージョンよりも、CSS Grid Layout、CSS Flexible Box Layout、CSS Colorなど、個別のモジュール名とレベルで仕様を扱います。W3CのCSS Snapshotも、現在のCSSを複数の仕様の集合として整理しています。(W3C)

すべての機能が同じ時期に登場したわけではありません。

一般にCSS3の機能として紹介される内容には、その後に発展した個別モジュールも含まれています。学習するときは、CSS3という一つの完成品を覚えるより、目的別のCSSモジュールが継続的に更新されていると考えるほうが、現在の仕様に近い理解になります。

CSSによる装飾の可能性が大きく広がった

初期のCSSは、文字、色、余白など、比較的基本的なスタイルが中心でした。

CSSの機能が拡張されると、以前は画像編集ソフトやJavaScriptなどに頼っていた表現の一部を、CSSだけで作れるようになりました。

CSSで表現できる範囲が広がったことで、画像の使用量を減らしたり、画面幅に応じてレイアウトを変えたりしやすくなりました。

ただし、CSSで高度な表現ができるからといって、すべての要素を動かしたり、装飾を増やしたりすればよいわけではありません。

利用者が情報を読みやすく、操作しやすいデザインにすることが重要です。

図3：HTML5とCSSの進化で広がったWeb表現

この図から分かること

初期のWebページは、文章、見出し、リンクなどを中心としたシンプルな文書でした。

HTMLの進化によって、文書の各部分の意味をより明確に表したり、動画や音声などを標準的に扱ったりできるようになりました。

CSSの進化によって、色や文字だけでなく、柔軟なレイアウト、画面幅への対応、滑らかな変化やアニメーションなども指定できるようになりました。

現在のWebページは、HTML5だけ、またはCSSだけで作られているのではありません。

意味のあるHTMLの構造と、複数のCSSモジュール、ブラウザの機能などを組み合わせることで、多様な端末で利用できるWebサイトが作られています。

HTMLは固定バージョンからLiving Standardへ移った

HTML5以降、HTMLの標準化方法は大きく変わりました。

以前は、HTML 3.2、HTML 4、HTML5のように、ある時点で仕様をまとめ、番号を付けて公開する方法が使われていました。この方法はスナップショット方式と考えられます。

一方、WebブラウザやWebアプリケーションは継続的に変化します。

新しい機能や問題点が見つかるたびに、次の大きなバージョンが完成するまで待つ方法では、実際のWebの変化に追い付きにくくなりました。

そこでWHATWGは、HTMLを継続的に更新するHTML Living Standardとして管理する方法を採用しました。

Living Standardは、完成した仕様を長期間固定するのではなく、ブラウザ開発者、Web制作者、ツール開発者などからの意見や実装状況をもとに、継続的に修正や機能追加を行う標準です。(WHATWG)

2019年にHTML仕様の一本化が進められた

W3CとWHATWGは、HTML5の開発過程で協力した時期がある一方、異なる方針でHTML仕様を公開していた時期もありました。

W3Cは安定した時点の仕様を勧告として公開する方法を重視し、WHATWGは継続的に更新するLiving Standardを重視していました。

複数のHTML仕様が存在すると、ブラウザの開発者やWeb制作者が、どの仕様を基準にすればよいのか分かりにくくなります。

2019年にはW3CとWHATWGの間で合意が結ばれ、HTMLとDOMについて、WHATWGのLiving Standardを中心とした一つの仕様へ協力していく方針が明確になりました。(W3C)

現在、HTMLの中心的な仕様はWHATWGによるHTML Living Standardです。WHATWGは2004年からHTMLを維持、発展させており、現在も仕様を継続的に更新しています。(WHATWG)

現在はHTML5よりHTMLと呼ぶことが多い

現在でも、書籍、講座、Web制作の現場などでHTML5という言葉は広く使われています。

HTML5以前のHTMLと区別したり、video要素やarticle要素などを含む現代的なHTMLを説明したりするときには、HTML5という表現が分かりやすい場合があります。

ただし、現在の標準仕様はHTML6の完成を待っているわけではありません。

HTML Living Standardとして継続的に更新されているため、現在の技術を指す場合は、単にHTMLと呼ぶのが自然になっています。

CSSについても同様に、現在のCSS全体を一つの番号で表すより、CSSまたは個別のモジュール名で呼ぶことが一般的です。

Web標準によって異なる環境でも利用しやすくなった

Web標準の目的は、単に正しい書き方を決めることだけではありません。

異なるブラウザ、OS、画面サイズ、入力方法、支援技術などを利用していても、同じ情報や機能へアクセスしやすくすることが重要です。

W3Cは現在も、アクセシビリティ、国際化、プライバシー、セキュリティなどを含むWeb標準やガイドラインの開発を進めています。(W3C)

HTMLやCSSの仕様に沿って制作することは、ブラウザで表示できるというだけでなく、多様な環境で情報を利用できるWebを作ることにつながります。

古いHTMLが現在も表示できる理由

Webの大きな特徴の一つは、過去に作られた多くのページを現在のブラウザでも閲覧できることです。

ブラウザは新しい仕様だけに対応するのではなく、古いHTMLや完全には正しくないHTMLも、可能な範囲で表示できるように作られています。

HTML Living Standardでは、正しいHTMLの書き方だけでなく、ブラウザがHTMLをどのように解析し、問題のある記述をどのように処理するかも詳しく定義されています。

これは、既存のWebページを突然表示できなくしないために重要です。

ただし、古い書き方でも表示されるからといって、現在もその方法を使うことが望ましいとは限りません。

新しくWebページを作るときは、現在のHTMLとCSSの考え方に沿い、意味のある構造と管理しやすいスタイルを使用することが大切です。

歴史を知ると現在の書き方の理由が分かる

HTMLとCSSの歴史をたどると、現在のWeb制作で重視されている考え方には、それぞれ理由があることが分かります。

HTMLで意味のある構造を作り、CSSでデザインを管理するのは、内容と見た目が混在した時代の問題を改善するためです。

標準的な要素やプロパティを使用するのは、ブラウザ独自仕様によって表示結果が大きく異なった経験があるためです。

複数のブラウザや端末で表示を確認するのは、Webが一つの機器だけで利用されるものではないためです。

Living Standardとして継続的に仕様が更新されるのは、Webそのものが完成して止まる技術ではなく、利用方法やブラウザの変化に合わせて発展し続ける基盤だからです。

HTMLとCSSは、最初から現在の形で完成していた技術ではありません。

研究者の文書共有から始まったHTMLは、WebページとWebアプリケーションの構造を支える言語へ発展しました。

文書の見た目を管理するために生まれたCSSは、文字や色の指定だけでなく、多様な画面に対応するレイアウトやアニメーションまで扱える技術へ進化しました。

その過程では、ブラウザ間の競争、独自仕様による混乱、標準化団体の活動、既存ページとの互換性など、多くの課題がありました。

現在のHTMLとCSSの仕様や制作方法は、こうした課題を一つずつ改善してきた結果として形作られています。