最終更新日
@import | @charset | @media | @page | @namespace | @counter-style | @keyframes | @font-face |
@importは、外部CSSファイルを取り込みます。@importは、他の@ルールや宣言ブロックよりも前に記述しなくてはなりません。ただし、文字コードを指定する@charsetがある場合はその直後に記述します。
@import url("mystyle.css");
@charsetは外部CSSファイルの文字コードを指定します。
外部CSSファイルの先頭に1つだけ記述する事ができます。
@charset "UTF-8";
@mediaは、メディアタイプを指定してスタイルを適用します。@mediaを記述しない場合は、すべてのメディアでスタイルが適用されます。複数のメディアに同じスタイルを適用する場合には、メディアタイプをカンマで区切って指定します。
@media print{ body{font-size:13px;} h1{font-size:20px;} } @media handheld{ body{font-size:13px;} h1{font-size:20px;} } @media handheld,print{ body{line-height:1.2em;} }
@pageは、ページボックスを定義します。内容全体がこの範囲内に入るように縮小されたり、複数のシートへ分割して出力されたりします。
@page{ size: portrait; margin: 12mm; }
@namespaceは、名前空間を指定し、スタイルシートをその名前空間に関連付けます。
@namespace url("http://www.w3.org/1999/xhtml");
リストの先頭に表示するマーカーを作成します。スタイルシート内に以下のような形式で記述します。
@counter-style マーカー名 { 記述子: 値; }
以下のような記述子を指定できます。
type:マーカーの種類を指定します。
glyphs:マーカーに使用する文字を指定します。
suffix:マーカーの接尾辞を指定します。
@counter-style triangle{ type: repeating; glyphs: '▶'; suffix: ''; } @counter-style check{ type: repeating; glyphs: '¥2713'; /* '✓' */ suffix: ''; } @counter-style asterisks{ type: symbolic; glyphs: '¥2A'; /* '*' */ suffix: ''; } @counter-style kansuji{ type: numeric; glyphs: '¥3007' '¥4E00' '¥4E8C' '¥4E09' '¥56DB'; /* '〇' '一' '二' '三' '四' '五' */ } @counter-style kouotu{ type: alphabetic; glyphs: '¥7532' '¥4E59' '¥4E19' '¥4E01' '¥620A'; /* '甲' '乙' '丙' '丁' '戊' */ suffix: '、'; }
@keyframesは、アニメーションでのキーフレームを定義します。トータルに対する割合で指定します。
@keyframes '識別子'{ パーセンテージ{プロパティ:値;} }
@font-faceは、サイト制作者が意図するフォントを指定するための@ルールです。サイト制作者が自身のフォントを提供できるため、@font-faceはユーザのデバイスにインストールされているフォントを気にする必要がありません。
@font-face{ font-family: "Meiryo"; src: url("http://example.com/fonts/Meiryo.ttf"); } p{ font-family: "Meiryo"; }