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とJavaScriptでテキストのコピー防止
あるサイトで文言の意味が分からずGoogleで検索する為にコピペしようとするも、 ...
-
-
jQuery無しで要素にアニメーション効果を設定する方法(animate.css)
あるサイトをWappalyzerで調査していた際に「animate.css」とい ...
-
-
CSSを用いて可変(レスポンシブ)要素内での文字列を丸める方法
可変(レスポンシブ)要素内の文字を丸めたかった。いつもであればPHPのmb_st ...
-
-
画像ホバー時にエフェクトを追加したり文字を重ねられる「Izmir」ライブラリの利用方法
Lightboxを使用しているページで画像をクリックすると拡大表示されることをユ ...
-
-
「slick」でスライダー中央の下部にのみ指定したコンテンツを表示する方法
「slick」でスライダー画像の下部に何らかのコンテンツ(テキスト・リンク・別画 ...