【入門】【初心者】CSSとCSS3のバージョンの違い

CSSのバージョン

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

バージョンが上がるごとにできることが増えているので、CSSを学ぶ場合は最新バージョンのCSSであるCSS3を学んでおけば大丈夫です。

CSS１で追加された機能

CSS1は1996年に発表されました。
主に以下のことができます。

フォントプロパティ

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

色や背景のプロパティ

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

テキストプロパティ

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

リスト

リストマークやリストの場所などを指定することができます。

ボックスプロパティ

マージンやパディング、ボーダーのことです。

CSS2（CSS2.1）で追加された機能

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

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

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

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

CSS３で追加された機能

CSS3は2011年に発表されました。CSS3とHTML5はそれぞれ独立した技術ですので、必ず組み合わせて使わなければならないということはありません。

また、HTML4とCSS3、XHTMLとCSS3といった組み合わせでも問題なく利用することができます。

CSS3に追加された機能としては、以下のようになっています。

グラデーション

グラデーションを指定することができます。

変形

要素の回転など、2Dの範囲内で変形することができます。

角を丸くする

四角の要素などの、四隅を丸くすることができます。
指定する際は、半径をpxで指定します。

ボックスシャドウ

ぼかしの陰を入れることができます。

テキストシャドウ

文字に影がついているような表示にすることができます。

アニメーション

色の変化など、アニメーションを指定することができます。

複数背景

背景画像を複数枚指定することができます。

CSSのバージョンはHTMLとは違って特に宣言をする必要がありません。

なので、CSS1、CSS2、CSS3のプロパティを一緒に使うこともできます。

実際の現場でもバージョンをごちゃまぜで使っています。