0Pricing
CSS Academy · レッスン

CSS Properties and Values API（@property）

@propertyを使って、アニメーション可能なCSS変数用のカスタムプロパティを型と継承付きで登録します。

「CSS Properties and Values API（@property）」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。

@property とは

@property は、カスタムプロパティを型、継承動作、初期値とともに登録する CSS の仕組みです。CSS Properties and Values API（CSS.registerProperty）を宣言的に記述する方法です。

@property の構文

カスタムプロパティを、必須の 3 つのディスクリプターとともに登録します。

<div class="box"></div>

syntax ディスクリプター

syntax ディスクリプターは、CSS の型名を使ってプロパティの型を定義します。

  • "<number>"、"<integer>"、"<percentage>"
  • "<angle>"、"<color>"、"<length>"
  • "<image>"、"<transform-list>"
  • "*" — あらゆる値を受け入れます（未登録の場合と同様）

inherits ディスクリプター

inherits は、プロパティが DOM を通じて継承されるかどうかを制御します。要素ごとに分離する必要があるプロパティには false を設定します。

initial-value ディスクリプター

プロパティが設定されていない場合に、保証された初期値を提供します。これにより、プロパティをアニメーション可能にできます。

カスタムプロパティをアニメーションさせる

@property の主な利点は、登録したカスタムプロパティをトランジションやアニメーションの対象にできることです。ブラウザが型を認識し、値の間を補間できるためです。

<div class="element is-hovered"></div>

@property を使わない場合

登録しない場合、CSS はカスタムプロパティの型を認識できません。2 つの変数値の間のトランジションは補間されずに切り替わります。ブラウザは未知の型の中間値を計算できないためです。

グラデーションアニメーションのための @property

@property なしでは以前は実現できなかった、グラデーションの色停止点のアニメーションです。

<div class="loader loading"></div>

JavaScript による同等の方法

JavaScript API を使ってプロパティを登録することもできます。

<div id="box"></div>
<script>
  // JavaScript equivalent of @property
  CSS.registerProperty({
    name: '--rotation',
    syntax: '<angle>',
    inherits: false,
    initialValue: '0deg'
  });

  document.getElementById('box').style.setProperty('--rotation', '45deg');
</script>

ブラウザのサポート状況

@property は Chrome 85 以降、Edge 85 以降、Safari 16.4 以降、Firefox 128 以降でサポートされています。現在のブラウザでは広く利用できます。

@property の実践的な用途

一般的な用途は次のとおりです。

  • グラデーションの位置と色のアニメーション
  • HSL 色空間での色相／彩度のアニメーション
  • プログレスバーの塗りつぶしアニメーション
  • 数値を表示するカウンターアニメーション
  • カラートークンのアニメーションによる滑らかなダークモード／ライトモードの切り替え

確認問題

CSS カスタムプロパティのアニメーションに @property が必要なのはなぜですか。

まとめ

@property は、syntax の型、inherits フラグ、initial-value とともにカスタムプロパティを登録します。登録したプロパティは、ブラウザが型付きの値を補間できるため、アニメーションやトランジションの対象にできます。これにより、未登録のカスタムプロパティでは実現できないグラデーションアニメーション、色相のトランジション、カウンターアニメーションが可能になります。

よくある質問

「CSS Properties and Values API（@property）」レッスンは無料ですか？

はい。「CSS Properties and Values API（@property）」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。

「CSS Properties and Values API（@property）」で何を学びますか？

@propertyを使って、アニメーション可能なCSS変数用のカスタムプロパティを型と継承付きで登録します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CSS Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「CSS Properties and Values API（@property）」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このCSS Academyレッスンでコードを書いて実行できますか？

はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. CSS Typed Object Model（OM）
  2. CSS Properties and Values API（@property）
  3. CSS Paint API: Worklets
  4. CSS Layout APIとスコープ
← CSS Academyに戻る