@規則の種類
CSS 2では、次の5種類の@規則が定義されています。
| @規則 | 説明 |
|---|---|
@charset |
文字コードの指定 |
@import |
外部スタイルシートの取り込み |
@media |
メディアタイプの指定 |
@page |
ページボックスの指定 |
@font-face |
フォントに関する指定 |
@charset（文字コード）の指定
外部スタイルシートの文字コードを指定します。
- この指定は、外部スタイルシートファイル内でのみ使用できます。（HTML文書内では使用できません）
指定方法は次のようになります。
@charset "Shift_JIS";
上記の例では、シフトJIS文字コードを指定しています。他の文字コードを指定する場合は次のようになります。
@charset "EUC-JP";
または
@charset "UTF-8";
@charset の指定は、外部スタイルシート内の先頭に1つだけ記述することができます。（他の内容を先行させてはなりません）
@charset "Shift_JIS";
/* コメント */
body { margin: 0; padding: 0; }
h1 { color: #ff0000; }
p { line-height: 140%; }
@import（取り込み）の指定
HTML文書内、または外部スタイルシート内に、別の外部スタイルシートを取り込む指定です。
指定方法は次のようになります。
@import url("example.css");
上記の例では、example.css という外部スタイルシートファイルを取り込んでいます。
また、次のように url( ) を使わずに指定することもできます。
@import "example.css";
@import の指定を行う場合は、他の内容よりも前に記述する必要があります。ただし、@charset（文字コードの指定）がある場合は、その指定の後に記述します。
以下は、外部スタイルシート内で使用した例です。
@charset "Shift_JIS";
@import url("example.css");
/* コメント */
body { margin: 0; padding: 0; }
h1 { color: #ff0000; }
p { line-height: 140%; }
HTML文書内で使用する場合は、次のようにstyle要素内の先頭に記述します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
@import url("example.css");
body { margin: 0; padding: 0; }
h1 { color: #ff0000; }
p { line-height: 140%; }
</style>
</head>
<body>
</body>
</html>
URIの指定の後にメディアタイプを記述すると、そのスタイルをどのメディアに対して適用させるかを指定することができます。
- ただし、IE 7以下ではこの指定に対応していません。（メディアタイプを指定すると、外部スタイルシートを取り込めなくなってしまいます）
@import url("example1.css") screen, tv;
@import "example2.css" print;
メディアタイプは、カンマ（ , ）で区切って複数指定することが可能です。上記の例では、example1.css は screen と tv で、example2.css は print で使用されることになります。
- メディアタイプを指定しなかった場合は、全てのメディアが適用対象になります。
メディアタイプの種類については、次の項目をご覧ください。
@media（メディアタイプ）の指定
この指定を行うと、出力先のメディア別に異なるスタイルを適用させることができます。
CSS 2では、次の10種類のメディアタイプが定義されています。
| メディアタイプ | 説明 |
|---|---|
screen |
コンピュータ画面を対象にする |
tty |
テレタイプなどの文字幅が固定の機器を対象にする |
tv |
テレビを対象にする |
projection |
プロジェクターを対象にする |
handheld |
モバイル機器を対象にする |
print |
プリンタを対象にする |
braille |
点字出力機器を対象にする |
embossed |
点字プリンタを対象にする |
aural |
音声出力機器を対象にする （CSS 2.1では speech に変更されています） |
all |
すべてのメディアを対象にする |
- HTML側のメディアタイプには、
embossedは定義されていないので注意してください。
指定方法は次のようになります。
@media screen {
strong { color: red; }
}
上記の例では、コンピュータ画面向け（screen）のスタイルを指定しています。
次のように、カンマ（ , ）で区切って複数のメディアタイプを指定することもできます。
@media screen, print {
strong { color: red; }
}
以下は、コンピュータ画面とプリンタに対して、別々のスタイルを適用させた例です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
@media screen { /* コンピュータ画面向けのスタイル */
strong { color: red; }
}
@media print { /* プリンタ向けのスタイル */
strong { text-decoration: underline; }
}
</style>
</head>
<body>
<p><strong>パソコンの画面では赤いテキストになりますが、プリンタでは下線付きのテキストで印刷されます。</strong></p>
<p>※違いは印刷プレビューでも確認することができます。</p>
</body>
</html>
@page（ページボックス）の指定
ページボックスのサイズやマージン等、印刷時のページ設定を行う指定です。
- 複雑なので省略させていただきます。
@font-face（フォント）の指定
フォントに関する細かい設定を行います。
- 更に複雑なので省略させていただきます。