最終更新日

@ルール

@import @charset @media @page @namespace @counter-style @keyframes @font-face

@import

@importは、外部CSSファイルを取り込みます。@importは、他の@ルールや宣言ブロックよりも前に記述しなくてはなりません。ただし、文字コードを指定する@charsetがある場合はその直後に記述します。

サンプルコード
@import url("mystyle.css");

@charset

@charsetは外部CSSファイルの文字コードを指定します。
外部CSSファイルの先頭に1つだけ記述する事ができます。

サンプルコード
@charset "UTF-8";

@media

@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は、ページボックスを定義します。内容全体がこの範囲内に入るように縮小されたり、複数のシートへ分割して出力されたりします。

サンプルコード
@page{
	size: portrait;
	margin: 12mm;
	}

@namespace

@namespaceは、名前空間を指定し、スタイルシートをその名前空間に関連付けます。

サンプルコード
@namespace url("http://www.w3.org/1999/xhtml");

@counter-style

リストの先頭に表示するマーカーを作成します。スタイルシート内に以下のような形式で記述します。

@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: '、';
}

参考文献:CSS Lists and Counters Module Level 3外部リンク

@keyframes

@keyframesは、アニメーションでのキーフレームを定義します。トータルに対する割合で指定します。

サンプルコード
@keyframes '識別子'{
	パーセンテージ{プロパティ:値;}
	}

@font-face

@font-faceは、サイト制作者が意図するフォントを指定するための@ルールです。サイト制作者が自身のフォントを提供できるため、@font-faceはユーザのデバイスにインストールされているフォントを気にする必要がありません。

サンプルコード
@font-face{
	font-family: "Meiryo";
	src: url("http://example.com/fonts/Meiryo.ttf");
	}

p{
	font-family: "Meiryo";
	}
▲ PAGE TOP
HOME
当サイトの活動をサポートしてみませんか?気軽にクリエイターの支援ができます。