@規則

CSSのルール定義の始まる前に@規則と呼ばれる記法で 書かれた特別なCSS記述読み込み処理を行なわせられる。いずれの@規則も 個別の定義のあとに来るものは無視されるべきものなので、

× ふさわしくない例

h1 {text-align: center}
@import "foo.css";

の2行目、「@import "foo.css";」は 無視される(@importについては後述))。これは、

○ ふさわしい例

@import "foo.css";
h1 {text-align: center}

のような順番で書く必要がある。@規則による文はいくつ書いてもよいが、 必ず全ての@規則の文を終えたあとで特性値の定義に進む。

@media

文書を出力するメディアによって、それ固有のスタイルを切り替える ことが必要となる場合がある。出力先にはディスプレイ画面、投影機、 紙、音声読み上げ装置、点字装置などがあり、各々に固有のスタイル、 あるいは似通っているが違う効果を持たせた方がよいスタイルを 切り替えることがよい場合がある。

メディア型

CSSは特定の出力先メディアによって、設定できる特性の集合が決まる。 ただしそうした集合は、具体的な装置名で決まるのではなく概念的な 機能によって分類される。たとえば、「コンピュータディスプレイ」のような 具体的種別名ではなく、screen という抽象名が決まっている。これを メディア型という。

CSSで区別されるメディア型には以下のものがある。

aural

音声読み上げ装置の類に該当するものを想定

braille

点字装置の類に該当するものを想定

embossed

ページ付けした点字プリンタの類

handheld

ハンドヘルド装置の類(携帯可能で、小さい画面、少ない色数、 遅い通信速度、などの制約を持つものを想定

print

ページ付けした印刷物を想定

projection

投影画面(スライドやOHP、プロジェクタなど)

screen

十分なカラー表示機能を持つコンピュータ画面

tty

文字端末あるいは表示能力が制限された装置

tv

テレビのようなメディア(カラー表示可能だが、低解像度、スクロール できない画面で音を出す機能があるもの)

all

上記全てに適用可能なものを示す

メディアによる切り替え

@規則による切り替えは以下のように表記する。

@media メディア型(群) { スタイル定義本体…… }

メディア型(群)の部分には、前述のメディア型 を1つ、またはカンマ(,)で区切って列挙する。以下の例はディスプレイ画面と 紙メディアでのフォントサイズを別々に指定するものである。

@media print {
  body {font-size: 10pt}
}
@media screen {
  body {font-size: 12pt}
}

@import

ひとつのスタイルシート(ファイル)から別のスタイルシートを取り込むこと ができる。これには@import規則を使う。あるスタイルシートから、 別のスタイルシート(foo.css)を取り込むには以下のようにする。

@import "foo.css";

または、

@import url("foo.css");

ファイルの取り込みを特定のメディア用に限定するために、 前述のメディア型を後置することができる。たとえば、

@import url("paper.css") print;

とすると、出力メディアが印刷物(print)の場合のみ、"paper.css" を取り込む。また、

@import url("color.css") screen, projection;

のように、メディア型をカンマで区切って複数指定することもできる。

yuuji@koeki-u.ac.jp