CSSの基本と優先順位を理解する

CSSは、HTMLで作った構造に色、文字、余白、配置などの見た目を指定する言語です。どの要素へ、何を、どの値で指定するかを1つずつ読み取ります。

CSSが反映されないときに理由を判断できるよう、セレクターとカスケードの基本まで扱います。

HTMLからCSSを読み込む

同じHTMLでも、CSSを読み込むことで色、余白、枠線、ボタンの見た目が変わります。

css/style.cssを作り、HTMLのheadから読み込みます。パスはindex.htmlを基準に考えます。

<link rel="stylesheet" href="css/style.css">

セレクター・プロパティ・値を読む

セレクターは装飾する対象、プロパティは変更する項目、値は具体的な設定です。複数の場所で使う装飾にはクラスを付け、CSSでは先頭に.を書きます。

次の画像は、「セレクター・プロパティ・値を読む」で扱うコードや構成をブラウザで表示した結果です。

.section-title {
 color: #1f2937;
 font-size: 2rem;
 line-height: 1.4;
}

タグ名だけのセレクターはページ全体の基本設定に使い、部品の装飾はクラスを中心にします。見た目を変えるためだけにIDを増やさないでください。

継承される指定を理解する

文字色やフォントなど、一部のプロパティは親要素から子要素へ引き継がれます。一方、余白や枠線は通常引き継がれません。

次の図では、「継承される指定を理解する」の仕組みや関係を確認できます。

同じ指定をすべての子要素へ書く前に、親へ指定して継承できないか確認します。

カスケードで採用される指定が決まる

同じ要素へ同じプロパティが複数指定された場合は、重要度、詳細度、記述順などから実際に使う値が決まります。単純に下へ書けば常に勝つわけではありません。

次の図では、「カスケードで採用される指定が決まる」の仕組みや関係を確認できます。

!importantで上書きを続けると、後から変更しにくくなります。DevToolsのStylesで取り消し線になった指定を確認し、セレクターの役割を整理してください。

単位と色を用途に合わせる

• px：枠線など固定値として扱いたい長さ
• rem：基本文字サイズを基準にした長さ
• %：親要素を基準にした割合
• vw・vh：画面サイズを基準にした長さ
• 16進数やrgb()：色の指定

文字サイズを固定しすぎると、ユーザーがブラウザの文字設定を変更したときに読みづらくなります。用途に合わせて相対単位も使います。

次の図では、「単位と色を用途に合わせる」の仕組みや関係を確認できます。

DevToolsで反映結果を確認する

1. Elementsで対象要素を選ぶ
2. Stylesで適用されたセレクターを確認する
3. 取り消されたプロパティがあれば競合元を確認する
4. CSSファイルを修正して保存し、再読み込みする