CSS/At-rules

At-rules

CSSのAt-rules（アットルール）は、@から始まる特殊な宣言で、スタイルシートの挙動や構造を制御するために使用されます。以下は、主要なAt-rulesの一覧とその簡単な説明です。

@charset

詳細は「CSS/@charset」を参照

指定された文字セットをスタイルシートに適用します。スタイルシートの最初に記述する必要があります。

例：

@charset "UTF-8";

@color-profile

詳細は「CSS/@color-profile」を参照

カラープロファイルを指定します。色の管理が必要な際に使用されます。

例：

@color-profile my-profile {
  src: url("sRGB.icc");
}

@container

詳細は「CSS/@container」を参照

コンテナクエリを定義します。コンテナのサイズや型に応じたスタイルを適用するのに使います。

例：

@container (min-width: 300px) {
  .box { color: blue; }
}

@counter-style

詳細は「CSS/@counter-style」を参照

カスタムのカウンタースタイルを作成します。

例：

@counter-style star-counter {
  system: cyclic;
  symbols: ★ ☆;
}

@document (非標準・非推奨)

詳細は「CSS/@document (非標準・非推奨)」を参照

特定のドキュメントやURLに適用するルールを記述しますが、非推奨であり使用しないことが推奨されます。

@font-face

詳細は「CSS/@font-face」を参照

カスタムフォントを定義します。ウェブフォントの読み込みに使用されます。

例：

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2");
}

@font-feature-values

詳細は「CSS/@font-feature-values」を参照

フォントの機能値を定義します。

例：

@font-feature-values MyFont {
  @styleset {
    nice: 1;
  }
}

@font-palette-values

詳細は「CSS/@font-palette-values」を参照

フォントのカラーパレットをカスタマイズします。

例：

@font-palette-values custom-palette {
  base-palette: 1;
  override-colors: 1 red, 2 blue;
}

@import

詳細は「CSS/@import」を参照

外部スタイルシートを読み込みます。@charsetの次に記述する必要があります。

例：

@import url("style.css");

@keyframes

詳細は「CSS/@keyframes」を参照

アニメーションのキーフレームを定義します。

例：

@keyframes slidein {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

@layer

詳細は「CSS/@layer」を参照

スタイルの適用順をレイヤーで制御します。

例：

@layer base, theme;
@layer base {
  body { background: white; }
}
@layer theme {
  body { background: black; }
}

@media

詳細は「CSS/@media」を参照

メディアクエリを使用して、特定の条件下でのみスタイルを適用します。

例：

@media (max-width: 600px) {
  body { font-size: 14px; }
}

@namespace

詳細は「CSS/@namespace」を参照

XML名前空間を宣言します。

例：

@namespace svg url("http://www.w3.org/2000/svg");

@page

詳細は「CSS/@page」を参照

印刷時のページスタイルを定義します。

例：

@page {
  margin: 1cm;
}

@position-try (実験的)

詳細は「CSS/@position-try (実験的)」を参照

現在は実験的な機能であり、慎重に使用してください。

@property

詳細は「CSS/@property」を参照

カスタムプロパティの型や初期値を定義します。

例：

@property --main-color {
  syntax: "<color>";
  initial-value: red;
  inherits: true;
}

@scope

詳細は「CSS/@scope」を参照

スタイルのスコープを定義します。

例：

@scope (.section) {
  p { color: green; }
}

@starting-style

詳細は「CSS/@starting-style」を参照

初期スタイルを設定します。この機能は特定のユースケースで使用されます。

@supports

詳細は「CSS/@supports」を参照

ブラウザが特定のCSS機能をサポートしている場合にのみスタイルを適用します。

例：

@supports (display: grid) {
  .container { display: grid; }
}

@view-transition

詳細は「CSS/@view-transition」を参照

ビュートランジションのスタイルを定義します。スムーズなページ遷移を実現するために使用されます。

例：

@view-transition {
  transition: opacity 0.5s;
}