Css 2021/03/06 (更新日:2023/01/10)

css変数の使い方と変数で扱ったほうがいい値

webサイトのテーマカラーを変数で定義しておくと、テーマカラーの変更が容易に行えるようになります。変数の定義の仕方と、使い方を見ていきます。

変数を定義する

:root {
     --color: rgb(76, 167, 219);
     --width: 100px;
     --height: 100px;
}

.box {
     background: var(--color);
     width: var(--width);
     height: var(--height);
　　　--p: 10;
}

:root擬似クラスで --変数名　で定義することができます。 2~3行目

個別に定義することもできます。11行目

変数を使用する

var(--変数名)　で変数を使用することができます。　8~10行目

JavaScriptで変数を扱う

const box = document.querySelector('.box');
box.style.setProperty('--t', '20');

const css = getComputedStyle(box);

const cssP = String(css.getPropertyValue('--p')).trim(); 
const cssT = String(css.getPropertyValue('--t')).trim(); 

console.log(cssP);
/* 10 */
console.log(cssT);
/* 20 */

getComputedStyle(element)　スタイルを取得する　4行目

getProppertyValue(--変数名)　変数を取得する　6,7行目

setProperty(--変数名)　変数を定義する　2行目

個別の変数を使ってアレンジする

<div class="dots">
     <div class="dot" style="--t: 1;"></div>
     <div class="dot" style="--t: 2;"></div>
     <div class="dot" style="--t: 3;"></div>
     <div class="dot" style="--t: 4;"></div>
     <div class="dot" style="--t: 5;"></div>
</div>

<style>
     :root {
          --color: rgb(76, 167, 219);
     }
     .dots {
          width: 100%;
          display: flex;
          justify-content: center;
          margin: 100px 0;
     }
     .dot {
          margin: 0 20px;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background: var(--color);
          filter: hue-rotate(calc(50deg  * var(--t)));
     }
</style>

個別に変数を定義する　2~6行目

変数を使って色相環を変化させてアレンジする　25行目