@ルール

“@ルール”とは？

“@ルール(At-rules)”はアットマーク(“@”)によって他のスタイル・ルールと区別されるCSSルールで、特定の要素に適用するスタイルを定義するのではなく、他の様々な目的で使用することができます。

@import url(stylesheet-2.css) ;
@namespace url(http://www.w3.org/1999/xhtml) ;

@media all and (max-width: 640px) {

...

@ルールは次のような目的で使用されます。

他のCSSルールをグループ化、構造化する

グループ化したCSSルールの適用条件を限定する“@supports”や“@media”

特定の要素に関連付けられないスタイルを定義する

リスト・マーカーを定義する“@counter-style”や外部フォントを定義する“@font-face”など

構文を管理する

別のファイルに記述されたCSSルールを読み込む“@import”や名前空間を表す接頭辞を定義する“@namespace”

スタイル・ルールで表現できないその他の用途

アニメーションのキーフレームに関する指定をする“@keyframes”など

@ルールの構文

@ルールの構文はさまざまで、その構文はそれぞれ個別に仕様書で定義されますが、“宣言@ルール”と“ブロック@ルール”の2種類に大別されます。

“宣言@ルール(Statement at-rules)”はアットマーク(“@”)と@ルールの名前を表すキーワードの後にいくつかの値が続き、セミコロン(“;”)で終わります。

@import url(stylesheet-dark.css) screen and (prefers-color-scheme: dark) ;


“ブロック@ルール(Block at-rules)”はアットマーク(“@”)と@ルールの名前を表すキーワードの後に、@ルールによってはいくつかの値があり、最後は括弧(“{”と“}”)で囲まれたブロックで終わります。ブロックに含むことができる内容は@ルールごとに定義されており、他の@ルールやスタイル・ルールなどのCSSルール、“ディスクリプタ”などを記述します。

@media (prefers-color-scheme: dark) {

@supports (display: flex) {

div {

display: flex;

}

}

div {

background-color: #121212; /* ■ */
color: #e1e1e1; /* ■ */

}

}

“ディスクリプタ(Descriptors)”はスタイルを指定するプロパティと同じく宣言の一種ですが、特定の@ルールに関連付けられ、その@ルールの中でだけ使用することができます。

@counter-style sample-counter {

system: cyclic;
symbols: "\1F400" "\1F402" "\1F405" "\1F407" "\1F409" "\1F40D" "\1F40E" "\1F40F" "\1F412" "\1F413" "\1F415" "\1F417";

}

@ルールの一覧

仕様書