【超初心者】CSSセレクタをマスターする

タグ、id、classのCSSセレクタを詳しく紹介します。

CSSでHTMLを装飾するには、以下の手順があります。

1. HTMLを書く
2. CSSセレクタ、プロパティ、値で特定のHTML要素を装飾する

ここでポイントとなるのは、HTMLの書き方によって、CSSセレクタの指定方法が異なることです。

CSSセレクタ、プロパティ、値、に関する基本的なことは下のの記事で紹介しています。

参考記事：CSSの反映のさせかた

HTMLの構造とCSSセレクタ

CSSセレクタとは

CSSセレクタとは、HTMLのどの要素を装飾するか、CSSの側で選ぶものであり、HTMLのタグやidやclassを指定することができます。
また、HTMLの構造を利用して指定することもでき、その指定方法は複数存在します。

本記事では、CSSセレクタとして何をどのように選べばよいのか、具体的にみていきたいと思います。

HTMLの構造

HTMLとは、タグによって、ウェブサイトの構成を決めます。どの文章がどんな役割を持つのか、どんな機能を持つのかのベースとなる部分をHTMLのタグによって指定します。
例えば、以下のコードを見てみてください。

See the Pen rNerJmx by M2RnRT (@m2rnrt) on CodePen.

h1タグはどこの要素にも属していませんが、h3タグはcontainerというクラス属性値を持つ、ブロック要素を作るdiv要素の中のさらにarticleタグの中に含まれています。
この時、class=container属性を持つdivタグが親要素、記事が書かれていることを示すarticle要素が子要素、見出しh3タグが孫要素となります。
HTMLはこのように、階層的な構造をしばしば作ります。

この時、CSSの指定の方法は、いくつかのパターンが考えられます。上のコードのCSSボタンを押してみてください。Resultの表示の様にするためにいくつかCSSが設定されています。なんとなく分かると思いますが、CSSセレクタに複数のパターンがあることが確認できます。以下の記事で、もっと詳しく見てみましょう。

HTMLの属性：classとid

CSSセレクタにはいくつかのパターンがありますが、それを理解するために避けては通れない概念が、HTMLの属性の一つである、classとidです。属性は以下の例の様にHTMLのタグの中に書きます。

<div class="container">
        <article class="main-article">
            <h3 id="sub-title">善悪の基準</h3>
            <h3>善悪の基準２</h3>
            <p class="example" id="sample">悪い子にはお仕置きをしなくてはなりません。
                しかし、悪いかどうか、つまり善悪の基準はどこにあるのでしょう？
                それは至って主観的なモノであり、時には独善的になることもありうるのです。
            </p>
        </article>
    </div>

サンプルコードの様に、classやidはどのタグの中にも書くことができます。また、同時に指定することもできます。基本的にどんな文字を指定してもよいのですが、できるだけ人が見て意味の分かるように指定するのが一般的です。
さて、ここでCSSセレクタの決め方に関してはいくつか考えられます。それに関して詳しく見ていきましょう。

CSSセレクタの種類

CSSセレクタの決め方は主に４つあります。

1. タグで指定する
2. classで指定する
3. idで指定する
4. 階層構造を使って指定する

なぜそんなに指定方法があるのか、それはそれぞれに長所と短所があるからです。

タグで指定する

classで指定する

idで指定する

階層構造を使って指定する

まとめ

CSSを理解する第一ステップとして、CSSセレクタについて学びました。本記事の要点として次のことが挙げられます。

• CSSはHTMLと密接な関係にあるので、HTMLの構造を理解する必要がある
• HTMLの属性であるclassとidは、CSSセレクタとセットである
• CSSセレクタの選び方は主に4つある

初めは複雑に思われるかもしれませんが、慣れてしまえば非常に簡単に感じられることでしょう。