← 2.18 テーブル CSS総目次 2.20 スタイルコンテナ →
このページでは,主な「@規則」について説明します。
「@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 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規則"の注意としては,以下の3点があります。
つぎに,文字エンコーディングに"UTF-8"を使用した場合の例を示します。
@charset "UTF-8";