CSS3とは何のこと?

「HTML5」と並んでよく目にする「CSS3」とは何でしょうか? 今回はこの「CSS3」について、簡単にご紹介致します。

CSS(スタイルシート)には規格のバージョンがある
「CSS3」はCSSの最新版

「CSS3」は、CSSのLevel.3

CSSは、ウェブページの見栄えを定義する言語として広く使われています。CSSは「Cascading Style Sheets(カスケーディング・スタイルシート)」の略ですが、単に「スタイルシート」とも呼ばれます。

このCSSには、規格のバージョン(レベル)があります。例えば最初のCSSは「Cascading Style Sheets, level 1」で「CSS1」と表記されます。

この最初のCSSである「CSS1」の規格は、1996年に確定しました。その後、仕様に改良を加えた「CSS2」が1998年に確定し、「CSS2.1」が2011年に確定し、その次の規格として2011年から策定が進んでいるのが「CSS3」です。

「新しいCSS」ではなく、「便利な仕様が増えたCSS」

CSS3は、まったく新しい言語というわけではありません。従来のCSSと互換性があります。これまでのCSSに、新しく便利な仕様を加えた規格がCSS3です。基本的な文法(記述方法)に変化はほぼありませんから、従来のCSSで使えた記述方法はそのままCSS3としても使えると考えて問題ありません。

疑似クラス疑似要素を区別するために、CSS2.1までは「:before」のようにコロン記号1つで記述する仕様だった疑似要素が、CSS3では「::before」のようにコロン記号を2つ付ける仕様に変わりました。このような仕様変更はありますが、多くのブラウザではCSS2.1以前の記述方法でも表示できます。

従来の記述と混在が可能 (=書き直す必要がない)
1つのCSSソースの中で、新旧のCSSが混在していても問題ありません。例えば、「CSS3の記述」と「CSS2.1の記述」を一緒に記述しても大丈夫です。従来の記述はそのまま使用可能なので、「CSS3で新しく追加されたプロパティを使いたい」という場合でも、既存のソースを書き換える必要はありません。今使っているCSSソースの中に、CSS3の記述を追記するだけで使えます。

HTML5とセットではない
「HTML5+CSS3」のように表記されることがよくありますが、CSS3はHTML5と一緒に使わなければならないわけではありません。例えば、HTML4.01で記述されているウェブページを、CSS3を使ってデザインすることもできます。

今すぐ使える
CSS3の仕様は、そのすべてが確定したわけではありません。しかし、代表的な各ブラウザでのCSS3への対応は、2011年の時点でも少しずつ始まっていました。今では、Edge, Firefox, Chrome, Safari, Operaなど多くのブラウザでCSS3の記述方法が使えます(※Internet Explorerの場合は、主にIE9以降からCSS3への対応が進められました)。

さて、CSS3は従来のCSSからどんな仕様が増えたのでしょうか。詳しくは次のページからご紹介いたします

※本記事は、2011年2月16日に初版を公開し、2016年10月に改訂したものです。記事中の一部の画像や画面イメージは、2011年2月時点のものです。