CSS/CSS変数

CSS変数

CSS変数は、CSSコードの中で値を再利用するための仕組みです。これにより、同じ値を複数回書く必要がなくなり、スタイルシートの保守性と可読性が向上します。CSS変数は「カスタムプロパティ」とも呼ばれ、主にテーマや色の設定、フォントサイズなど、スタイルの共通部分に便利です。

CSS変数の宣言

CSS変数は、--（ダブルハイフン）で始める名前を持ちます。これらは通常、:rootセレクタ内で定義され、全体のスタイルで使用できるようにします。--で始まる名前は、CSS内で有効な変数として扱われます。

:root {
  --main-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size: 16px;
}

上記のコードでは、3つの変数（--main-color、--secondary-color、--font-size）を定義しています。これらの変数は、後でスタイルシート内で使うことができます。

CSS変数の使用

変数を使用するには、var()関数を使って値を参照します。var()関数は、変数名を引数として受け取り、その変数の値を返します。たとえば、先ほど定義した--main-colorを背景色に適用する場合、次のように書きます。

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

この例では、--main-color変数を背景色に、--font-size変数をフォントサイズに使用しています。

デフォルト値の設定

var()関数には、2番目の引数としてデフォルト値を設定することができます。これは、変数が未定義または無効な場合に使用される値です。デフォルト値を設定することで、変数がない場合でもスタイルが適用されます。

p {
  color: var(--text-color, black);
}

このコードでは、--text-colorが未定義の場合に、blackがデフォルト値として使われます。

CSS変数のスコープ

CSS変数にはスコープがあり、どこで定義されるかによって、その有効範囲が決まります。--で始まる変数は、定義された場所から下の階層で使用できます。例えば、:rootで定義された変数は、全てのCSSに適用されますが、特定のクラス内で定義された変数は、そのクラス内でのみ有効です。

/* 全体のテーマ設定 */
:root {
  --main-color: #3498db;
}

/* 特定のセクション用設定 */
section {
  --main-color: #e74c3c;
}

header {
  background-color: var(--main-color);  /* #3498db */
}

footer {
  background-color: var(--main-color);  /* #e74c3c */
}

この例では、headerは--main-colorとして#3498dbを使用し、footerではsection内で設定した--main-colorの値#e74c3cを使用します。

JavaScriptでCSS変数を操作する

CSS変数は、JavaScriptを使って動的に変更することも可能です。これを行うためには、document.documentElement.style.setProperty()メソッドを使用します。このメソッドを使うと、CSS変数の値をプログラムで変更できます。

document.documentElement.style.setProperty('--main-color', '#9b59b6');

このコードは、--main-colorの値を#9b59b6に変更し、CSSでその変数を使用している全ての場所に影響を与えます。

CSS変数の利点

CSS変数を使うと、コードの再利用性が向上し、スタイルシートの保守が容易になります。また、テーマやカラーパレットを変更する際にも、一箇所の変更で全体のスタイルが更新できるため、効率的です。動的な変更が可能なため、JavaScriptと連携させてインタラクティブなデザインを作成する際にも有用です。

例えば、ウェブサイトのテーマを切り替える場合、CSS変数を使えば、HTMLやCSSのコードを変更することなく、ユーザーが選択したテーマに基づいて即座にスタイルを変更できます。

まとめ

CSS変数は、スタイルシートにおける効率的で強力なツールです。変数を使うことで、コードの重複を減らし、変更の管理が容易になります。さらに、JavaScriptとの連携により、動的なデザインの実現が可能です。CSS変数を効果的に使いこなすことで、より柔軟で保守性の高いスタイルシートを作成できます。