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でも使えるようになっていたのは知らなかった。今後は使っていきたいところ。
関連記事
-
-
Bootstrapよりも簡単でClassを付与する必要のないCSSフレームワーク「Simple.css」の利用方法
何らかのテストページを提出する際、見た目を整えるためBootstrapを使用した ...
-
-
videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法
Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...
-
-
jQuery無しで要素にアニメーション効果を設定する方法(animate.css)
あるサイトをWappalyzerで調査していた際に「animate.css」とい ...
-
-
CSSで1つの要素に複数classを設定して画像を入れ替える方法
メニューリンクで通常時の画像、マウスオーバー時の画像、アクティブ時の画像をそれぞ ...
-
-
jQueryの日付&時間のピッカー(bootstrap-datetimepicker)について
日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、普通のセレクトメ ...