19. @規則
ここでは、主な「@規則」について説明する。
@media規則
「@media規則」は、出力メディアを特定し、その出力メディア用のスタイルシートを記述することができる。 その書式は以下のとおりである。
@media メディアタイプ { スタイルシートの記述 }
メディアタイプには、以下のものが指定できる。
メディアタイプ | 説明 |
---|---|
all | すべてのメディア |
braille | 視覚障害者向けスクリーンメディア。(例:点字ディスプレイ) |
embossed | 視覚障害者向け印刷メディア。(例:点字プリンタ) |
印刷出力 | |
projection | プロジェクター。(例:OHP) |
screen | 一般的な画面出力。(例:PCディスプレイ) |
speech | 音声出力。(例:音声ブラウザ) |
tty | 固定ピッチフォントの表示装置。(例:携帯電話) |
tv | 一般的なテレビ。 |
例えば、強調要素をPCディスプレイでは赤、印刷出力では黒のようにしたい場合、つぎのようなスタイルシートを記述する。
@media screen {
em { color: red; }
}
@media print {
em { color: black; }
}
また、印刷出力では黒、それ以外であれば強調要素を赤、のようにしたい場合、つぎのようなスタイルシートを記述する。
em { color: red; }
@media print {
em { color: black; }
}
@import規則
「@import規則」は、インポートしたい他のスタイルシートを指定する。 その書式は以下のとおりである。
@import URL [メディアタイプ];
'URL'の部分は、"url( )関数形式"でも、引用符を用いた文字列形式、どちらでもよい。 つまり、つぎの例はすべて同じ意味である。
@import url(style.css);
@import url("style.css");
@import "style.css";
また、特定のメディアタイプの場合のみインポートしたい場合は、メディアタイプを合わせて記述する。
@import url(style.css) print;
最後に注意すべきことは、"@import規則"は、"@charset規則"以外のすべての規則よりも先に記述する点である。 つまり、スタイルシートの途中に"@import規則"が出現することはない。
@charset規則
「@charset規則」は、スタイルシートのエンコーディングを明示的に指定する。 その書式は以下のとおりである。
@charset "エンコーディング名";
"@charset規則"の注意としては、以下の3点である。
- 1つのスタイルシートに複数の"@charset規則"を記述してはならない。
- スタイルシートの先頭行、第1文字目から記述する。
- 外部スタイルシートにのみ記述できる。
つぎに、文字エンコーディングに'UTF-8'を使用した場合の例を示す。
@charset "UTF-8";