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

HOME / WEB関連知識のスキルアップ / HTMLクイック･リファレンス / CSSの基本 / @ルール（@で始まる書式）

★CSSの基本

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

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となります。

例：@charsetによる文字コードの指定（外部CSSファイルの先頭に記述）

@charset "Shift_JIS";

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

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

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

例：@importでURLを指定する方法（書式は違っても意味はすべて同じ）

@import url("sample.css");
@import url('sample.css');
@import url(sample.css);
@import "sample.css"; /*この書式は古いブラウザでサポートされていない*/
@import 'sample.css'; /*この書式は古いブラウザでサポートされていない*/

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

例：メディアタイプを指定して外部CSSファイルをインポートする

@import url("browse.css") screen,tv;
@import url("mobile.css") handheld;
@import url("print.css") print;

⬛︎ <link>要素と@importの違い

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

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

例：@mediaでメディアタイプを指定してスタイルを適用

@media screen,tv {
    body {font-size:large;}
}
@media handheld {
    body {background:#000000; color:#ffffff;}
}
@media print {
    body {background:#ffffff; color:#000000; font-size:12pt;}
}

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

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

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

例：@pageによるページボックスの定義

@page {margin:15mm;}
@page tateichi {size:portrait; margin:15mm;}
@page yokoichi {size:landscape; margin:15mm;}

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

例：@pageによるページボックスの指定

@page:first {margin-top:20mm;}
@page:left {margin-right:20mm;}
@page:right {margin-left:20mm;}

記事一覧へ

★CSSの基本