用語集に戻る
プログラミング基礎初級

CSS変数

一言で言うと

--変数名: 値 で定義し、var(--変数名) で使用する。

もう少し詳しく

一言で言うと

--変数名: 値 で定義し、var(--変数名) で使用する。テーマカラーなど繰り返し使う値を一元管理できる。

もう少し詳しく

--変数名: 値 で定義し、var(--変数名) で使用する。テーマカラーなど繰り返し使う値を一元管理できる。

CSS のみで使える仕組みで、:root などのセレクターに定義するとページ全体に継承されます。JavaScript から getComputedStyle や setProperty を通じて動的に値を変更することもできます。

実務でどう使うか

  • 学習初期: プログラミング初心者がまず押さえる基本概念のひとつです

  • CSS固有の仕組み ── CSSのみで動作する機能で、JavaScriptからは getComputedStyle や setProperty を通じて動的に値を変更できます

  • 実務での活用 ── ダークモード切り替え、ブランドカラーのトークン管理、コンポーネントライブラリのスタイルカスタマイズなどで活用されます

  • 関連する用語

    この用語を学べるコース

    この用語を実際に使ってみよう

    チョットデキルなら、5分のレッスンで実際にコードを書いて学べます。

    コース一覧を見る