知っておこう！CSSの各バージョンでできることの違い

更新日: 2018年05月25日

ホームページは、基本的にHTMLとCSSを組み合わせて作成されます。
HTMLはホームページの構造を、CSSはホームページのデザインを構築する役割を持っています。

CSSにはいくつかのバージョンがあります。バージョンによって異なる特徴を持っていますが、その違いはご存知でしょうか。

今回は誰でも分かる、CSSの各バージョンの違いを解説します。
これからCSSを勉強しよう思っている方はCSSがどのような変化を遂げてきたのかを事前に知っておくと知識を深めやすいでしょう。

CSS(Cascading Style Sheets)とは

CSSとは、ホームページの見た目や構造などのスタイルを構築するための言語です。
HTMLやXHTMLでWebサイト内の各要素の意味や情報の構造を定義し、CSSで色や文字サイズなどでそれらを装飾することで、普段目にするホームページがパソコン上で表示されます。

CSSのバージョン

CSSには、CSS1、CSS2、CSS3という3つのバージョンがあります。
現在はほとんどのホームページでCSS3が使用されています。

CSSの後ろの番号は、レベルを表しています。
WWWブラウザがCSS1対応となっていればCSS1のみ対応、WWWブラウザがCSS2対応となっていればCSS2とCSS1に対応、WWWブラウザがCSS3対応となっていればCSS3、CSS2、CSS1に対応しています。

レベルが上がるごとにできることが増えているので、全てのバージョンについて知りたい場合でも、CSS1から勉強していけば無駄になることはありません。

CSS1でできること

CSS1は1996年に発表されました。
主にできることとしては、以下のようになっています。

フォントプロパティ

フォントのサイズやウエイトなどを指定することができます。

色や背景のプロパティ

ホームページ上に表示される色や、背景画像などを指定することができます。

テキストプロパティ

テキストの語間と、行寄せを指定することができます。

ボックスプロパティ

ホームページ上の表示方法に関するものです。
具体的には、マージン、ボーダー、パディングを指定することができます。

・マージン・・・テキストや色、枠線がない余白の部分。
・ボーダー・・・パディングの1つ外側で外枠線の部分。
・パディング・・・内部のテキストとの余白のこと。

CSS2(CSS2.1)で追加された機能

CSS2は1998年にCSS1の上位互換として発表されました。
CSS1に加えて、さまざまな機能が追加されましたが、仕様書の定義が不明瞭だったため、各ユーザー間で実装に互換性がないという事態が発生しました。

これを受けて、2011年に改訂版としてCSS2.1が発表されました。

現在は、実装に際しては、CSS2.1を基本仕様と見なしています。
CSS2.1に追加された機能としては、以下のようになっています。

・表示媒体によって自動的にスタイルシートが変更できるようになった
・音声ブラウザへの対応
(音声ブラウザとは、ホームページの内容を解析して合成音声で読み上げるソフトウェアのことです。主に視覚障害者ユーザーがホームページを閲覧する際に利用されます。)
・印刷媒体への対応
・フォントや色などの表示機能の拡大