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

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

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

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

CSS (Cascading Style Sheets)とは

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

CSS のバージョン

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

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

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

CSS 1でできること

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

フォント プロパティ

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

色や背景のプロパティ

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

テキスト プロパティ

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

リスト

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

ボックスプロパティ

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

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

CSS 2( CSS 2.1)で追加された機能

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

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

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

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

CSS 3で追加された機能

CSS 3は2011年に発表されました。
全体がモジュール化(まとまりのある要素、という意味)され、 ユーザー はどのモジュールを利用するのか、自由に選択できるようになりました。

なお、モジュールごとに仕様の策定が進められていて、まだ草案段階のものもあるため、今度も仕様が変更されていく可能性はあります。
CSS 3と HTML5 はそれぞれ独立した技術ですので、必ず組み合わせて使わなければならないということはありません。

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

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

グラデーション

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

変形

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

角を丸くする

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

ボックス レイアウト

どこに子要素を並べるのかを指定することができます。

ボックスシャドウ

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

テキスト シャドウ

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

段組み

要素の内容を段組みにすることができます。

アニメーション

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

複数背景

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

ブラウザ の対応状況

まだ全てのブラザに完全に対応している訳ではないので、プロパティによっては、独自のプロパティを用意する必要がある場合があります。

対応している ブラウザ

・Internet Explorer 9/10/11
・Firefox 29
・ Google Chrome 34
・Safari 5
・Opera 12

まとめ

CSS 3についてご存知の方は多いかもしれませんが、各バージョンごとの違いまで知っている方は少ないと思います。

細かい内容まで把握しておく必要はありませんが、どのような機能が追加されてきているのかで、今Webデザインに求められる要素を垣間みることもできます。
なかなか調べる機会もないと思いますので、まめ知識として知っておくとよいでしょう。

このニュースを読んだあなたにオススメ

CSSの基本～スタイルシートとは
ホームページ制作に必須！CSS・JavaScriptについての基礎知識を確認するための設問3つ
コピペで簡単実装！CSS3でオシャレなデザインのサンプルコード23選

このニュースに関連するカリキュラム