MASANAO MAEDA
PORTFOLIO

CSSでの作業にも慣れてきた頃、もっと効率よくできる方法はないかなと考えていました。例えば、色を変えたいと思った時に、指定している箇所全て変えないと行けないので、指定している箇所が多ければ多いほど時間がかかるので、かなり効率が悪いなと感じてました。そんな時にこの「ルートセレクタ」の使い方を見つけて、これは実装しなければと思い早速やってみました。

ルートセレクタとは

:root疑似クラスを用いて、CSS変数宣言を行い、色やマージンなどを指定する方法です。変数宣言しているので、１ヶ所変えるだけで、指定している箇所全てが変わリます。とにかく便利です。

ルートセレクタの使用方法

CSSで下記のように記述します。今回私は「ベースカラー」「メインカラー」「アクセントカラー」を分かりやすくするような記述にしました。

/* :rootのCSS変数の宣言 */
:root {
  /* color */
  --white: #ebecf0;
  --red: #de3e69;
  --blue: #552684;
  --black: #333;

  /* style */
  --base-color: var(--white);
  --main-color: var(--red);
  --accent-color: var(--blue);
  --text-color: var(--black);
}
        

これでメインカラーなどを使用したい箇所に下記のように記述するだけで指定できます。

　　　　.header {
  background-color: var(--main-color);
  color: var(--base-color);
}
        

その他の使用方法

もちろん色だけでなく、マージンなど様々な用途で使用できます。今回私はBOXの指定で使用してみました。

　　　:root {
  /* box */
  --box-width: 250px;
  --box-height: 400px;
  --box-margin: 30px;
}
        

これでカード型のBOXの指定は下記のようにするだけです。

　　　.wrapper {
  width: var(--box-width);
  height: var(--box-height);
  margin: var(--box-margin);
  background-color: var(--main-color);
  color: var(--base-color);
}
        

感想・まとめ

ルートセレクタは本当に便利だと感じました。特に色の指定はサイト全体の配色を変えたいときに直ぐに変えることができるので、必須級だと思います。この他にもCSSには「SASS」という更に効率を上げる方法もあるようなので、ゆくゆくは「SASS」も勉強していき、もっともっと効率良く作業できるようにしていきたいと思います。

参考サイト