@規則

目次

  1. @charsetと文字コード
  2. @import
  3. @mediaとメディアタイプ
  4. @page

"@"から始まる命令を@規則(at-rule)と言います。@規則には次の四つがあります。

@charsetと文字コード

スタイルシートに日本語などが含まれるとき、ユーザーエージェントはスタイルシートの文字コードを識別する必要があります。スタイルシートがソース文書中に埋め込まれている場合は(HTMLのstyle要素やstyle属性)、スタイルシートの文字コードはその文書全体の文字コードに一致します。外部スタイルシートが用いられている場合、ユーザーエージェントは次のようにしてそのスタイルシートの文字コードを判別します。

  1. HTTPヘッダの"Content-Type"フィールドの"charset"パラメータを見る。
  2. もしそれがなければ、スタイルシートファイルのBOMもしくは@charset(後述)を探す。
  3. それもなければ、link要素のcharset属性の値を見る。
  4. さらにそれもなければ、そのスタイルシートを呼び出しているソース文書やスタイルシートファイルの文字コードを調べる。
  5. それでも分からなければ、utf-8とする。

@charsetを用いるときは、以下のルールを守らなければいけません。

これらのルールに反した@charsetは無視されます。

次の例ではスタイルシートの文字コードが"shift_jis"であることを明示しています。

@charset "shift_jis";

@import

@importを使うと別のスタイルシートを取り込むことができます。

@importによって読み込まれたスタイルシートの規則は、後に続く規則よりも前に記述されていると扱われます。(読み込まれたスタイルシートの内容が@importのあった位置に展開されると考えられます。)

@import url("common.css");
@import url("default.css") screen, print;
@import "print.css" print;

@mediaとメディアタイプ

CSS 2.1では、コンピュータの画面を表す"screen"、印刷媒体を表す"print"などのメディアタイプを、「連続」か「ページ」か、「対話的」か「静的」か、などのメディアグループに分類しています。それぞれのプロパティに適用できるメディアは、個別のメディアタイプではなくメディアグループによって示されます。(例えば、font-sizeプロパティが適用できるのは「視覚」グループのメディア、のように。)以下は、メディアタイプとメディアグループの一覧表です。

メディアタイプとメディアグループ
メディアタイプ 説明 メディアグループ
連続/ページ 視覚/聴覚/音声/触覚 グリッド/ビットマップ 対話的/静的
braille 点字 連続 触覚 グリッド 対話的、静的
embossed 点字プリンタ 連続 触覚 グリッド 静的
handheld 携帯電話のブラウザなど 連続、ページ 視覚、聴覚、音声 グリッド、ビットマップ 対話的、静的
print 印刷されたページや、印刷プレビュー ページ 視覚 ビットマップ 静的
projection 投影機 ページ 視覚 ビットマップ 対話的
screen コンピュータの画面 連続 視覚、聴覚 ビットマップ 対話的、静的
speech 音声ブラウザ、スクリーンリーダーなど 連続 音声 なし 対話的、静的
tty テレタイプ、端末など 連続 視覚 グリッド 対話的、静的
tv テレビ 連続、ページ 視覚、聴覚 ビットマップ 対話的、静的

@media規則は、スタイルの適用対象となるメディアタイプを特定します。@mediaの次にメディタタイプをカンマで区切って列挙し、その後{ }のブロックの中に規則集合を並べます。

@media print {
 p { font-family: serif }
}
@media screen {
 p { font-family: sans-serif }
}
@media screen, print {
 p { line-height: 1.2em }
}

@page

@page規則については13.2 Page boxes: the @page rule - Paged mediaを参照してください。

Information