0Pricing
CSS Academy · レッスン

カスタムプロパティの宣言と使用

--接頭辞でCSSカスタムプロパティを定義し、var()関数で利用します。

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

CSSカスタムプロパティとは

CSSのカスタムプロパティ（CSS変数とも呼ばれます）を使うと、値を一度定義し、スタイルシート全体で再利用できます。--name: valueという構文に従います。

カスタムプロパティの宣言

カスタムプロパティは任意の要素で宣言できます。:rootで宣言すると、グローバルに使用できます。

<div class="demo">Custom properties declared on :root</div>

var()関数の使用

var()関数を使ってカスタムプロパティを参照します。

<button>Styled Button</button>

カスタムプロパティは継承される

カスタムプロパティは通常のCSSの継承規則に従います。親要素で定義したプロパティは、上書きされない限りすべての子孫要素で使用できます。

<div class="card">
  <div class="card__body">Inherits --card-bg from .card</div>
</div>

無効なカスタムプロパティ値

通常のCSSプロパティとは異なり、無効なカスタムプロパティ値を指定しても、その宣言が無視されることはありません。変数はその値のまま解決され、使用する側のプロパティによって有効かどうかが判断されます。

カスタムプロパティとSass変数の違い

主な違いは次のとおりです。

  • CSSカスタムプロパティはブラウザー上で動的に有効であり、実行時に更新されます
  • Sass変数はビルド時にコンパイルされて消えます
  • カスタムプロパティはJavaScriptで変更できます
  • カスタムプロパティはカスケードと継承に従います

命名規則

カスタムプロパティには、視覚的な値ではなく意味に基づいた名前を付けてください。後から簡単に更新できるようになります。

<p class="demo">Named --color-primary, --color-text, --size-spacing-sm</p>

グローバルスコープとコンポーネントスコープ

グローバルトークンは:rootで定義し、コンポーネント固有の値はコンポーネントのルートクラスで定義します。

<div class="card">Global font-size-base + component-scoped card vars</div>

calc()内のカスタムプロパティ

カスタムプロパティはcalc()内で使用できます。寸法の計算に使う場合は単位を含める必要があります。

<div class="nav">Navbar (var(--nav-height))</div>
<div class="main-content">Main content fills the rest via calc()</div>

レスポンシブなカスタムプロパティ

メディアクエリ内でカスタムプロパティの値を変更し、レスポンシブなトークンシステムを構築します。

<div class="section">Padding grows to 6rem on wide screens</div>

アニメーション用のカスタムプロパティ

複数の個別プロパティを変更する代わりに、カスタムプロパティ（多くの場合はJavaScript経由）の値を変更して要素をアニメーションさせます。

<div class="progress-track">
  <div class="progress"></div>
</div>

確認問題

--accentという名前のグローバルCSSカスタムプロパティは、どのように宣言しますか？

まとめ

CSSカスタムプロパティは--name: valueで宣言し、var(--name)で使用します。グローバルトークンは:rootで宣言し、コンポーネントの値はコンポーネントセレクターのスコープに限定します。カスタムプロパティは実行時に有効で、カスケードを認識し、JavaScriptで変更できます。そのため、Sass変数よりもはるかに強力です。

よくある質問

「カスタムプロパティの宣言と使用」レッスンは無料ですか？

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

「カスタムプロパティの宣言と使用」で何を学びますか？

--接頭辞でCSSカスタムプロパティを定義し、var()関数で利用します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「カスタムプロパティの宣言と使用」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. カスタムプロパティの宣言と使用
  2. フォールバック値とvar()
  3. コンポーネントへの変数のスコープ設定
  4. JavaScriptによる変数の更新
← CSS Academyに戻る