CSS-アットマーク規則
アットマーク「＠」規則とは
アットルール「＠」規則は、セレクタとプロパティでは指定できない機能を補うための定義規則です。
「＠」キーワードとそれに続く識別子を続けて記述します。
文字コードの指定(@charset)
外部スタイルシートの文字コードを指定します。
@charset の指定は、外部スタイルシート内の先頭に1つだけ記述することができます。（他の内容を先行させることはできません）
CSSではコメントの入力やフォント名などで半角英数字以外の漢字や平仮名などの日本語（マルチバイト）の文字列を扱うことがあります。
CSSにマルチバイト文字を利用する場合、スタイルシートを参照する文書（HTML）の記述文字コードとCSSファイルの文字コードが異なると、マルチバイト部分の文字列が文字化けを起こし、ブラウザがスタイル情報を正しく解釈することができないことがあります。
そのため、文字コードが異なる場合は「@charsetルール」でCSSファイル自体の文字コードを指定すれば、ブラウザがスタイル情報を正しく解釈できことが期待できます。
@charset "Shift_JIS";
@charset "EUC-JP";
@charset "UTF-8";
外部スタイルシートの取り込み(@import)
HTML文書内、または外部スタイルシート内に、別の外部スタイルシートを取り込む指定です。
@importルールはスタイルシートの記述内容が多くなった場合に、複数ファイルにわけて整理する場合などに有用です。
指定方法は、@import に続いて、url(URI) の形式で、CSSファイルの所在を指定します。URIは相対URI、または絶対URI で指定します。
@import の指定を行う場合は、他の内容よりも前に記述する必要があります。
ただし、@charsetがある場合は、その指定の後に記述します。
以下２種類の記述方法があります。
@import url(xxx.css);
@import "xxx.css";
メディアタイプの指定(@media)
出力先のメディア別に異なるスタイルを適用させることができます。
カンマ（ , ）で区切って複数のメディアタイプを指定することもできます。
@media screen, print {
strong { color: red; }
}
CSS 2では、次の10種類のメディアタイプが定義されています。
| タイプ | 説明 |
|---|---|
| all | すべてのメディアを対象にする |
| screen | コンピュータ画面を対象にする |
| tty | テレタイプなどの文字幅が固定の機器を対象にする |
| tv | テレビを対象にする |
| projection | プロジェクターを対象にする |
| handheld | モバイル機器を対象にする |
| プリンタを対象にする | |
| braille | 点字出力機器を対象にする |
| embossed | 点字プリンタを対象にする |
| aural | 音声出力機器を対象にする |
ページボックスの指定(@page)
印刷時におけるページの余白（マージン）や改ページ位置等のページ設定を行う指定です。
orphansプロパティ, page-break-afterプロパティ, page-break-beforeプロパティ, page-break-insideプロパティ, widowsプロパテが用意されています。
なお、@pageルールに対応しているブラウザはほとんどありません。
フォントに関する指定(@font-face)
フォントに関する細かい設定を行います。
CSS2.1では削除予定とされています。