06. セレクタ・カスケード・詳細度

この章では、CSSのセレクタ、カスケード、詳細度を学びます。

CSSでつまずきやすい原因の多くは、「どの指定が効いているのか」がわからなくなることです。

仕組みをざっくり理解しておくと、CSSが効かない時や上書きできない時に落ち着いて確認できます。

セレクタとは

セレクタとは、CSSを当てる対象を指定する部分です。

.card-title {
    font-size: 24px;
}

この例では、.card-titleがセレクタです。

class="card-title"が付いたHTML要素にスタイルが当たります。

<h2 class="card-title">サービス内容</h2>

基本のセレクタ

最初によく使うセレクタは次の通りです。

実務では、クラスセレクタを中心に使うことが多いです。

要素セレクタだけで書くと、意図しない場所までスタイルが当たることがあります。

子孫セレクタ

子孫セレクタは、ある要素の中にある要素を指定します。

<div class="card">
    <h2>タイトル</h2>
    <p>本文です。</p>
</div>

.card p {
    line-height: 1.8;
}

この場合、.cardの中にあるpだけにスタイルが当たります。

便利ですが、深く書きすぎると管理しづらくなります。

.page .section .inner .card .body p {
    color: #333;
}

このように階層に依存しすぎると、HTML構造を少し変えただけでCSSが効かなくなることがあります。

疑似クラス

疑似クラスは、要素の状態に合わせてスタイルを当てるために使います。

よく使うものに:hoverがあります。

.button {
    background-color: #005bac;
}

.button:hover {
    background-color: #003f7d;
}

マウスを乗せた時の見た目を変えられます。

ほかにも、:focus-visibleはキーボード操作時のフォーカス表示に使います。

.button:focus-visible {
    outline: 3px solid #ffbf47;
    outline-offset: 3px;
}

見た目のためだけでなく、操作しやすさにも関わる重要な指定です。

カスケードとは

CSSの「カスケード」とは、複数のCSS指定がある時に、どれを優先するかを決める仕組みです。

たとえば、次のように同じ要素に対して複数の指定があるとします。

.text {
    color: red;
}

.text {
    color: blue;
}

この場合、後に書かれたcolor: blue;が優先されます。

ただし、いつも後に書いたものが勝つわけではありません。

詳細度も関係します。

詳細度とは

詳細度とは、セレクタがどれくらい具体的かを表す考え方です。

ざっくり言うと、より具体的なセレクタが優先されます。

p {
    color: red;
}

.text {
    color: blue;
}

HTMLが次のようになっている場合、文字色は青になります。

<p class="text">本文です。</p>

pより.textの方が具体的だからです。

詳細度の強さは、ざっくり次のように考えます。

初心者のうちは、IDセレクタやインラインスタイルを多用しない方が管理しやすいです。

上書きしやすいCSSを書く

CSSは、あとから上書きしやすいことも大切です。

そのためには、セレクタを強くしすぎないようにします。

たとえば、次のような書き方は上書きしづらくなります。

#main .section .card p {
    color: #333;
}

最初は、次のようにクラスを中心にシンプルに書く方が扱いやすいです。

.card-text {
    color: #333;
}

HTML側で必要な要素にクラスを付けると、CSSの意図がわかりやすくなります。

命名の基本

クラス名は、見た目だけでなく役割が伝わる名前にします。

よい例:

• .button
• .card
• .section-title
• .profile-image
• .contact-form

避けたい例:

• .red
• .big
• .left
• .aaa
• .text1

redやbigのような名前は、あとから色やサイズが変わった時に意味が合わなくなります。

まずは、何の部品か、どの場所の要素かがわかる名前を付けます。

よくある失敗

• クラス名のスペルがHTMLとCSSで違う
• 要素セレクタだけで書いて、意図しない場所に効く
• セレクタを深く書きすぎて、上書きしづらくなる
• IDセレクタを多用して、詳細度が強くなりすぎる
• !importantで無理に上書きする
• hoverだけ指定して、focusの見た目を忘れる

CSSが思った通りに効かない時は、詳細度、書いた順番、クラス名を確認します。

この章のまとめ

• セレクタは、CSSを当てる対象を指定する部分
• 実務ではクラスセレクタを中心に使うと管理しやすい
• カスケードでは、書いた順番や詳細度によって優先されるCSSが決まる
• セレクタを強くしすぎると、あとから上書きしづらくなる
• クラス名は、役割が伝わる名前にする