web

WEBデザイン

2025-08-26

cssのルートを設定しよう

CSSも新しいものが随時アップデートされていますので、理解するうえで色々と調べたものをアウトプットしていこうと思います。

まずは、初回にやるにはわかりやすい「:root」から始めていこうと思います。

:rootとはなんぞや

:rootはCSSの疑似クラスで、HTML最上位である<html>タグを選択します。

:root {
}

擬似クラスなので頭に「：」を付けて使用する。
そのまま:rootとして使用すれば、サイト全体に適用させる定義を行うことが出来る。
これが基本的な使い方になる。

記述のルール

:rootの中で、--（ハイフン2つ）から始まる名前を使って変数を定義すること。
ハイフン２個が頭に付くのは設置するために必要なルールとなる。
（標準のプロパティと変数とで区別するために必須となる）

:root {
    --color-background: #fff;
    --color-text: #333;
}

直接:rootにて書かれた物はグローバル変数となり、CSSファイル内のすべての場所で変数として使用できるようになる。

ファイルの最初に記述: コードの可読性とメンテナンス性を高めるため、:rootはCSSファイルの一番最初に書くのがベストです。サイト全体の「設定ファイル」や「設計のルールブック」として機能します。

変数としての呼び出し方

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

設定された変数はvar()で呼び出すことが出来る。
backgroundには--color-backgroudの値が、colorには--color-textの値が入る。

グローバルがあるならローカルもある

直接擬似クラスを設置すれば（:root）グローバル変数になるが、もちろん普通の擬似クラスとして使用できる。その場合はローカル変数になる。

.hogehoge {
    --color-background:#ccc;
}

この用に記述すると.hogehogeクラス内の--color-backgroundの値が#cccになる。
グローバルの値とは違う値にしたい時はローカル変数を作成して入れ替える方法を取ることが出来る。

これにより、ベースの色を１部だけ違う色にしたい時などの対応がわかりやすくなる。

あれ？:rootは擬似クラスじゃないの？

:rootは擬似クラスなのに何でローカルを定義する時は.hogehoge:rootにならないんだろうか…

:rootは擬似クラスですが、参照するのは必ず<html>になります。そのため、.hogehoge:rootと書いてしまうと、html.hogehoge:rootになってしまうのです。

しかも困ったことに.hogehoge:rootはhtml.hogehogeよりも詳細度が高くなってしまうので、現在のCSSの仕様では使いづらいものとなってしまいます。
そのため:rootを切り替えて使う用途の場合（テーマの変更やダークモードなどで使用する用途）

:root {
   --color-background:#fff;
}
html.hogehoge {
    --color-background:#ccc;
}

このような感じで:root以外は:rootを使わない方法が推奨されています。

最終的にはこの様に書きます

:root {
    /* 基本設定 */
   --color-background:#fff;
}
html.hogehoge {
     /* 別テーマの設定はhtmlのクラスを作成してその中にそのままいれる */
   --color-background:#ccc;
}
.fugafuga {
    /* ローカル変数はクラスの中にそのまま入れる */
   --color-background:#999;
}

なにはともあれ:rootは頭に一つ。と覚えておくと良いかも。

定義するものとしないもの

定義するもの
サイト設計の基本となるもの（色、フォント、余白の幅）のベースとなるもの

:root {
  --color-background: #fff;
  --color-text :#222;
  --color-border:#ccc;
  --color-accent:#F39B00;
  --color-sub:#fa0;
  --color-link:#2198D3;
  --color-hover:#74d1ff;
  /* fonts */
  --fonts-midashi:'Montserrat', sans-serif;
  --fonts-serif:'Kaisei Opti', serif;
  --fontsize-base: 1rem;
  --letterspacing-style:0.1rem;
  --lineheight-style:1.5;
  /* spacing */
  --space-section: 120px;
  --space-gap:8px;
  --space-spside:1.5rem;
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
  /* responsive */
  --responsive-sp:480px;
  --responsive-md:768px;
  --responsive-lg:960px;
  --responsive-xl:1280px;
}

このような感じで基本的な骨組みの数値を決定して入れる感じとなる。

定義しないもの
scroll-behaviorやfont-smoothingのような、要素に直接適用するスタイル。
書けば直接作用する要素はこの中に入れない。
このようなスタイルはhtmlやbodyに直接指定すること。

また、グローバルとして扱わないもの（使用が一部に限られるもの）もこの中に入れない方が良い。
その場合は、ローカル変数として設置するのがわかりやすい。

おまけ

var()はcalcで使用できる。

calc( var(--space-gap) * 3 );

var()は数値を指定すると、calcを使用して計算することが出来る。

２倍の値、３倍の値などが必要になるときでも、それぞれの値を用意する必要はない。

このような感じで、最近のモダンなWEB制作の色々なことについて説明していきたいと思います。

画像はこの学習の時のざっくばらんに紙に書き殴った物をちょっと清書してみたのですが、全く清書になっておらずなんじゃこりゃってなってしまったのが失敗点でした。

このあたりの人に見せる、理解してもらう、わかりやすい説明をするという部分ももっと勉強していくべきだなと心に誓うのでありました。