CSS

CSS変数入門:変数で変わるCSSの世界

CSS
この記事は約3分で読めます。
記事内に広告が含まれています。
スポンサーリンク

CSS変数とは

CSS変数とはCSSのプロパティの値を変数として定義し再利用できるようにする機能です。
CSS変数はカスタムプロパティとも呼ばれます。
CSS変数を使うとコードの可読性やメンテナンス性が向上します。

CSS変数の宣言と使い方

CSS変数は、以下のように宣言し使うことできます。

/* 変数を宣言するセレクタ */
:root {
  /* プライマリーカラーとして赤色を定義 */
  --primary-color: #ff0000;
  /* セカンダリーカラーとして緑色を定義 */
  --secondary-color: #00ff00;
  /* フォントサイズとして16pxを定義 */
  --font-size: 16px;
}

/* 変数を使用するセレクタ */
h1 {
  /* プライマリーカラーを文字色に適用 */
  color: var(--primary-color);
  /* フォントサイズを2倍に計算して適用 */
  font-size: calc(var(--font-size) * 2);
}

p {
  /* セカンダリーカラーを文字色に適用 */
  color: var(--secondary-color);
  /* フォントサイズをそのまま適用 */
  font-size: var(--font-size);
}

See the Pen css-val1 by k2zo_o (@k2zo_o) on CodePen.

上記の例では、ルート要素(:root)に対して、
 –primary-color,
 –secondary-color,
 –font-size
という3つの変数を宣言しています。
変数名は、–で始まり、変数の値は、var()関数で参照できます。

CSS変数のスコープとカスケード

CSS変数は、宣言された要素とその子孫要素に対して有効です。
これをスコープと呼びます。スコープ内では、同じ変数名を再定義することで値を上書きできます。これをカスケードと呼びます。

/* 変数を宣言するセレクタ */
:root {
  /* プライマリーカラーとして赤色を定義 */
  --primary-color: #ff0000;
}

div {
  /* プライマリーカラーを青色に再定義 */
  --primary-color: #0000ff;
}

/* 変数を使用するセレクタ */
h1 {
  color: var(--primary-color); /* 赤色になる */
}

div h1 {
  color: var(--primary-color); /* 青色になる */
}

See the Pen css-val2 by k2zo_o (@k2zo_o) on CodePen.

上記の例では、ルート要素に対して–primary-colorを赤色に宣言していますが、div要素に対して–primary-colorを青色に再定義しています。そのため、div要素内のh1要素は青色になります。

CSS変数のメリット

CSS変数を使うことで得られるメリットは以下の通りです。

  • コードの重複を減らし可読性やメンテナンス性を向上させることができる。
  • CSSの値を一元的に管理し変更が簡単になる。
  • CSSの値を動的に変更できる。
  • CSSの仕様で定義されているためブラウザの互換性が高い。
  • CSSプリプロセッサ(SassやLessなど)に依存しなくても変数機能を利用できる。

より詳しい情報が必要な方はMDNサイト等をご利用ください。

タイトルとURLをコピーしました