CSS2.0で出来ること、バージョンごとの基礎知識

CSS2.0で出来ることは？CSSのバージョンの基礎知識

CSSとは、HTMLで作成されたウェブページの、見た目を整えるための機能のことを言います。
HTMLで書かれた情報をより見栄え良くみせるため、視覚的な効果をCSSで制御することができるのです。

CSSはインターネットへのアクセスが一般化し始めた始めたころに興り、その後改訂を重ねられてきました。
そのためCSS1.0、CSS2.0、CSS2.1、CSS3.0などのバージョンが存在します。

すでに実装されているCSSとしては、CSS3.0が最も新しいCSSのバージョンです。
しかし、CSS2.0を用いたウェブサイトも、依然として多くあります。

旧バージョンを使用し続けていいのでしょうか？　何か困ることはないのでしょうか？
もしかしたらそんな疑問をお持ちになるかもしれません。
その答えには、CSSの改訂方針と、積み重ねてきた歴史が関わってきます。

このページでは、CSS2.0にスポットを当てて、改訂にはどんな背景があったのか、CSS2.0と、それ以前の1.0、現状の3.0ではどんな違いがあるのかを解説していきたいと思います。

また、それぞれのバージョンがウェブサイトの作成の際、どんな視覚効果をもたらしたのかも併せてご説明します。

CSS、ひいてはウェブ開発に興味をお持ちいただくお手伝いができれば幸いです。

CSSのバージョンによる違いとは

CSSは、新バージョンが実装されても旧バージョンが使用できないようにはなりません。

実装が始まってからすでに長く、多くのサイトでCSS3.0の記法が使われていますが、他のバージョンで記載されたCSSが混ざっていても問題なく表示できます。
ただし、一部分にごくわずかな非互換存在しているため、把握しておく必要はあるでしょう。

CSSのバージョンアップは新しい仕様に変更されるのではなく、便利な仕様を増やす形で行われます。
そのことからか、公式のバージョン呼称は「version」ではなく「level」です。
CSS1.0よりもCSS2.0、CSS3.0と、旧バージョンで出来ていたことはそのままに、ウェブサイトのデザインの選択肢がどんどん豊かになります。

では、各バージョンで追加された主な仕様を見ていきましょう。

CSS1.0で出来ること

CSS1.0は一番最初のバージョンということで、基本的な機能を利用することができます。

ウェブサイトのフォントのサイズ、文章の行間や文字の大きさ、1行目の字下げ、文字の装飾などの設定に加え、背景の設定ができるようになりました。

また、このときから「ボックスプロパティ」と呼ばれるものが存在しました。
margin(マージン)、border(ボーダー)、padding(パディング)の要素を規定して、文章や画像を配置します。

この概念は現在に至るまで修正を重ねながらウェブデザインの基本となっています。

CSS2.0で出来ること

CSS2.0はCSS1.0の上位互換として開発されました。
CSS1.0で使うことができた機能を使えるのはもちろん、新しく機能が追加されました。

CSS2.0になったことで機能が充実しましたが、問題点もありました。
CSS2.0では開発環境による互換性が低く、環境が違うとCSSが正しく動作しないことも多かったのです。

そのため、CSS2.0の後にCSS2.1という改訂版が定義され、互換性を確保できない機能が削除されました。
CSS2.1は、その後のCSS実装の基本仕様とされています。

CSS2.0、CSS2.1では、表示媒体の仕様(モニター解像度など)により自動で対応するスタイルシートに変更できるようになり、テキストを合成音声で読み上げるソフトに対応した音声ブラウザ機能を利用することができるようなりました。
その他フォント、ボックス概念などに関しても大きく手が加えられています。

CSS3.0で出来ること

CSS3.0は最も新しいCSSのバージョンです。2011年に公開され、現在に至るまで新しい仕様の検討、追加が行われています。

CSS3.0では機能がさらに拡張されています。

大きなものを挙げれば、テキストや背景へのグラデーションを設定したり、ボックスプロパティの四角の要素を角丸にしたりすることができます。

他にもボックスシャドウ、テキストシャドウ、アニメーションなど視覚的な設定を多く組み込むことができるようになりました。

ウェブサイトを作ってみよう

CSSのバージョンと、それぞれのできるようになったことについてご紹介しました。

CSSそのものは、バージョンのことを意識せずとも利用できるようになっています。
実際に自分でウェブサイトを作ってみると、そのことがよくわかるかもしれません。

CSSでは、その仕様の中核にCSS2.0(2.1)があります。
このサイトでは、そんなCSS2.0について解説し、CSSへの理解を深めるお手伝いを致します。ぜひ他のページもご一読くださいね。