パソコ

こんにちは！パソコです。気になったら関連記事もチェックしてみてね🔥

CSSセレクタとカスケード - 正確にスタイルを適用する技術

前回はCSSの基本を学びました。今回は「どの要素に」「どんな優先順位で」スタイルを適用するかを制御する、CSSセレクタとカスケードについて詳しく学んでいきます。

🎯 今回学ぶこと

CSSセレクタの種類と使い分け
カスケードと詳細度の仕組み
効率的なCSS設計の考え方
実際のウェブサイトでの実践例

📚 CSSセレクタの種類

1. 基本セレクタ

要素セレクタ

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
/* すべてのh1要素に適用 */
h1 {
    color: #2c3e50;
    font-size: 28px;
}

/* すべてのp要素に適用 */
p {
    line-height: 1.6;
    margin-bottom: 16px;
}

クラスセレクタ

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
/* class="article-title"の要素に適用 */
.article-title {
    color: #34495e;
    font-weight: 600;
}

/* class="btn primary"の要素に適用 */
.btn {
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none;
}

.primary {
    background-color: #3498db;
    color: white;
}

IDセレクタ

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
/* id="header"の要素に適用 */
#header {
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* id="main-content"の要素に適用 */
#main-content {
    max-width: 800px;
    margin: 0 auto;
}

2. 組み合わせセレクタ

子孫セレクタ（スペース）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
/* .article内のすべてのp要素 */
.article p {
    color: #555;
    text-align: justify;
}

/* #sidebar内のすべてのa要素 */
#sidebar a {
    color: #7f8c8d;
    text-decoration: none;
}

直接の子セレクタ（>）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
/* .menu直下のli要素のみ */
.menu > li {
    display: inline-block;
    margin-right: 20px;
}

/* .card直下のh2要素のみ */
.card > h2 {
    margin-top: 0;
    color: #2c3e50;
}

隣接兄弟セレクタ（+）

1
2
3
4
5
6
/* h2の直後にあるp要素 */
h2 + p {
    margin-top: 0;
    font-weight: 500;
    color: #7f8c8d;
}

3. 擬似クラスセレクタ

ユーザーアクション

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
/* ホバー時 */
.button:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
}

/* フォーカス時 */
input:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

/* アクティブ時 */
.button:active {
    transform: translateY(0);
}

構造的擬似クラス

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
/* 最初の子要素 */
.article-list li:first-child {
    border-top: none;
}

/* 最後の子要素 */
.article-list li:last-child {
    border-bottom: none;
}

/* n番目の子要素 */
.grid-item:nth-child(3n) {
    margin-right: 0; /* 3の倍数番目の要素の右マージンをなくす */
}

/* 偶数番目の要素 */
.table-row:nth-child(even) {
    background-color: #f8f9fa;
}

4. 属性セレクタ

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* target="_blank"属性を持つa要素 */
a[target="_blank"] {
    padding-right: 15px;
    background: url('external-link.svg') no-repeat right center;
}

/* class属性に"btn"を含む要素 */
[class*="btn"] {
    display: inline-block;
    cursor: pointer;
}

/* href属性が"mailto:"で始まるa要素 */
a[href^="mailto:"] {
    color: #e74c3c;
}

/* href属性が".pdf"で終わるa要素 */
a[href$=".pdf"] {
    padding-left: 20px;
    background: url('pdf-icon.svg') no-repeat left center;
}

⚖️ CSSカスケードと詳細度

カスケードとは？

CSSの「C」は「Cascading」の略で、複数のスタイルが適用される場合の優先順位を決める仕組みです。

詳細度の計算

CSS詳細度は以下の順序で計算されます：

セレクタの種類	詳細度	例
インラインスタイル	1000	`style="color: red;"`
ID	100	`#header`
クラス・属性・擬似クラス	10	`.nav`, `[type="text"]`, `:hover`
要素・擬似要素	1	`div`, `::before`

詳細度の実例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 詳細度：1 (要素セレクタ) */
p {
    color: black;
}

/* 詳細度：10 (クラスセレクタ) */
.article-text {
    color: blue;
}

/* 詳細度：11 (クラス + 要素) */
.article p {
    color: green;
}

/* 詳細度：101 (ID + 要素) */
#main p {
    color: red;
}

/* 詳細度：111 (ID + クラス + 要素) */
#main .article p {
    color: purple;
}

上記の場合、#main .article pが最も詳細度が高いため、紫色が適用されます。

!importantの使用

1
2
3
4
/* 最高優先度（ただし、使用は避けるべき） */
.text-red {
    color: red !important;
}

⚠️ 注意: !importantは詳細度を無視して最優先されますが、保守性を下げるため、緊急時以外は使用を避けましょう。

🏗️ 実践例：ブログサイトのナビゲーション

実際のブログサイトでよく使うナビゲーションを例に、セレクタの使い分けを見てみましょう。

HTML構造

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<nav class="main-nav" id="navigation">
    <div class="nav-container">
        <a href="/" class="nav-brand">
            <img src="/logo.png" alt="サイトロゴ" class="logo">
            <span class="site-title">技術ブログ</span>
        </a>
        
        <ul class="nav-menu">
            <li class="nav-item">
                <a href="/" class="nav-link current">ホーム</a>
            </li>
            <li class="nav-item">
                <a href="/tech/" class="nav-link">技術記事</a>
            </li>
            <li class="nav-item">
                <a href="/travel/" class="nav-link">旅行記</a>
            </li>
            <li class="nav-item">
                <a href="/contact/" class="nav-link external" target="_blank">お問い合わせ</a>
            </li>
        </ul>
    </div>
</nav>

CSS実装（セレクタの使い分け）

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
/* ベースとなるナビゲーション */
.main-nav {
    background-color: #ffffff;
    border-bottom: 1px solid #e1e8ed;
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* コンテナのレイアウト */
.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 60px;
}

/* ブランド部分のスタイル */
.nav-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #2c3e50;
}

/* ロゴ画像（直接の子セレクタ使用） */
.nav-brand > .logo {
    width: 32px;
    height: 32px;
    margin-right: 12px;
}

/* サイトタイトル（隣接兄弟セレクタでも可能） */
.nav-brand .site-title {
    font-size: 18px;
    font-weight: 600;
}

/* メニューリストのリセット */
.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 8px;
}

/* メニューアイテム */
.nav-item {
    margin: 0;
}

/* メニューリンク */
.nav-link {
    display: block;
    padding: 8px 16px;
    color: #4a5568;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-weight: 500;
}

/* ホバー状態（擬似クラス） */
.nav-link:hover {
    background-color: #f7fafc;
    color: #2d3748;
}

/* 現在のページ（クラスセレクタ） */
.nav-link.current {
    background-color: #ebf8ff;
    color: #3182ce;
}

/* 外部リンク（属性セレクタ） */
.nav-link[target="_blank"] {
    position: relative;
}

/* 外部リンクアイコン（擬似要素） */
.nav-link[target="_blank"]::after {
    content: "↗";
    font-size: 12px;
    margin-left: 4px;
    opacity: 0.7;
}

/* モバイル対応（メディアクエリ） */
@media (max-width: 768px) {
    .nav-container {
        flex-direction: column;
        height: auto;
        padding: 15px 20px;
    }
    
    .nav-menu {
        margin-top: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .nav-link {
        padding: 6px 12px;
        font-size: 14px;
    }
}

💡 効率的なCSS設計のコツ

1. BEM命名規則の活用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* Block（ブロック） */
.card {
    background: white;
    border-radius: 8px;
    padding: 20px;
}

/* Element（要素） */
.card__title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

.card__content {
    color: #555;
    line-height: 1.6;
}

/* Modifier（修飾子） */
.card--featured {
    border: 2px solid #3498db;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.1);
}

.card--compact {
    padding: 12px;
}

2. CSS変数の活用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
:root {
    /* カラーパレット */
    --primary-color: #3498db;
    --secondary-color: #2c3e50;
    --background-color: #ffffff;
    --text-color: #333333;
    --text-color-light: #666666;
    
    /* スペーシング */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* ボーダーラディウス */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
}

.button {
    background-color: var(--primary-color);
    color: var(--background-color);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
    border: none;
    cursor: pointer;
}

3. セレクタの詳細度管理

1
2
3
4
5
6
7
/* 良い例：詳細度を低く保つ */
.article { }
.article-title { }
.article-content { }

/* 避けるべき例：詳細度が高すぎる */
.main .content .article .article-header .article-title { }

🔍 実際のウェブサイトでの適用

記事カードコンポーネントの例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<article class="article-card featured">
    <h2 class="article-card__title">
        <a href="/article/css-guide" class="article-card__link">
            CSS完全ガイド
        </a>
    </h2>
    
    <div class="article-card__meta">
        <time class="article-card__date" datetime="2025-09-13">
            2025年9月13日
        </time>
        <span class="article-card__category">
            <a href="/categories/css/">技術記事</a>
        </span>
    </div>
    
    <div class="article-card__excerpt">
        CSSの基本から応用まで、初心者にもわかりやすく解説します...
    </div>
    
    <div class="article-card__tags">
        <span class="tag">CSS</span>
        <span class="tag">初心者</span>
        <span class="tag">ウェブデザイン</span>
    </div>
</article>

🚀 次回予告

次回は「Flexboxレイアウト入門」について学びます：

Flexboxの基本概念
3カラムレイアウトの実装
レスポンシブ対応の実践
Hugoサイトでの実際の活用例

📝 今回のまとめ

CSSセレクタには要素、クラス、ID、組み合わせ、擬似クラスなど多種類ある
詳細度の理解がスタイル適用の制御に重要
効率的なCSS設計にはBEM命名規則やCSS変数が有効
実際のウェブサイトで効率的なスタイル適用が可能

💡 質問やフィードバックがあれば、コメント欄やTwitter（@firebird19245）でお気軽にどうぞ！

シリーズ記事

【第1回】CSSの基礎知識
【第2回】CSSセレクタとカスケード（この記事）
【第3回】Flexboxレイアウト入門（次回）
【第4回】レスポンシブデザイン完全ガイド
【第5回】JavaScript入門 - インタラクティブなウェブサイト作り

firebirdテックトーク

【CSS実践入門 #2】CSSセレクタとカスケード - 思い通りにスタイルを適用する技術