【CSS】カスタムプロパティ（変数）とは？使い方やSassとの違いを徹底解説

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

カスタムプロパティとは、CSSで利用できる変数のことです。

従来、Sassなどを使用しないと実現できなかった変数機能が、ネイティブのCSSでも扱えます。

カスタムプロパティ（CSS変数）は、スタイルをより柔軟に管理できます。

本記事では、CSSカスタムプロパティの基本的な使い方から、JavaScriptとの連携（動的に変更）、Sassの変数との違いまで詳しく解説します。

CSSのカスタムプロパティの基本

CSSのカスタムプロパティは、以下のように--で始まる名前で定義し、var()関数を使って適用できます。

:root {
  --main-color: #3498db;
  --padding-size: 10px;
}

.button {
  background-color: var(--main-color);
  padding: var(--padding-size);
}

Sassの変数との違いは？

CSSのカスタムプロパティは、動的に値を変更できるため、一括で色やスタイルを変えたり、より柔軟なデザイン変更が可能です。

特にJavaScriptとの連携で可能性が広がります。

カスタムプロパティの基本的な使い方

定義方法

:root (疑似クラス) でグローバル定義

カスタムプロパティは:rootに定義すると、グローバルに適用されます。

:root {
  --primary-color: #e74c3c;
}

ローカルスコープで変数設定

要素ごとに異なる変数を適用することも可能です。

.card {
  --border-radius: 8px;
  border-radius: var(--border-radius);
}

var() 関数の使用方法

var()関数を使うことで、定義したカスタムプロパティを適用できます。

1番目の引数は定義した変数となります。

２番目の引数では、1番目の変数が設定していなかった場合の値（デフォルト値）が設定できます。

下記の例では、primary-color が未定義の場合、blue:青 が適用されるようになります。

なお、下記のように--text-color が定義されていなければ --text-color2 が適用されるような使い方も可能です。

.button {
  background-color: var(--primary-color, blue); 
  color: var(--text-color, var(--text-color2));
}

カスタムプロパティの利用方法

CSSのカスタムプロパティを活用すると、Sassと同じようにテーマカラーやフォントサイズを一括で変更できるため、デザインの管理が非常に簡単になります。

:root {
  --main-color: red;
  --font-size-large: 24px;
  --font-size-middle: 16px;
}


.a {
  font-size: var(--font-size-large);
  color: var(--main-color);
}

.b {
  font-size: var(--font-size-middle);
  color: var(--main-color);
}

子要素に継承される

親要素で定義された変数は、子要素に継承されます。

加えて、ローカルスコープで変数設定（特定の要素内で新しい値を設定）すると、そのスコープ内では新しい値が適用されます。（上書きできる）

:root {
  --text-color: black;
}

.parent {
  --text-color: blue; /* 親要素で:rootを上書き */
}

.brother {
  color: var(--text-color); /* 親要素を継承 */
}

.sister {
  --text-color: red; /* この要素内ではさらに親要素を上書き */
  color: var(--text-color);
}

<div class="parent">
  <p class="brother">このテキストはblueです（親の blue を継承）</p>
  <p class="sister">このテキストはredです（親の blue を上書き）</p>
</div>

豊富なオリジナルブロックでLPをかんたんに作成できるLP Creator

デザイン・機能・SEO・収益化にこだわったメディア運営者向け「STREETIST」

CSSカスタムプロパティの便利な使い方

CSSカスタムプロパティの中でCSSカスタムプロパティを利用する

CSSカスタムプロパティの値として、他のCSSカスタムプロパティを使用することも可能です。これにより、柔軟なカスタマイズができます。

:root {
  --shadow-color: rgba(0, 0, 0, 0.2);
  --button-shadow: 4px 4px 10px var(--shadow-color);
}

.button {
  box-shadow: var(--button-shadow);
}

メディアクエリ内での利用

Sassの変数とは異なり、CSSのカスタムプロパティはメディアクエリ内で値を変更できるため、ダークモードの設定や、レスポンシブデザインに活用できます。

:root {
  --font-color: #222;
  --background-color: #f9f9f9;
  --base-font-size: 18px;
}

/* 画面幅が768px以下のとき、フォントサイズを小さくする */
@media (max-width: 768px) {
  :root {
    --base-font-size: 14px;
  }
}

/* OSのダークモードの設定に応じて自動適用 */
@media (prefers-color-scheme: dark) {
  :root {
    --font-color: #ffffff;
    --background-color: #222;
  }
}

body {
  font-size: var(--base-font-size);
  color: var(--font-color);
  background-color: var(--background-color);
}

カスタムプロパティが効かない？

ここではCSSカスタムプロパティを利用するうえでよくある効かない理由と注意事項をいくつか説明します。

/* ❌ :rootは一番上に書く */
.mistake {
  --primary-color: black; 
}

:root {
  --primary-color: blue;
}

/* ◯ :rootの下に書く */
.correct {
  --primary-color: black; 
}

:root {
  --font-size: 16px;
}

.large-text {
  --font-size: 24px; /* ❌ これだけでは効かない */
  font-size: var(--font-size); /* ◯ これで適用 */
}

:root {
  --breakpoint: 768px;
}

/* ❌ これは効かない */
@media (max-width: var(--breakpoint)) { 
  body {
    background-color: lightgray;
  }
}

:root {
  --size: 16;
}

p {
  font-size: var(--size); /* ❌ 単位なしでは効かないことがある */
}

カスタムプロパティの使用例（サンプル）

ボタンを押すとテーマカラーを変更する

カスタムプロパティを使わない場合

例えば以下のようなCSSがあるとします。

カスタムプロパティを使わずに .dark-mode クラスだけでテーマを切り替える場合、以下のように個々の要素に対して .dark-mode を適用する必要があります。

body {
  background-color: white;
  color: black;
}

body.dark-mode {
  background-color: black;
  color: white;
}

.card {
  background-color: #f9f9f9;
}

body.dark-mode .card {
  background-color: #333;
}

button {
  background-color: blue;
  color: white;
}

body.dark-mode button {
  background-color: orange;
  color: black;
}

新しい要素（例えば .alert-box）を追加するたびに body.dark-mode .alert-box {} のように個別のスタイルを定義しなければならず、管理が煩雑になります。

カスタムプロパティを使った場合

ダークモードとライトモードを切り替える際に、CSSのカスタムプロパティを活用することで、一元管理ができ簡単に配色を変更できます。

:rootにデフォルトのスタイルを定義し、.dark-modeクラスを追加します。

これでjavascript等で、.dark-mode クラスを設定すると:root に定義されたカスタムプロパティ（変数）が.dark-mode で定義されたカスタムプロパティに値が上書きされることで、ダークテーマに簡単に切り替えることができるようになります。

:root {
  --background-color: #ffffff;
  --text-color: #333;
  --card-bg: #f9f9f9;
  --button-bg: #007bff;
  --button-text: #fff;
}

.dark-mode {
  --background-color: #222;
  --text-color: #fff;
  --card-bg: #333;
  --button-bg: #ff9800;
  --button-text: #000;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

.card {
  background-color: var(--card-bg);
}

button {
  background-color: var(--button-bg);
  color: var(--button-text);  
}

javascriptでモードの切替

bodyタグのclassに dark-mode を追加することで、body に dark-mode クラスが追加され、CSSのカスタムプロパティの値が :root のデフォルト値から .dark-mode の値に上書きされる という動作になります。

再度押した場合は　dark-mode　が削除され、再び :root のデフォルト値が適用されます。

// ダークモードの切り替え関数
const toggleDarkMode = () => {
  // bodyのclassに dark-mode がなければ追加、あれば削除する
  document.body.classList.toggle('dark-mode');
};

// クリック型のイベントを追加
document.getElementById('darkModeToggle').addEventListener('click', toggleDarkMode);

DEMOで確認

CSSカスタムプロパティを使ったDEMOを用意しましたので御覧ください。

DEMO

DEMOでは、font-familyでのフォントの切り替え、transitionで変化するまでの時間も変数にしています。

ダークモードへの変化スピードをゆっくりに、戻す時は素早くしているのも定義しています。

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');

:root {
    --background-color: #ffffff;
    --text-color: #333;
    --card-bg: #e8e8e8;
    --button-bg: #007bff;
    --button-text: #fff;
    --font-family: Arial, sans-serif;
    --font-size-small: 12px;
    --font-size-default: 16px;
    --font-size-large: 20px;
    --transition-time-short: 0.3s;
}

.dark-mode {
    --background-color: #222;
    --text-color: #fff;
    --card-bg: #333;
    --button-bg: #ff9800;
    --button-text: #000;
    --font-family: 'Noto Sans', sans-serif;
    --font-size-small: 10px;
    --font-size-default: 14px;
    --font-size-large: 18px;
    --transition-time-short: 2s;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: var(--font-family);
    font-size: var(--font-size-default);
    transition: background-color var(--transition-time-short), color var(--transition-time-short), font-family var(--transition-time-short);
    text-align: center;
    padding: 20px;
}

.card {
    background-color: var(--card-bg);
    transition: background-color var(--transition-time-short);
    padding: 20px;
    margin: 20px auto;
    width: 50%;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

button {
    background-color: var(--button-bg);
    color: var(--button-text);
    font-size: var(--font-size-small);
    transition: background-color var(--transition-time-short), color var(--transition-time-short);
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}

button:hover {
    opacity: 0.8;
}

h1 {
    font-size: var(--font-size-large);
}

h2 {
    font-size: var(--font-size-default);
}

/* コードブロックのスタイル */
.code-block-wrap {
    text-align: center;
    margin: 0 auto;
    width: 70%;
}

<body>
    <h1>モード切り替えデモ</h1>
    <button id="darkModeToggle">ダークモード切り替え</button>

    <div class="card">
        <h2>サンプル</h2>
        <p>dark-modeがbodyに追加されCSSカスタムプロパティの変数が、
        <br>dark-modeで定義したものに上書きされて
        <br>色味やフォントが変わっているのがわかります。
        <br>
        <br>transitionで指定する時間も変数にできます。
        <br>ダークモードへの変化スピードをゆっくりに、<br>
        戻す時は素早くしているのも定義できます。</p>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
    <h2>CSS</h2>
    <div class="code-block-wrap">
    <pre class="code-block">
      <code id="cssCode" class="language-css"><?php echo $style; ?></code>
    </pre>
    </div>

    <script>
        // ダークモードの切り替え
        const toggleDarkMode = () => {
            document.body.classList.toggle('dark-mode');
        };

        document.getElementById('darkModeToggle').addEventListener('click', toggleDarkMode);
    </script>
</body>

JavaScriptとの連携

CSSカスタムプロパティをJavaScriptで操作する方法

JavaScriptを使って、直接、CSSのカスタムプロパティ（変数）を取得・変更ができます。

取得　getPropertyValue(‘–変数名’)
変更　setProperty(‘–変数名’,’値’)

// CSS変数の値を取得
const rootStyles = getComputedStyle(document.documentElement);
console.log(rootStyles.getPropertyValue('--main-color'));

// CSS変数の値を変更
document.documentElement.style.setProperty('--main-color', '#f39c12');

カスタムプロパティをJavascriptで操作する作成例

カラーピッカーや、スライダーを使って動的にカラーやサイズを変更することも可能です。

下記は:rootで--text-colorのCSSのカスタムプロパティ（変数）を定義しておき、javascriptで選択されたカラーにCSSのカスタムプロパティを動的に変えています。

<input type="color" id="colorPicker">

<script>
  document.getElementById('colorPicker').addEventListener('input', (event) => {
    document.documentElement.style.setProperty('--text-color', event.target.value);
  });
</script>

:root {
    --text-color: #ffffff;
    --main-color: #3498db;
    --font-size: 16px;
}
/* --- 省略 --- */
.preview {
    color: var(--text-color);
    background-color: var(--main-color);
    font-size: var(--font-size);
}

こちらにCSSのカスタムプロパティを動的に変えるDEMOを作り、コードを載せておきましたので御覧ください。

文字色や背景色、フォントサイズ、パディング、フォントファミリー、角丸がリアルタイムで変わるツールを簡単に実現できるようになります！

DEMO

Sassの変数との比較

Sassの変数とはまた違った利用方法を説明してきました。

CSSのカスタムプロパティとの違いをまとめておきます。

コンパイル時の違い

Sassの変数はCSSのコンパイル時に適用され、ブラウザでは変数として残りません。

一方、CSSのカスタムプロパティは、ブラウザのレンダリング時に動的に適用できます。

SassでCSSのカスタムプロパティを利用する方法

Sassで宣言した変数をCSSカスタムプロパティで利用することができます。

–primary-color: #{$primary-color}; このように #{$変数名} で利用できます。

// Sass 変数を CSS 変数として出力
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-size: 16px;

:root {
  --primary-color: #{$primary-color};
  --secondary-color: #{$secondary-color};
  --font-size: #{$font-size};
}

.button {
  background-color: var(--primary-color);
  font-size: var(--font-size);
}

カスタムプロパティを活用するメリットとデメリット

メリット

• 保守性が向上し柔軟なデザイン調整が可能
  CSS のカスタムプロパティを活用することで、一度定義すれば複数の要素で再利用でき、変更が一箇所で済むため、保守性が向上し、スタイルの統一が容易になります。
  
• JavaScriptとの連携が可能
  変数を動的に変更できる。ユーザー設定に応じたテーマ変更やアニメーションの制御 などが簡単に実装できる。

デメリット

あまりデメリットはないと思いますが、導入が進みにくいのは下記があると思います。

• 既存サイトへの適用が難しい
  ・ 稼働中のサイトに適用する場合、スタイルの構造を整理し、どの変数を定義するかを決める必要がある。
  ・ 既にSass を使用している環境では、カスタムプロパティとどのように組み合わせるかの調整が必要になる。
  →　リニューアル等の際に導入を検討するのがいいでしょう。
  
• 管理が煩雑になる可能性がある
  むやみに変数を定義しすぎると、どこで何が適用されているのか分かりにくくなり、修正が難しくなる。
  →　初回導入時に、適切な設計と命名ルールを決めることが重要で、チーム全体でルールを決めましょう。
  
• 複雑な計算が難しい
  CSS のカスタムプロパティは基本的に文字列の保持しかできないため、数値の計算には calc() を併用する必要がある。

まとめ

CSSのカスタムプロパティは、柔軟なデザイン管理が可能な強力な機能です。

Sassの変数とは異なり、動的な変更が可能で、JavaScriptと組み合わせることでよりインタラクティブなデザインを実現できます。

特に、同じテンプレートを利用する場合のカラーテーマの切り替えや、CSSアニメーションなどに活用すると便利です。

今回紹介したもの以外に メディアクエリを使って様々なアニメーションを作成したりもできます。

今後のプロジェクトで、CSSのカスタムプロパティをぜひ活用してみてください！