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

ホームページは、基本的に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に追加された機能としては、以下のようになっています。

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

CSS3で追加された機能

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

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

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

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

グラデーション

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

変形

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

角を丸くする

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

ボックスレイアウト

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

ボックスシャドウ

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

テキストシャドウ

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

段組み

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

アニメーション

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

複数背景

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

ブラウザの対応状況

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

対応しているブラウザ

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

まとめ

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

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

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

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

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