Rundevlog.com

小さい会社のしがないエンジニアのブログ

CSSで変数を使用する – rootの使い方 -【CSS入門】

　こんにちは。かじです。

　個人的にプログラミングを始めてから、HTMLとCSSを少しサボってきたので、これからしっかり向かい合っていきたいなと思い、その第一弾になります。

　　今回はCSSのrootの使い方について解説していきます。

　rootには下記の二つの使い方があります。

　・<html>タグを指定したスタイリング

　・CSS内のグローバル変数

　それぞれについて詳しく見てみましょう

　一つ目の使い方としては、HTML文書全体を指す<html>タグへのスタイリングをあてることになります。

root{
   background:black; //<html>内の背景が黒になります。
}

　二つの目のrootの使い方として、CSS内のグローバル変数となることが挙げられます。

　次の例を見てましょう。

root{
   --baclground-color:black; //<html>内の背景が黒になります。
}

body{
   background-color: var(--baclground-color);
}

　まず、root内で–baclground-colorという変数でblackを指定しています。この際に注意としては変数名はハイフン二つ(–)で開始する必要があります。

　この変数を呼び出すには、呼び出したい要素のプロパティに対して関数var()に変数名を渡すことで、呼び出しができます。

　こうすることで、別の要素に共通のスタイリングの値を使用したい際に、全てを書き換えずに、変数の中身を書き換えるだけで、簡単に全ての要素を変更することが可能になります。

　今回はここまでになります。

　最後まで閲覧くださりありがとうござました。

– 参考サイト –

– 画像出展元 –