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でも使えるようになっていたのは知らなかった。今後は使っていきたいところ。
関連記事
-
-
Material Design LiteでiPhoneのみリンク(ボタン)をクリックしても動作しない場合の対応方法
最近サイト内のツールページ等をMaterial Design Liteで作ってい ...
-
-
要素の表示or非表示
今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...
-
-
CSSを用いて可変(レスポンシブ)要素内での文字列を丸める方法
可変(レスポンシブ)要素内の文字を丸めたかった。いつもであればPHPのmb_st ...
-
-
スクロールしても追尾する要素をプラグイン等は利用せずCSSのみで作成する方法
コンテンツ内をスクロールしても追尾してくる要素を作成したかった。以前にMeeka ...
-
-
CodeIgniter4&Bootstrap&jQueryで簡易版お問い合わせページの作成
CodeIgniter4.4.4&Bootstrap&jQuer ...