CSS概要

Webページの表示スタイルを制御するCSSが使用されるようになった背景と、メリットやデメリットといった概要を簡単に紹介します。

CSSが使用される以前のはなし

現在、Webページの背景色や文字の色といったスタイルを制御するには、CSSを使用するのが一般的です。しかし、以前はそういった表示スタイルに関することは、タグとその属性を使用するのが一般的でした。

Transitional（過渡的）DTDのHTML/XHTML、以前のバージョンのHTMLには文字の色、サイズなどを指定する<font>のようなタグがあります。

次の例はHTMLで表示スタイルを変更した例です。<b>はボールド体、<i>はイタリック体、<u>はアンダーラインを付加するタグです。

html_style.html

上の例のように、スタイルを制御するたびにタグを記述していたのでは、かなりの時間と手間が必要となります。また、ネストの構造も分かりにくくなります。

しかし、一番重要なのは、タグは何かの意味を定義するもので、表示スタイルを変更するという用途は好ましいものではないことです。このような表示スタイルを変更するタグは、新しいバージョンのXHTMLでは廃止になっています。

CSSの登場

タグによるスタイル制御によって、文書の意味の定義と表示スタイルの制御がごちゃ混ぜになってしまう問題を解決するためにCSSが登場しました。

CSSが登場したのは、かなり早い段階でしたが、あまり使用されることはありませんでした。ブラウザがCSSにあまり対応しなかったことと、タグによるスタイル制御があまりに一般的になってしまっていたからです。

その後、ブラウザによる対応も徐々に進み、現在では、CSSによる効率的なスタイル制御が一般的に広まってきました。

CSSのメリット

CSSのメリットは、HTML/XHTMLによる文書の意味の定義と表示スタイルの制御を分離することに尽きるのですが、これによって具体的にどのようなメリットがあるのか紹介します。

スタイル制御が効率的になる

通常、CSSを使用するには、HTMLファイルとは別にCSSファイルを作成し、そのCSSファイルを基にHTML文書の表示スタイルを制御します。これによって、<h1>要素の文字色を変更したいといった場合、CSSファイルを編集するだけで、全てのHTMLファイルにおける<h1>要素の文字色を変更することができ、編集作業が効率的になります。

Webサイトに限らず、あらゆる文書は、どのページに対しても統一的な表示スタイルを適用することが多いため、このメリットは非常に大きいといえます。

情報の純度の向上

HTML文書からタグによるスタイル制御を排除することは、HTML文書を作成する際、「どのように表示されるか」という観点からではなく、「どのような内容が記述されているか」という観点からタグを記述することになります。これによって、情報としての純度を向上させることができます。文書を何らかのプログラムで処理させる場合など、情報としての純度が高ければ、その処理も容易になり、文書の保守や更新も効率的になります。

メディアごとに表示スタイルを変更可能

CSSはコンピューターのディスプレイ表示を想定したスタイル制御以外に、印刷用、携帯電話などの小型端末、テレビなどのメディアのスタイル制御も想定しています。

CSSファイルをメディアごとに用意すれば、1つのWebサイトでそれぞれのメディアに対するスタイル制御が可能となります。

他のマークアップ言語にも適用可能

CSSはHTML/XHTMLに対するスタイル制御だけではなく、他のマークアップ言語に対しても使用可能なことがあります。他のマークアップ言語でCSSが使用できるのであれば、新しくスタイル制御について学習する必要がなくなります。

より多様なスタイル制御が可能

CSSによるスタイル制御は、タグによるスタイル制御よりも、はるかに多くのことが可能です。CSSでは、「見ため」に関すること以外にも、音声に関することについても定義されています。

CSSのデメリット

CSSの使用には、1つだけデメリットがあります。それは、現時点では、一般的なブラウザの中でCSSに完全対応しているものが存在せず、ブラウザによって対応状況もまちまちであることです。

しかし、HTML/XHTMLによる文書の意味の定義とCSSによるスタイルの制御は分離されるため、文書の内容が全く表示されないということはありません。

CSSのバージョンと対応状況

現在の最新は、CSSレベル2です。CSS3は策定中です。CSS2を完全にサポートしているブラウザは現在のところありませんし、対応状況もまちまちです。最近の新しいブラウザは、よく使用されるものに関してはほとんど問題ないですが、一応、いろんなブラウザでチェックしたほうが良いでしょう。

尚、一般的によく使用されているブラウザの中で、CSSに最も良く対応しているのは、Mozilla、firefoxです。

CSS

ページの先頭

CSS入門