勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

CSSでカラーコード等を変数(カスタムプロパティ)として使用する方法

  CSS

他社が作成されたCSSのソースコードを拝見していると、背景等の色を指定する部分にカラーコードや「red」等のカラー名ではなく「--RED」のように独自っぽい形で指定されていた。調べたところCSSでも変数が指定できるようになったらしく「--RED」は変数名みたい。以下に利用方法をメモ。

 

リファレンス

CSS カスタムプロパティ(変数)の使用

https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_custom_properties

ブラウザの互換性

https://developer.mozilla.org/ja/docs/Web/CSS/--*#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%BC%E3%81%AE%E4%BA%92%E6%8F%9B%E6%80%A7

 

利用方法

ソースコード

<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

  関連記事

レスポンシブ対応で右カラムのコンテンツを上に表示させる方法

レスポンシブ対応サイトの簡易なコーディングをする経験があった。何も考えずにHTM ...

jQuery無しで要素にアニメーション効果を設定する方法(animate.css)

あるサイトをWappalyzerで調査していた際に「animate.css」とい ...

Material Design Liteでセレクトメニュー(プルダウン)の作成方法

Material Design Liteでformのセレクトメニュー(プルダウン ...

CSSのpointer-eventsプロパティで指定した要素をクリック不可にする方法

ページ内の指定のボタンをクリックしても動作しないという症状が発生し、ソースコード ...

CSSのdisplayについて

よく使うdisplayだけれども、noneとblock以外で 初めて使うことがあ ...