Cascading Style Sheets解説

HTML/XHTMLでCSSを使うには


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

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

HTML:
<meta http-equiv="Content-Style-Type" content="text/css">
XHTML:
<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文書内に書く方法

スタイル指定を「style要素」内にまとめて書きます。style要素自身はhead要素の内容として(<head>・・・</head>間に)記述します。

HTML:
<head>
<title>test</title>
<style type="text/css">
<!--
 h1{color:#808080}
 p {text-indent:1em}
-->
</style>
</head>
XHTML:
<head>
<title>test</title>
<style type="text/css">
 h1{color:#808080}
 p {text-indent:1em}
</style>
</head>

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

一方、XHTMLではスタイル指定をコメントアウトしてしまうとその指定は無視されることになっていますので、もしも表示されてしまったら、と気になるのであれば、下記のlink要素を用いた方法で記述する必要があります。

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

link要素はhead要素の内容として(<head>・・・</head>間に)記述します。

HTML:
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
XHTML:
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>

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

勿論、個別のスタイル指定もlink要素で連携させることができます。この場合は、link要素を書く順番に注意して下さい。共通のスタイルシートを先に、個別のスタイルシートを後に書きます。

HTML:
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="test.css">
<link rel="stylesheet" type="text/css" href="add.css">
</head>
XHTML:
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="test.css" />
<link rel="stylesheet" type="text/css" href="add.css" />
</head>

@import

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

@import url(./sample.css);

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

追記

CSS2では、

@import "./sample.css";

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