@マークで始まる文

@マークで始まる文 (@ルール)

@ルールとは、@キーワード(@charset @importなど)から次に出現するセミコロン[;]あるいは、ブロック({...})終端子"}"までを指します。


/* @ルール */

@import "foo.css";    /* セミコロン[;]まで */

@media print {

  body {font-size:10pt}

}                     /* ブロック終端子"}"まで */

@キーワード(@charset @importなど)とそれに続く文の前後には自由に空白文字を挿入することができます。


@charset

"Shift_JIS";     /* @charset "Shift_JIS"; */

@import

url(foo.css);    /* @import url(foo.css); */

@キーワードのひとつである@importは、ブロック({...})内部に記述したり、セレクタとそれに続く宣言ブロック({宣言})の後に記述すると、無視される仕様となっているので、注意が必要です。


例えば、

@import "foo.css";

h1 { color:blue }

@import "moo.css";



2つ目の@importは、不正な記述となり無視され、CSSは下記のように解釈されます。

@import "foo.css";

h1 { color:blue }



また、次の例では@importが、@mediaブロックの中にあるので、無視されます。

@media print {

  @import "print-main.css";

  body { font-size:10pt }

}

@charset

C2- ie55- N6-

@charsetは、外部スタイルシートの先頭に記述して、その文書の文字セットを示します。HTMLでは、link要素のcharset属性を利用することによって、外部スタイルシートの文字セット(charset)を示すことができます。

@charset "Shift_JIS"; /* (C2- ie55- N6-) */

日本語の文字セットには、SHIFT_JIS(シフトJIS)、EUC-JP(EUC)、ISO-2022-JP(JIS)、UTF-8(Unicodeのエンコード方式の1種、日本語だけでなく他言語の文字セットを含む)などがあります。文字セットは大文字小文字を区別しません。

@import

C1- ie4- N6-

@importを使用すると、外部スタイルシートを取り込むことができます。取り込むスタイルシートのURIは、url(URI)形式のほかに、URIのみを文字列として指定することもできます。@importは、実際にスタイルを指定するどの文よりも前の位置に記述しておかなければ無視される仕様となっていますので、注意が必要です。

HTML文書における記述


<style type="text/css"><!--

  @import url(foo.css);   /* (C1- ie4- N6-) 常に一番最初に記述 */

  h1 { color:blue }

--></style>

外部スタイルシートの記述


@charset "Shift_JIS";   /* @charset, @importのどちらが先になっても構いません */

@import url(foo.css);   /* @charset, @importのどちらが先になっても構いません */

h1 { color:blue }

また、@importは、メディアタイプを指定して、出力先に応じてスタイルシートを取り込むこともできます。この場合、@mediaと同様にコンマ[,]で区切って複数のメディアタイプを指定することができます。メディアタイプを指定しなかった場合は、「all」が指定された場合と同様に解釈されます。


@import url("foo.css");

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

@import url("tv.css") projection, tv;



上の例は次のように書くこともできます。



@import "foo.css";

@import "print.css" print;

@import "tv.css" projection, tv;

CSS2のメディアタイプ

all	すべてのデバイス (初期値)
aural	音声による出力
braille	点字ディスプレイ
embossed	点字プリンタ
handheld	携帯用端末
print	プリンタ
projection	プロジェクタ
screen	一般のコンピュータ画面
tty	文字幅が固定の機器
tv	テレビ

メディアタイプに大文字小文字の区別はありません。

HTML、XHTMLでもlink要素のmedia属性を用いてメディアタイプを指定することができます。


<link rel="stylesheet" type="text/css" media="print, handheld" href="foo.css">

@media

C2- ie4- N6-

CSS2のプロパティの中には、音声による出力や印刷専用のものがあります。@mediaを使用すると、出力先別のスタイルシートを記述することができます。出力先を示すには、HTMLと同様のメディアタイプを使用します(ただし、CSS2には｢embossed｣が追加されています)。

CSS2のメディアタイプ

all	すべてのデバイス (初期値)
aural	音声による出力
braille	点字ディスプレイ
embossed	点字プリンタ
handheld	携帯用端末
print	プリンタ
projection	プロジェクタ
screen	一般のコンピュータ画面
tty	文字幅が固定の機器
tv	テレビ

メディアタイプに大文字小文字の区別はありません。

@mediaは、以下のような形式で指定します。メディアタイプは、@mediaの後に指定し、コンマ[,]で区切って複数指定することもできます。


@media print {                /* (C2- ie4- N6-) */

  body { font-size: 10pt }

}

@media screen {

  body { font-size: 12pt }

}

@media screen, print {

  body { line-height: 1.2 }

}

HTML、XHTMLでもlink要素のmedia属性を用いてメディアタイプを指定することができます。


<link rel="stylesheet" type="text/css" media="print, handheld" href="foo.css">

@page

C2- ie5-

@pageを使用すると、ページボックスのサイズ、向き、マージンなどを指定することができます。


@page{                 /* (C2- ie5-) */

  size: 20cm 30cm;     /* サイズ 横幅×高さ */

  margin: 3cm;         /* マージン */

  marks: crop cross;   /* トンボ */

}

また、@pageにあらかじめ名前を付けておき、pageプロパティで特定の要素にそれを適用させることができます。名前を付ける場合は、次のように@pageの後に指定します。


@page narrow {size: 9cm 18cm}

table {page: narrow}

@pageには、「:first」「:left」「:right」という専用の3つの疑似クラスも用意されています。これらを指定すると、それぞれ「最初のページ」「左のページ」「右のページ」に対してページ設定が適用されます。


@page :left {

  margin-left: 3cm;

  margin-right: 2cm;

}



@page :right {

  margin-left: 2cm;

  margin-right: 3cm;

}

@font-face

C2- ie4-

@font-faceを使用すると、スタイルシートでのフォントの指定と実際に使用するフォントデータ対応関係を示すことができます。たとえば、「Times New Roman」はフォントファミリー名ですが、実際にはその中に「Times New Roman Bold」「Times New Roman Italic」「Times New Roman Bold Italic」などという個別のフォントが含まれています。しかし、スタイルシートのプロパティでは、フォントファミリーのみの指定しかできません。

また、スタイルシートのプロパティでフォントの太さを指定することができますが、100-900のうち、どれを指定すると「Times New Roman Bold」が使用されるかなども定められていません。@font-faceを使用すると、これらの対応を以下の例のように明確に示すことができます。

この例の場合「src: local("フォント名")」で示しているのが実際に使用するフォントで、それ以外の部分は、そのフォントを選択する条件を示しています。たとえば、一番下の@font-faceでは、font-familyプロパティで「Times New Roman」が指定され、かつfont-styleの値が「Italic」または「oblique」で、font-weightの値が「500-900」の場合は「Times New Roman Bold Italic」を使用するように定義しています。


@font-face {                               /* (C2- ie4-) */

  src: local("Times New Roman Italic");

  font-family: "Times New Roman";

  font-style: italic, oblique;

}



@font-face {

  src: local("Times New Roman Bold");

  font-family: "Times New Roman";

  font-style: normal;

  font-weight: 500,600,700,800,900;

}



@font-face {

  src: local("Times New Roman Bold Italic");

  font-family: "Times New Roman";

  font-style: italic, oblique;

  font-weight: 500,600,700,800,900;

}

実際には、src: url(URI)形式でフォントをダウンロードさせたり、フォントの形式を指定することができます。また、上記のほかにフォントの選択方法や加工方法に関して20種類以上の指定方法も用意されています。しかし、実際にはほとんどサポートされていない機能ということもあって本リファレンスでは割愛させて頂きます。興味のある方は、CSS2仕様の「15.3 Font selection」を参照してください。