menu
menu

キーワード検索

 

前月(9月)の人気記事トップ10

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 3 ↑) 【Mac】Macのユーザー名とアカウント名を変更する
  3. ( 2 ↓) 【jQuery】jQueryでドロップダウンメニュー
  4. ( 9 ↑) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  5. ( 7 ↑) 【PHP】PHPでシンプルなメールフォーム
  6. ( 5 ↓) 【CSS】レスポンシブデザインのブレークポイントは⁉
  7. ( 4 ↓) 【CSS】CSSだけでサイズ可変・スマホ対応のアコーディオン
  8. (10 ↑) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  9. ( 9 - ) 【CSS】CSSだけでブロック要素の表示非表示(トグルボタン)
  10. ( - ↑) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
このエントリーをはてなブックマークに追加

【CSS】CSSでも変数が使えるって知ってました⁉️

【CSS】CSSでも変数が使えるって知ってました⁉️

こんにちは(・∀・)

SassやLESS、または他のプログラムのようにCSSでも変数を使用することができます。

今日はSassやLESSではなく、CSS変数の使用方法をご紹介します。

CSS変数

変数を宣言する場合の記述ルールは「--」から始まり任意の変数名をコロンで区切って値を記述します。


E {
  --hogehoge(変数名): lightblue(値);
}

変数を使用する場合はプロパティー、コロン区切り、値の先頭に「var」を記述して「()」内に変数名を記述します。


E {
  background-color: var(--hogehoge(値));
}
変数の定義

変数を宣言します。

変数は各セレクターに記述することができます。


E {
  --hogehoge: lightblue;
}
変数を呼び出す

変数を使用します。


E {
  background-color: var(--hogehoge);
}

 

「:root」擬似クラスで変数を宣言してグローバル変数のように使用することでより使いやすくなります。


:root {
--hogehoge: lightblue;
}
E {
  background-color: var(--hogehoge);
}

 

CSS変数は変数の中で変数を使うこともできます。


:root {
  --bg-1: lightblue;
  --bg-2: lightpink;
  --bg-3: linear-gradient(90deg, var(--bg-1) 0%, var(--bg-2) 100%) fixed;
}
E {
  background-color: var(--bg-3);
}

「bg-3」の値に変数「bg-1」と「bg-2」を使用しています。

サンプルデモ

Result
スマホでのご確認はこちらをどうぞ
QRコード

 

CSS変数が取得できなかった場合に備えてフォールバックを指定することもできます。


E {
  color: var(--hoge, olive);
}

この指定をしておくことで変数「--hoge」が無効の場合、代替値「olive」が適用されます。

JavaScriptでCSS変数を受け取る

JavaScriptの「getPropertyValue()」でCSS変数を受け取ることもできます。


getPropertyValue('--hoge')
CSS変数を使用する上での注意点

最後にCSS変数を使用する上での注意点をご紹介します。

  1. CSS変数では大文字と小文字は区別され別変数と認識される

    --HOGE: 16px
    --hoge: 12px

  2. 変数は値のみ使用することができ、プロパティーは使用できない


    E {
    --hoge: font-size;
    var(--hoge): 16px;
    }

  3. 変数を呼び出す際、変数名以外の記述があると無効


    E {
    --hoge: 16;
    font-size: var(--hoge)px;
    }
    ⭕️
    E {
    --hoge: 16px;
    font-size: var(--hoge);
    }

  4. IE非対応

参考

CSSで変数(カスタムプロパティ)を使ってみよう

  • CSS 変数
このエントリーをはてなブックマークに追加