最終更新日 更新日

HTML5とCSS3ってなに?

「HTMLは文字に意味を持たせるもの」
「CSSは見栄えを良くするもの」

今までのHTMLとCSSは、こういうふうに完全に分離することが出来ませんでした。しかし、HTMLの要素の調節や、CSSの機能アップによって、HTMLでデザインを気にせず作り、CSSのみでデザインをすることが出来るようになろうとしています。本来のHTMLとCSSの使い方に近づいている状態です。

例えば、背景画像を複数使いたい場合、今まではdiv要素をいくつも使わなければなりませんでした。しかし、CSS3では、1つの要素に複数の背景が設定できるようになりましたので、ムダなdiv要素のネストが省略できるようになります。ソースもすっきりしますので、音声ブラウザで内容を認識しやすくなります。あと、Googleロボットもクロールしやすくなり、SEO的にもプラスです。

HTML4.01のテーマは「国際化」と「スタイルの分離」でした。Webサイトの見え方は、パソコンやモバイルや印刷フォーマットなどの出力メディアに応じて変化します。なので、データを記述するHTMLと、メディアに応じた形で見え方を調整するためのスタイルシートが、別々である必要がありました。

しかし、HTML5は、HTML4.01とは目指している方向性が違います。かなりザックリまとめると、HTML4.01は「どんなメディアにもちゃんと情報を伝達できる言語」を目標にしているのに対し、HTML5は「メディアをブラウザに限定し、ブラウザでいろんな事ができる言語」を目標にしています。

そして、XHTML2.0では「メディアに依存しないWebアプリケーションの記述」という、HTML4.01とHTML5のそれぞれの目標を統合したものになるはずでした。しかし、XHTML2.0は従来のHTMLとはそうとうギャップがあるため、ブラウザ開発者の協力が得られず、策定中止になってしまいました。そして、ブラウザ開発者の「従来のHTMLを再利用しつつ、ブラウザで何でもできるようにしたい」という想いが、現在の「HTML5」の提案につながりました。

なお、HTML5にもXHTML構文がありますので、「XHTMLが終わった」というのは誤解です。終わったのは「XHTML2.0」です。そして、XHTMLはXMLです。最近のプログラミング言語は、標準でXMLライブラリを持っていますので、プログラマーの方は、XHTMLの方が扱いやすいのではないでしょうか。

そして、HTML5は構文ミスに寛容な代わりに「意味」の間違いには異様に厳しくなっています。これは構文ミスに異様に厳しい代わりに「意味」に寛容だったXHTMLとはかなり対照的です。今後、HTML5ブラウザが普及すると、HTML4.01で書いたページでも、HTML5の「意味論」で解釈されることになるでしょう。ですから、HTML5の要素が持つ「意味」を、ひとつひとつ確認しておくことは、とても重要だと思っています。

一方CSSは、バージョンではなくレベルで勧告されています。「CSS Level2」は「CSS Level1」のバージョンアップというわけではありません。CSSを組み込むメディアは、そのメディアが必要とするレベルのCSSを実装すれば良いだけです。

そして「CSS Level3」はさらに徹底され、モジュール化までされました。例えば、色を必要としないメディアは、Colorモジュールを実装する必要がありません。ですから、一口に「CSS3」と言っても、どのモジュールの組み合わせかによって違ってきます。特に現時点では、ブラウザ開発者が適当に「ツマミ食い」して実装している感じではないでしょうか。

そう考えると、HTML5でCSS2を使うこともできますし、HTML4でCSS3を使うこともできますので、よくありがちな「HTML4 + CSS2」とか「HTML5 + CSS3」という考え方は、適切じゃないのかもしれません。

HOME