Cascading Style Sheets解説

HTMLでCSSを使うには


基準となるスタイルシート言語の指定

スタイルシートを用いてスタイル指定をする場合、そのHTML文書に対してどのスタイルシート言語を用いるのかをmeta要素で宣言しておく必要があります。CSSを用いる場合は、head要素内に以下のようなmeta宣言を記述します。

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

style要素、及びstyle属性を用いる場合は必ず上記の宣言が必要となります。ただし、link要素を用いてスタイルシートと連携させている(且つstyle要素、style属性を使っていない)場合には、必ずしも必要ではないようです。


さて次ですが、実際にスタイルシートを使うためには、以下に挙げる3つの方法が用意されています。それぞれの方法は1つのHTML文書内で同時に使用することが出来ます。

その1.開始タグの「style属性」にスタイル指定を書く方法

<P STYLE="color:blue">ここの文字は青色になります。</P>

開始タグの「style属性」に直にスタイル指定を書く方法です。「局所的にスタイル指定したい」といった場合には便利だと思いますが、「この方法だけで全てのスタイル指定をする」というのは避けた方がいいでしょう。無駄が多くなりますし、HTML文書がゴチャゴチャしてしまいますからね。私見で言えば、それほど多用する方法ではないかな、といった感じです。(別に「使うな」と言ってるわけじゃないんで、用途に応じてこの方法も使っていいと思います。)

その2.style要素を用いてHTML文書内に書く方法

<HEAD>
<TITLE>test</TITLE>
<STYLE TYPE="text/css">
<!--
 H1{color:#808080}
 P {text-indent:1em}
-->
</STYLE>
</HEAD>

スタイル指定は「STYLE要素」内にまとめて書きます。STYLE要素自身は<HEAD>・・・</HEAD>間に記述します。

スタイルシートに対応していないUAでは、STYLE要素の内容がそのまま表示されてしまうかもしれませんので、上の例のようにスタイルの定義部をコメントアウトしておいた方がいいでしょう。

その3.LINK要素を用いて、別ファイルとして用意したスタイルシートと連携

<HEAD>
<TITLE>test</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="test.css">
</HEAD>

この場合、スタイル定義は別ファイル(上の例では「test.css」)にまとめて記述しておきます。各HTML文書共通のスタイル指定をこの方法で指定し、それぞれのHTML文書個別のスタイル指定は「その2.」の方法で記述する、といった使い方も考えられるでしょう。

@import

CSSでは、シート内に「@import」を用いることで別ファイルとして用意したスタイルシートを取り込むことが可能です。その記法は、@importキーワードの後に「url(」と「)」の間にURLを指定します。

@import url(./sample.css);

@import文は、そのシート内の他の宣言よりも先、つまり、そのスタイルシートの先頭に記述しなくてはなりません。

追記

CSS2では、

@import "./sample.css";

なる書き方も可能となりました。