文中の説明画像をクリックすると拡大します。
CSS3とCSS2について
HTMLとともに使われてきたCSS。HTMLがWebサイトの構造を作るものに対して、CSSはWebサイトのデザインや装飾を行うために使われる言語でしたね。
ここでは、現在使われているCSS3とCSS2の違いについて解説します。CSS3（シーエスエススリー）はCSS2の次の世代のもので、現在標準的に使われています。
そもそもCSSとは何かについては、こちらをご覧ください。
CSS3とCSS2の違い
現在広く使われているCSS3ですが、これはCSS2と比べてまったく新しい言語というわけではありません。
CSS3は、従来のCSS2とは互換があり、基本的な文法に関してはCSS2と比べても変化はありません。そのため、これまでの基本的な記述方法でCSS3に対応させることが可能です。
それでは、CSS3とCSS2の違いはどのような点でしょうか。
ここで、CSS3にて追加された機能や変更点について具体的に見ていきましょう。
見た目に関するプロパティの追加
CSS3では、Webサイトの見た目やデザインに関するプロパティがいくつか追加されています。ここで代表的なものを取り上げましょう。
- グラデーション（段階的に変化する色）
-
CSS2では、べた塗りの色指定しかできませんでしたが、CSS3では要素の背景色にグラデーションを指定できるようになりました。グラデーションの方向や色相も自由にコントロールできます。
- 角を丸くする
-
要素の角を丸くすることができます。これはかなり以前から各ブラウザで先行実装されていたものですが、CSS3として正式にサポートされるようになりました。
- 文字やボックスに影を付ける
-
テキストやボックスに対して、ドロップシャドウのような影を付けることができます。影の濃さや方向、色なども指定できます。
- Webフォント
-
サーバー上にあるフォントを読み込んで、Webサイトで使用できる技術です。Webフォントを取り入れることにより、クライアントのPCには存在しないフォントを使用してWebサイトを表示させることができます。無料オプションとして用意しているレンタルサーバーも、数多くあります。
- レスポンシブウェブデザイン
-
Media Queries（メディアクエリ）を使用して、レスポンシブウェブデザインを取り入れることができます。ブラウザの横幅やディスプレイの解像度などをCSSで判別することで、Webサイトの見た目を様々なデバイスに対応させることができます。特に、スマートフォンやタブレットでの最適化において、とても普及した技術です。
- アニメーションやトランジション（切り替え効果）
-
CSS3では、HTML要素に対してアニメーションやトランジション（画面の切り替えのときの効果）を設定することで、要素を動かすことができます。これまでは、要素を動かそうと思ったらJavaScriptのようなプログラミング言語が必要でしたが、CSS3を利用することで、きれいに、そして簡単に動きを実装できるようになりました。
レスポンシブWeb（ウェブ）デザインとは何かについては、こちらをご覧ください。
疑似要素と疑似クラス
CSS3では、疑似要素と疑似クラスについて明確に区別して記述されるようになりました。疑似要素と疑似クラスとは、以下のようなものです。
- 疑似要素
-
疑似要素とは、要素内の特定の文字や行についてスタイルを指定するものや、contentプロパティと一緒に使用してCSSで疑似的なHTML要素を扱うために使われます。よく使われる疑似要素として、以下のような例があげられます。
::before ::after ::first-letter ::first-line
contentプロパティと共に使う疑似要素が、「::before」や「::after」です。「::first-letter」や「::first-line」は、そのセレクタを含む要素の1文字目や1行目を指定する疑似要素です。
- 疑似クラス
-
疑似クラスとは、要素が特定の状態にある場合にスタイルを指定するものです。よく使われる疑似クラスとして、以下のような例があげられます。
:link :hover :visited :active :nth-child :not
aタグの既読リンクと未読リンクで色を別々に指定するなどのケースがあげられます。
さて、ここで注目すべき点は、疑似要素では文字列の前に「::」とコロンが2つついているのに対し、疑似クラスでは文字列の前に「:」とコロンが1つしかついていません。
実は、CSS2までは、疑似要素も疑似クラスも文字列の前には「:」のように1つのコロンを記述すれば良かったのですが、CSS3では、疑似要素についてはコロンが2つというように、疑似クラスと識別するようになりました。
しかし、ほとんどのブラウザでは、疑似要素に対してコロンが1つでも機能するようになっています。
疑似要素や疑似クラスについては、最初はかなりとっつきにくい概念だと思います。しかしこれらを使いこなすとコーディングで表現できることが、ぐっと広がります。
CSSの歴史
ここで、CSSの歴史に触れてみます。
CSSは、Level（レベル）という数値でバージョンを表しています。
現在、広く使われているCSSはCSS3（シーエスエススリー）です。
ところで、HTMLやCSSが実際に使われるようになるにあたり、W3C（World Wide Web Consortium）という組織による「勧告」というプロセスを踏むことになります。ここで少し「勧告」という言葉について説明します。
HTMLやCSSは、W3Cという非営利団体によって標準規格化が推進されています。
W3CがHTMLやCSSの仕様を策定するにあたり、「勧告」を含めたいくつかの段階を踏むことになっています。
- 作業草案（Working Draft）
何度も修正を重ねながら仕様を決めていく段階 - 勧告候補（Candidate Recommendation）
作業グループによるレビューが行われながら、重要な部分以外の修正を重ねる段階 - 勧告案（Proposed Recommendation）
次の段階（勧告）まで進めるかどうか議論する段階 - 勧告（Recommendation）
規格策定の最終段階
主にこの4つの段階を経て、正式な仕様として認められることになっています。
その最終段階が「勧告」です。
しかし、勧告までに至らない状態であっても、ブラウザベンダー（ウェブブラウザの提供元）は「先行実装」という形で未勧告の仕様をブラウザに実装するという状態が長く続きました（特にHTML5やCSS3の分野）。
CSS1の登場（1996年12月）
もっとも古いCSSであるCSS1が勧告されたのは、1996年の事です。
CSS1の段階ですでに現在使われているプロパティ（CSSで設定する属性）の一部は、すでに仕様として登場していました。
CSS1で定義されたプロパティは、フォントや色に関するものや、ボックス要素のパディングやマージンなど、現在でもよく使われている基本的なプロパティです。
CSS2の登場（1998年5月）
CSS1の登場から2年後の1998年には、CSS2が勧告されました。CSS2は、CSS1の上位互換としてさまざまな概念が追加されています。
ブラウザだけでなく、携帯電話やテレビなどアクセスしたデバイス（閲覧する機器）ごとに自動的にスタイルシートを変更させる機能や、音声ブラウザや印刷用スタイルへの対応が行われました。
CSS2.1の登場（2011年6月）
CSS2.1は、2011年6月に勧告されました。CSS2の改良版として、CSS2のバグ修正やCSS3に向けた仕様変更なども含まれます。
CSS2で存在していた機能の一部も、廃止されています。一般的にCSS2と言えばCSS2.1の事を指します。
CSS3の登場（2011年ごろ）
CSS3は、全体として勧告されているものではなく、いくつかのモジュール（機能）に対して個別に勧告されています。
CSS2.1をベースにした各モジュールのレベル3を総称して、CSS3と呼んでいる状態です。現在、最も普及している最新のCSSです。
まとめ
- CSS2とCSS3では、文法に大きな違いはない。
- CSS3では、見た目やレイアウトを指定するプロパティが多数追加された。
- CSS3では、疑似要素と疑似クラスを明確に区別して記述する。
