■@ルール（@で始まる書式）

CSSには@で始まる@ルール（at-rule）と呼ばれる書式が定められています。 これらはCSSでスタイルシートを記述するにあたってのルールを定義するものです。

@charset（外部スタイルシートの文字コード指定）

@charsetは（HTML/XHTML文書のではなく）外部CSSファイルの文字コードを指定する際に使用します。 @charsetは外部CSSファイルの先頭に1つだけ記述します。 HTML/XHTML文書の<style>要素内には記述できないので注意してください。 文字コードの値は、シフトJISの場合はShift_JIS、JISの場合はISO-2022-JP、EUCの場合はEUC-JP、UTF-8の場合はUTF-8となります。

@import（外部スタイルシートのインポート）

@importは別ファイルの外部スタイルシートを取り込む際に使用します。 @importはHTML文書の<style>要素内や外部スタイルシートの中で記述することができますが、 他の@ルールや宣言ブロックよりも前に記述しなくてはなりません。 ただし、文字コードを指定する@charsetがある場合にはその直後に記述します。

@importで外部スタイルシートファイルをインポートする場合には、 url( )関数による書式のほかに、url( )関数を省略した書式でも指定可能です。 ただし、url( )関数を省略した書式は古いブラウザでサポートされていない場合があるので注意してください。 どの書式も最後にセミコロン（ ; ）が必要です。

また、@importの最後にメディアタイプを記述すると、メディアタイプを指定してスタイルシートを取り込むことができます。 メディアタイプを複数指定する場合にはカンマ（ , ）で区切ります。 指定できるメディアタイプは、<link>要素や<style>要素のmedia属性で指定できる値と同じです。

<link>要素と@importの違い

HTML文書から外部CSSファイルを呼び出す方法には、<link>要素を使う方法と@importを使う方法があります。 この2つの指定方法は、一般的なブラウザでは同じような動作になりますが、意味合いが異なります。

HTML文書に複数の<link>要素を記述して、複数の外部CSSファイルを読み込む場合には、 ブラウザは適用するスタイルシートの選択肢を閲覧者（ユーザー）に示すことになっており、 ユーザーに選択されなかったスタイルシートは適用されません。 一方、複数の@importを記述した場合には、複数のCSSファイルを統合して、あたかも1つのCSSファイルのように適用されます。

実際には、Internet Explorerなどのブラウザは、<link>要素を完全にはサポートしておらず、 <link>要素で複数のCSSファイルを呼び出した場合、それらのスタイル指定が連鎖的に引き継がれて適用されます。 結果として、<link>要素によるCSSファイルの読み込みと、@importによるCSSファイルの読み込みは同じような動作となります。

@media（メディアタイプを指定してスタイルを適用）

@mediaはメディアタイプを指定してスタイルを適用する際に使用します。 @mediaはHTML文書の<style>要素内や外部スタイルシートの中で記述することができますが、 記述しない場合にはすべてのメディアでスタイルが適用されるようになります。

@mediaで指定できるメディアタイプの値は、<link>要素や<style>要素のmedia属性で指定できる値と同じです。 複数のメディアタイプに同じCSSを適用する場合には、メディアタイプの値をカンマ（ , ）で区切って指定します。

@page（ページボックスを定義）

@pageはページボックス（page box）を定義する際に使用します。 ページボックスとは、主に印刷スタイルとして指定される限定された大きさのボックスです。 内容全体がこの範囲内に入るように縮小出力されたり、複数のシートへ分割出力されます。

以下の使用例のtateichiとyokoichiは任意に付けた名前ですが、 ここで指定したページボックスの名前は、スタイルシートのpageプロパティの値として指定することができます。

@pageには:first、:left、:rightという擬似クラスを指定することができます。 それぞれ、最初のページ・左ページ・右ページの出力スタイルを指定する際に使用します。

Sponsors