

#
“@ルール”とは?
“@ルール(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";
}
#
@ルールの一覧
@ルール | 説明 |
---|---|
@charset | スタイルシートの文字エンコーディングを指定する |
@counter-style | カウンター・スタイルを定義する |
@else | |
@font-face | |
@import | 他のスタイルシートを読み込む |
@keyframes | アニメーションのキーフレームを設定する |
@layer | |
@media | スタイルが適用されるメディアやデバイスを限定する |
@namespace | 名前空間の接頭辞を定義する |
@page | |
@scope | |
@supports | スタイルが適用される対象を特定の機能に対応しているメディアやデバイスに限定する |
@when |
#