CSSでカラーコード等を変数(カスタムプロパティ)として使用する方法
他社が作成されたCSSのソースコードを拝見していると、背景等の色を指定する部分にカラーコードや「red」等のカラー名ではなく「--RED」のように独自っぽい形で指定されていた。調べたところCSSでも変数が指定できるようになったらしく「--RED」は変数名みたい。以下に利用方法をメモ。
リファレンス
CSS カスタムプロパティ（変数）の使用
https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_custom_properties
ブラウザの互換性
利用方法
ソースコード
<style>
:root{
--RED: #f00;
}
.title{
background: var(--RED);
}
.body{
color: var(--RED);
}
</style>
<div class="title">
title
</div>
<div class="body">
body
</div>
所感
Sassだと変数を使えると聞いたことがあるが、CSSでも使えるようになっていたのは知らなかった。今後は使っていきたいところ。
関連記事
-
-
CSSのdisplayについて
よく使うdisplayだけれども、noneとblock以外で 初めて使うことがあ ...
-
-
IE11でSB Admin2のログインページの表示がおかしい
ダッシュボードや管理画面を作成する際、SB Admin2を使うことが多い。ダッシ ...
-
-
CSSとJavaScriptでテキストのコピー防止
あるサイトで文言の意味が分からずGoogleで検索する為にコピペしようとするも、 ...
-
-
管理画面やダッシュボードとして便利そうなBootstrap系のテンプレート
新規サイトの立ち上げでダッシュボード、管理画面を作る必要があった。小規模なサイト ...
-
-
「slick」でarrows(次に進む・前に戻るボタン)を設定しても表示されない場合の対応方法
「slick」で画像スライダーを表示する際にarrows(次に進む・前に戻るボタ ...