中の人「ma-san」

東京・千葉でホームページを作るお仕事をしています。

お仕事の詳細はこちら

CSS極めたい猫「擬似クラス:root」ってなに?

CSS極めたい猫「擬似クラス:root」ってなに? CSS

この記事はCSSを勉強し直したい筆者が纏め直しつつ、CSSをより便利に書けるようになりたい方に向けた記事になります。

様々なCSSが使用できるようになってきた中で、カスタムプロパティ(設定用)としてよく活用される「:root」について振り返りたいです。
以下、茶番も兼ねていますが御覧ください。

CSSを書けるようになりたて猫とCSS極めたい猫

ほてまる
ほてまる

カチャカチャ…スッターン!!ほて、CSS書き終えたニャ!!

るり
るり

どれどれ…、ほてちゃんが書いたCSSはこれかミャ?

/** 特定の場所の設定をしたニャ **/
.cats_box {
  color: #fff;
  background: #000;
  padding: 10px 20px;
}
.ruri_box {
  color: #00ff00;
  background: #000;
  padding: 10px 20px;
}
.hotemaru_box {
  color: #ff0000;
  background: #000;
  padding: 10px 20px;
}
るり
るり

おや?「background」と「padding」が同じ値だミャ。これは統一したい箇所かみゃ?

ほてまる
ほてまる

ほて、各要素だけ文字色を変えたいにゃ。背景色とパディングについてはデザイナーから統一するようにご指定受けたニャ~。

るり
るり

にゃるぺそ。それならこういう書き方はどうだみゃ?

/** カスタムプロパティとして指定するミャ **/
:root {
  --main-bg-color: #000;
  --box-padding: 10px 20px;
}

/** 特定の場所の設定をしたニャ **/
.cats_box {
  color: #fff;
  background: var(--main-bg-color);
  padding: var(--box-padding);
}
.ruri_box {
  color: #00ff00;
  background: var(--main-bg-color);
  padding: var(--box-padding);
}
.hotemaru_box {
  color: #ff0000;
  background: var(--main-bg-color);
  padding: var(--box-padding);
}
ほてまる
ほてまる

ほてええぇぇぇええ?!何だニャこの「:root」って!!!しかも各要素のプロパティに謎の値が入ってるニャ!!

るり
るり

:rootに設定した各コードを呼び出すことによって、統一する箇所を一括管理できるミャ。これによって余白や色を変えたいというときに、各箇所を一つ一つ編集しなければならない、ということがなくなるニャ。

:root - CSS: カスケーディングスタイルシート | MDN
:root は CSS の擬似クラスで、文書を表すツリーのルート要素を選択します。 HTML では :root は 要素を表し、詳細度が高いことを除けば html セレクターと同等です。
ほてまる
ほてまる

なるほどニャ。でも、一つ一つ違う値に変えなければならないってときはどうするニャ?

るり
るり

そのときは潔く設定しなおしミャ。そもそも統一した値を入れたいという設計だったのに一つ一つ変えなければ駄目ということは設計自体が破綻しているミャ。

とはいえ、細かい値を設定しすぎてもせっかくのカスタムプロパティも無駄になっちゃうから、ちゃんと考えて設定していくミャ。

ブラウザ対応もほぼ問題ないと思って良いミャ~。

":root" | Can I use... Support tables for HTML5, CSS3, etc
"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

まとめ:カスタムプロパティはSassで慣れていたけど:rootに設定で良いのかな

:rootはhtmlを指定することを示します。詳細度が高くはなりますがhtmlセレクタと同等の代物で、そこに対して変数を宣言しておくことが可能です。
変数を宣言しておくことで、html配下の要素に変数を呼び出すことが可能なる、というわけです。

同じようなことがSassでも行えていましたがCSSだけで書けるならこちらのほうがいいかなぁとは思いました。

           

お仕事・当サイトへ興味を持っていただいた方
お問い合わせはこちらから

ma-san(鈴木正行)
テクニカルディレクター / Webデザイナー

「ma-san」の中の人。東京都・千葉県・宮城県仙台市を中心に企業のWebデザイン/マーケティング/IT戦略のプランニングからWebサイト構築・運用をしています。
「Webサステナビリティ・Webアクセシビリティ」を中心に、「変わりゆくWebと共にサービス・サイトを改善していくこと」を重視します。
当サイトではお仕事のご相談からナレッジシェアを中心に活動していきます。

CSS
スポンサーリンク
シェアする
ma-sanをフォローする
ma-san blog
タイトルとURLをコピーしました