【CSS】変数を使ってみよう

使用スタイル

:root{ --foo-bar: white; }

カスタムプロパティの設定方法

CSSで変数を使用するにはカスタムプロパティの記述が必要です。カスタムプロパティの指定方法は「--foo-bar」のように最初に「--」を付けることがルールになっています。
擬似クラスの「:root」のブロック内にカスタムプロパティを記述するとグローバル変数として扱うことができ、好きなところで使用できます。また、カスタムプロパティは継承をする事ができます。「:root」で定義したカスタムプロパティを子要素で上書きすることができます。

カスタムプロパティの値の使用

var()関数を使ってカスタムプロパティの値を使用する事ができます。「background-color: var(--foo-bar);」のように関数を使って変数の値にアクセスします。

サンプル

カスタムプロパティを使ってCSSを適用させます。

:root {
  --sample-box-width: 300px;
  --sample-box-height: 100px;
}

#parent194 div{
  color: white;
}

#parent194 {
  --sample-color: red;
}

#first-child194 {
  --sample-color: blue;
}

#first-child194 {
  width: var( --sample-box-width );
  height: var( --sample-box-height );
  background-color: var( --sample-color );
}

#second-child194 {
  width: var( --sample-box-width );
  height: var( --sample-box-height );
  background-color: var( --sample-color );
}
背景色に、継承したカスタムプロパティが反映される
背景色に、親の(id=”parent194″)のカスタムプロパティが反映される

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です