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でも使えるようになっていたのは知らなかった。今後は使っていきたいところ。
関連記事
-
-
CodeIgniter4&Bootstrap&jQueryで簡易版お問い合わせページの作成
CodeIgniter4.4.4&Bootstrap&jQuer ...
-
-
CSSで親子関連のセレクターをネスト(入れ子)で指定する方法
CSSで親子関連のセレクターを指定する場合「.parent .child{}」の ...
-
-
Material Design Liteでセレクトメニュー(プルダウン)の作成方法
Material Design Liteでformのセレクトメニュー(プルダウン ...
-
-
CSSで1つの要素に複数classを設定して画像を入れ替える方法
メニューリンクで通常時の画像、マウスオーバー時の画像、アクティブ時の画像をそれぞ ...
-
-
管理画面やダッシュボードとして便利そうなBootstrap系のテンプレート
新規サイトの立ち上げでダッシュボード、管理画面を作る必要があった。小規模なサイト ...