CSSの基本｜詳細度・box-sizing・単位・変数

CSS基礎とは｜このカテゴリで分かること

CSSの基礎で最もつまずきやすいのは、「書いたのに効かない」「幅の計算が合わない」という、ルールを知らないと原因が見えない現象です。このカテゴリでは、CSS詳細度、box-sizing、position、rem・em・vh などの単位、CSS変数（カスタムプロパティ）、::before・::after という、コーディングで毎日使う基本の仕組みを扱います。CSSを一通り触ったが自己流で、書くたびに挙動が違って見える人や、既存のCSSを読み解く機会が増えた初心者から中級のコーダーを想定しています。

CSSはプロパティの暗記より、「どのルールが勝つか」「サイズはどう決まるか」「基準は何か」という考え方の理解が大切です。この3つの観点を軸に読むと、レイアウトやアニメーションなど次のカテゴリにも進みやすくなります。仕様は W3C が策定しており、細部の対応状況は変わるため、最新は MDN など公式で確認してください。

読む順番（おすすめの順路）

1. box-sizing: border-boxとは｜幅の計算と全体指定のやり方 … 要素の幅や高さの計算の土台です。最初に全体指定の考え方を決めておくと後が楽になります。
2. CSS詳細度とは｜計算方法と効かないときの直し方 … 「効かない」の最大の原因を理解します。以降の記事のデバッグにも役立ちます。
3. CSSの単位 rem・em・vhの違い｜使い分けと実測例 … 何を基準にサイズを決めるか。レスポンシブの下準備になります。
4. CSS positionの使い方｜relative・absolute・fixedの違い … 要素を重ねる・固定するための基本です。relative と absolute の関係が肝になります。
5. CSS変数（カスタムプロパティ）の使い方｜var()とスコープ … 色や余白を一箇所で管理する方法です。ここまでが日常の基礎です。
6. CSS ::before・::afterの使い方｜疑似要素とcontent … 装飾を HTML に足さずに追加する疑似要素です。最後に読むと応用の幅が広がります。

押さえておきたいポイント（リサーチ）

MDN の詳細度の解説で確認できる要点です。

• 詳細度は、ID、クラス（属性・疑似クラスを含む）、要素（疑似要素を含む）の3つの列で表し、左の列から順に比較します。ID が1つあれば、クラスをいくつ重ねても負けません（クラスが4つの 0-4-0 より ID が1つの 1-0-0 が強い）。
• !important は詳細度を上書きしますが、多用は推奨されていません。代替としてカスケードレイヤーが挙げられています。
• :where() は常に詳細度 0-0-0 で、上書きしやすいベーススタイルを書くのに向きます。:is()、:has()、:not() は引数の中で最大の詳細度になります。

その他の仕様（単位や変数の対応ブラウザなど）は更新されるため、利用前に各公式ドキュメントで最新の情報を確認してください。

よくある疑問

Q. CSSが効かないときは、まず何を確認しますか。
A. セレクターの綴りと読み込み順、そして詳細度の競合です。切り分けの手順は CSS詳細度とは｜計算方法と効かないときの直し方 にまとめています。

Q. width を指定したのにはみ出すのはなぜですか。
A. padding や border が幅に加算されているためです。box-sizing: border-boxとは｜幅の計算と全体指定のやり方 の border-box で解決できます。

Q. px と rem はどちらを使うべきですか。
A. 一概には言えず、文字や余白は rem、細い線は px のように使い分ける考え方があります。比較は CSSの単位 rem・em・vhの違い｜使い分けと実測例 を参照してください。

Q. position: absolute の基準がずれます。
A. 親に position が指定されていないと、さらに上の祖先が基準になります。仕組みは CSS positionの使い方｜relative・absolute・fixedの違い で解説しています。