第3章のクイズと実践 - CSSの仕組みと設計をマスターしよう

第3章はカスケードや継承とか、ちゃんと理解できているか少し不安で…

12問のクイズで確認してから、セレクター・カスケード・継承・設計を全部使った実践コードを書いてみよう。弱点を見つけてから実践に進むのが一番効率いいよ。

ブログカードを作るんですよね？早くやってみたいです！

その通り！まずクイズで知識を整理してから実践に進もう。

第3章まとめクイズ

第3章の重要ポイントを12問に絞ったクイズだよ。セレクター・カスケード・継承・BEM設計を一通り確認できるようにしてある。思い出しながら挑戦してみよう。

第3章総合まとめクイズ（12問）

次のCSSで、.nav の中にある a 要素すべてにスタイルを適用するセレクターはどれですか？

.nav, a { color: green; }

.nav > a { color: green; }

.nav a { color: green; }

.nav + a { color: green; }

「+」セレクター（隣接兄弟セレクター）の動作として正しいのはどれですか？

h2 + p {
  font-weight: bold;
}

すべての p 要素を太字にする

h2 の親要素の中にある p を太字にする

h2 の直後に隣接する p 要素1つだけを太字にする

h2 の後ろにある全ての p 要素を太字にする

擬似クラスセレクターの説明として正しくないものはどれですか？

:hover はマウスを乗せた時のスタイルを指定する

:first-child は親要素の最初の子要素を指定する

:visited は一度訪問したリンクのスタイルを指定する

:last-child は文書内の最後の要素のみを指定する

CSSの詳細度（Specificity）が最も高いセレクターはどれですか？

p { color: red; } /* 要素セレクター */

.text { color: red; } /* クラスセレクター */

#main { color: red; } /* IDセレクター */

* { color: red; } /* 全称セレクター */

以下のコードで、h1.title に実際に適用される文字色はどれですか？

h1 { color: blue; }
.title { color: red; }
h1.title { color: green; }

blue（要素セレクターが先に書かれているから）

red（クラスセレクターが要素より強いから）

green（要素+クラスの組み合わせが最も詳細度が高いから）

適用されない（競合するから）

!important についての説明として正しいものはどれですか？

.button {
  color: white !important;
}

!important を使うと、詳細度に関わらずそのスタイルが最優先で適用される

!important は古いブラウザにのみ対応したプロパティである

!important を使うと、そのスタイルは絶対に上書きできなくなる

!important は background-color など一部のプロパティにしか使えない

同じ詳細度のスタイルが複数ある場合、どれが適用されますか？

.text { color: red; }
.text { color: blue; }

先に書かれたルール（red）が適用される

後に書かれたルール（blue）が適用される

どちらも適用され、混ざった色になる

エラーになってどちらも適用されない

CSSの「継承」として正しい説明はどれですか？

子要素のスタイルが親要素に引き継がれる仕組み

親要素に指定したスタイルが子孫要素に自動的に引き継がれる仕組み

CSSファイルを複数に分割して読み込む仕組み

セレクターの詳細度が積み重なっていく仕組み

次のうち、継承されるプロパティはどれですか？

margin

padding

border

color

inherit キーワードの説明として正しいものはどれですか？

.child {
  border: inherit;
}

inherit を指定すると、そのプロパティが無効になる

inherit を指定すると、通常継承されないプロパティも親要素の値を強制的に引き継ぐ

inherit はテキスト系プロパティにしか使えない

inherit を指定すると、ブラウザのデフォルト値が適用される

BEM命名規則の説明として正しいものはどれですか？

card__title は Block（card）と Element（title）を __ で繋いだ正しいBEM記法

card--title は Block（card）と Element（title）を -- で繋いだ正しいBEM記法

card_title は Block（card）と Element（title）を _ で繋いだ正しいBEM記法

cardTitle は Block（card）と Element（title）のキャメルケース記法でBEMと同じ

保守しやすいCSSを書くための方針として、正しくないものはどれですか？

詳細度をなるべく低く保つ（クラスセレクターを中心に使う）

!important を積極的に使ってスタイルを確実に適用する

BEMなどの命名規則でクラス名に意味を持たせる

役割ごとにクラスを分けて、まとめて指定しすぎない

実践：ブログカードを作成しよう

クイズお疲れ様！今度は第3章で学んだセレクター・カスケード・継承・BEM命名規則を全部使って、ブログカードを作ってみよう。実務でもよく使われるコンポーネントだから、しっかり手を動かして感覚をつかんでね。

BEM命名規則の .blog-card__title とか、実際に書くと印象が変わりそうですね。

そうそう。クラス名を見ただけで「blog-card ブロックの中の title 要素だ」ってすぐわかる。コードが増えていくほど、この命名が効いてくるよ。

実践ファイルのダウンロード

以下のリンクからファイルをダウンロードし、VS Codeで開いて内容を確認することもできます。

ただし、実際に自分でコードを書いてみることが最も効果的な学習方法なので、以下の手順を参考にぜひ自分で実装してみてください。

ファイルの作成手順

「css-practice」フォルダーをVS Codeで開いて、chapter3用のフォルダーとファイルを用意しよう。

VS Codeで「css-practice」フォルダーを開く
- 「ファイル」→「フォルダーを開く」でデスクトップの「css-practice」フォルダーを選択する
「chapter3」フォルダーを作成する
- サイドバーのフォルダーアイコンから「新しいフォルダー」を選び、名前を「chapter3」にする
「index.html」ファイルを作成する
- 「chapter3」フォルダーを右クリック →「新しいファイル」→「index.html」と入力する
「style.css」ファイルを作成する
- 同じく「chapter3」フォルダーに「style.css」を作成する

第3章で学んだ概念を全部使ったブログカード

完成例を確認してから、自分で実装してみよう。BEM命名規則・子孫セレクター・擬似クラス・継承・カスケードが全部盛り込まれているから、第3章の総復習になるよ。

カードがホバーで浮き上がる効果もついているんですね！擬似クラスですよね？

そう、:hover を使ってるよ。transition と組み合わせるとなめらかに動くようになる。

コード:

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ブログカード実践</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">

        <div class="blog-card">
            <div class="blog-card__header">
                <span class="blog-card__tag blog-card__tag--featured">CSS</span>
                <span class="blog-card__tag">Web設計</span>
            </div>
            <div class="blog-card__body">
                <h2 class="blog-card__title">
                    <a href="#">CSSの継承とカスケードを理解しよう</a>
                </h2>
                <p class="blog-card__description">
                    カスケードと継承は、CSSの2大基本概念です。
                    この記事では図解と実例で仕組みをわかりやすく解説します。
                </p>
            </div>
            <div class="blog-card__footer">
                <span class="blog-card__date">2026年3月8日</span>
                <a href="#" class="blog-card__link">続きを読む</a>
            </div>
        </div>

    </div>
</body>
</html>

プレビュー:

新しいタブで開く

実装手順

HTMLファイルの基本構造を作成する
- DOCTYPE宣言、lang="ja" 属性、head セクションで charset・viewport・title を設定する
- <link rel="stylesheet" href="style.css"> で外部CSSを読み込む
ブログカードのHTML構造を作成する（BEM命名規則）
- .container で全体を包む div を作成する
- Block: .blog-card でカード全体を囲む
- Element: .blog-card__header・.blog-card__body・.blog-card__footer の3つのエリアに分ける
- .blog-card__tag にはノーマルタグと Modifier .blog-card__tag--featured の2種類を配置する
- .blog-card__title の中に <a> 要素でリンクを設置する
CSSリセットを書く
- 全称セレクター * で margin・padding を 0、box-sizing を border-box に設定する
継承を活用して body にフォントを設定する
- font-family・background-color・color を body に一度だけ設定する（全子孫に継承される）
Block: .blog-card の基本スタイルを設定する
- 白背景、border-radius、box-shadow、overflow: hidden を設定する
- 擬似クラス .blog-card:hover で transform: translateY(-4px) とシャドウ強調を設定する（カスケード：後から書いたホバースタイルが上書き）
Element のスタイルを設定する（子孫セレクター活用）
- .blog-card__tag：タグの共通スタイル（背景色・角丸・フォントサイズ）を設定する
- Modifier .blog-card__tag--featured：カスケードを利用して背景色と文字色を上書きする
- .blog-card__title a：子孫セレクターで title 内のリンクだけを対象にスタイルを設定する
- .blog-card__title a:hover：擬似クラスでホバー時の色変化を追加する
フッターを設定する
- .blog-card__footer に display: flex・justify-content: space-between で日付とリンクを左右に配置する
- border-top で区切り線を設定する（継承されないプロパティの代表例）
ブラウザで動作を確認する
- ファイルを保存してブラウザで開き、ホバー効果・タグの色分け・リンクのスタイルが正しく動くか確認する

コーディング時の注意点

BEM命名の __ と — の使い分け .block__element は二重アンダースコア、.block--modifier は二重ハイフン。混同しやすいので意識して書く
カスケードの順序 .blog-card__tag の基本スタイルを先に書き、.blog-card__tag--featured の上書きスタイルを後に書く。順序が逆になると Modifier が効かなくなる
子孫セレクターのスコープ .blog-card__title a のように書くことで、他の a 要素には影響を与えずカードのタイトルリンクだけを対象にできる
継承されるプロパティとされないプロパティ color・font-family は body から継承されるが、border・padding・margin は各要素に個別に設定が必要
transition は変化前の要素に書く :hover 側ではなく .blog-card 側に transition を設定することで、ホバー解除時もなめらかに戻る

使用するCSSの概念チェックリスト

セレクター組み合わせ 子孫セレクター（.blog-card__title a）、擬似クラス（:hover）を使っている
カスケード .blog-card__tag → .blog-card__tag--featured の順序で上書きが行われている
継承 body に設定した font-family・color が子孫要素に自動的に引き継がれている
BEM命名規則 Block（.blog-card）、Element（__header / __body / __footer / __tag / __title など）、Modifier（--featured）が正しく使われている
擬似クラス .blog-card:hover・.blog-card__title a:hover・.blog-card__link:hover が設定されている
transition ホバー効果がなめらかに動作する

実装完了後のチェックリスト

HTML基本構造 DOCTYPE宣言、lang="ja"、charset・viewport・title が正しく設定されている
CSS外部ファイルリンク link 要素で style.css が正しく読み込まれている
リセットスタイル 全要素の margin・padding がリセットされている
BEM命名 Block・Element・Modifier のクラス名が命名規則通りに書けている
タグのスタイル featured タグだけ背景色と文字色が変わっている（Modifier が効いている）
タイトルリンク 通常時は黒、ホバー時はグリーンに色が変わる
ホバーエフェクト カード全体がホバーで数ピクセル浮き上がり、シャドウが強調される
フッター 日付とリンクが左右に並んでいる（flexbox が効いている）
継承の確認 body のフォントがカード内のテキスト全体に適用されている
ブラウザ表示確認 各要素が期待通りに表示されホバー効果が正常に動作している

まとめ

BEM命名規則って最初は長くて面倒だと思っていたけど、クラス名を見ればどの部分かすぐわかって逆に読みやすいですね。

カスケードの順番を意識して .blog-card__tag--featured を後に書くと、ちゃんと上書きされました。詳細度の話が実感できた気がします！

それが一番大事な気づきだよ。「なんとなく動く」のではなく「なぜそうなるのかわかる」状態になってきたね。第4章ではレスポンシブデザインを学ぶから、ここで身につけた設計の考え方がさらに活きてくるよ。

第3章で身につけたスキル

セレクター応用 子孫・子・隣接兄弟・一般兄弟セレクター、擬似クラスを目的に応じて使い分けられる
詳細度の理解 全称・要素・クラス・IDの詳細度の順序を把握し、意図したスタイルを適用できる
カスケードの活用 ソースオーダーを意識した上書きスタイルの設計ができる
継承の理解 継承されるプロパティとされないプロパティを把握し、効率的にスタイルを設定できる
BEM命名規則 Block・Element・Modifier の命名ルールに従ってクラスを設計できる
保守性の高いCSS 詳細度を低く保ち、命名規則で意図が伝わるコードが書ける
実践力 学んだ概念を統合してブログカードコンポーネントを実装できる

第4章では、レスポンシブデザインとメディアクエリを学びます。スマートフォン・タブレット・PCなど様々な画面サイズに対応したレイアウトを実現できるようになりましょう。