CSSのセレクタを使って構造を意識したスタイリングをしよう！初心者でもわかる入門講座

CSSのセレクタで構造を意識したスタイリングを行う方法

先生と生徒の会話形式で理解しよう

生徒

「CSSって、どうやってホームページの見た目を変えるんですか？」

先生

「CSSは、HTMLで作られたページにデザインを加える道具です。文字の色、大きさ、余白、背景などを自由に変えられますよ。」

生徒

「でも、ページの中でどの部分にCSSを使うのか、どうやって指定するんですか？」

先生

「とても大事なポイントですね！それには“セレクタ”という仕組みを使って、HTMLの構造を見ながらデザインしていきます。」

1. CSSセレクタとは何か？

CSSセレクタとは、HTMLの中のどの部分にスタイル（見た目）を当てるかを指定する方法です。「誰に命令するか」を決める合図のようなものです。

たとえば、「すべての見出し（h1）を赤くしたい」と思ったとき、h1というタグにCSSの命令を出すことで、見出しのデザインを変えることができます。

2. 構造を意識したセレクタってどういう意味？

HTMLは入れ子（いれこ）構造でできています。入れ子とは、お弁当箱の中にさらに小さいお弁当箱が入っているようなイメージです。たとえば、記事の中に見出しや段落、画像が入っているような形です。

構造を意識したセレクタとは、「どこに入っている要素か」を考えてCSSを書く方法です。これによって、正確に必要な部分だけにデザインを適用できます。

3. HTMLの構造を見てセレクタを選ぶ方法

次のようなHTMLの例を見てみましょう。


<div class="article">
    <h2>記事のタイトル</h2>
    <p>本文の最初の段落です。</p>
    <div class="author">
        <p>著者：山田太郎</p>
    </div>
</div>

ブラウザ表示

この中の「著者：山田太郎」だけの文字の色を変えたい場合、すべてのpタグを対象にすると本文も変わってしまいます。そこで、入れ子の構造に注目します。

「.authorの中のpだけ」と指定すれば、著者の名前だけをスタイリングできます。

4. 構造を意識したCSSの書き方の具体例

上のHTMLにCSSを適用してみましょう。


<style>
    .article h2 {
        color: blue;
    }

    .article p {
        font-size: 16px;
        color: black;
    }

    .article .author p {
        color: green;
        font-style: italic;
    }
</style>

<div class="article">
    <h2>記事のタイトル</h2>
    <p>本文の最初の段落です。</p>
    <div class="author">
        <p>著者：山田太郎</p>
    </div>
</div>

ブラウザ表示

このように、「.article .author p」と書くことで、構造的に特定の場所にだけスタイルを当てることができます。これは「親の中の子」を意識して書くやり方です。