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

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セレクタとして何をどのように選べばよいのか、具体的にみていきたいと思います。

cssプロパティ
CSSの書き方のルール

HTMLの構造

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

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

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

HTMLの構造の説明
HTMLの構造はこのようになっています。

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

HTMLの構造について理解することが、CSSセレクタを理解するためのカギなんだ!

HTMLの属性:classとid

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

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

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

CSSセレクタの種類

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

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

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

タグで指定する

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

先ほどのサンプルコードを用いて説明します。
例えば、CSSセレクタとしてh3を選ぶことができます。color: red;と指定して、赤色にしてみましょう。すると、classやidとは関係なく、すべてのh3タグが赤色に変化します。

タグで指定すると、そのタグによって作られたHTML要素のすべてにCSSを適応することができます。

classで指定する

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

CSSセレクタとしてclassを指定する場合は、「ドット+クラスの属性値」とします。
例では、class=”sub-title”を指定するので、CSSセレクタとしては「.sub-title」となります。
classで指定すると、そのクラスを属性として持っているタグのみに適応されるので、ピンポイントでCSSを適応させることができます

idで指定する

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

idで指定する場合、「#+属性値」とします。サンプルでは、id=”sample”を選んでいるので、CSSセレクタとしては「#sample」とします。
ここで注意していただきたいのが、この例だと、classでは赤色を、idでは青色を同じpタグに対して指定しています。しかし、結果を見てわかる通りに、idに指定した方が優先されています。
同じタグに対して、classとidを同時に設定できますが、idのほうが優先されます。

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

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

まずはCSSボタンを押して、どのように指定しているか見てみてください。「親要素 子要素」で指定しているのが分かるかと思います。サンプルコードを例にとると、「main-articleクラスの中のh3タグ」というように指定してあるので、main-articleクラスの外にあるh3タグには適応されません。

このように入れ子構造を順に指定することでもCSSセレクタとすることができます。

まとめ

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

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

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

1つ1つ着実に磨いていきたいものです!

スポンサーリンク