このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

@ルール

記事Aug.2nd,2021
CSSルールをグループ化して条件を付けたり、特定の要素に関連付けられないスタイルの設定などを行うために使用できるCSSの@ルールについて
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

“@ルール”とは?

@ルール(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)”はスタイルを指定するプロパティと同じく宣言の一種ですが、特定の@ルールに関連付けられ、その@ルールの中でだけ使用することができます。

@font-face {
font-family: 'my-font';
src:
url('font/web-font-regular.woff') format('woff'),
url('font/web-font-regular.woff2') format('woff2');
}

@ルールの一覧

@ルール 説明
@charset スタイルシートの文字エンコーディングを指定する
@counter-style
@font-face
@import 他のスタイルシートを読み込む
@keyframes アニメーションのキーフレームを設定する
@media スタイルが適用されるメディアやデバイスを限定する
@namespace 名前空間の接頭辞を定義する
@page
@supports スタイルが適用される対象を特定の機能に対応しているメディアやデバイスに限定する

仕様書

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク