HTML/CSSの勉強をしていて、意外と苦戦したのが「セレクタの指定方法」です。
「この部分の文字だけ変えたい」と思ってCSSを書いているのに、思ったところにCSSが反映されない。
HTMLを見返して、
「どこを指定すればいいんだ……？」
となることが何度もありました。
今回は、実際にサイトを作る中で学んだセレクタの指定方法を、自分なりに整理してみます。
セレクタとは？
セレクタとは、CSSで**「どのHTML要素にスタイルを適用するか」を指定する部分**です。
例えば、
.main {
}
この場合、.mainがセレクタです。
HTMLの中から、CSSを適用したい場所を指定するために使います。
タグを指定する
一番シンプルなのが、HTMLのタグをそのまま指定する方法です。
p {
color: #333;
}
この場合、HTML内にあるすべてのp要素が対象になります。
例えば、
<p>文章A</p>
<p>文章B</p>
とあれば、どちらのpにもCSSが適用されます。
「全部のpを同じように装飾したい」という場合には便利ですが、
「このpだけ変えたい」
という場合には、別の指定方法が必要になります。
classを指定する
そこでよく使うのがclassです。
HTMLにclassを付けます。
<p class="title">タイトル</p>
CSSでは、class名の前に.を付けて指定します。
.title {
font-size: 24px;
}
classは、HTML要素につけるグループ名や識別名のようなものだと考えると分かりやすいと思いました。
同じような役割の要素に同じclassを付けて、まとめてCSSを適用することができます。
idを指定する
idもHTML要素を指定するために使います。
<section id="about">
CSSでは、id名の前に#を付けます。
#about {
}
私の場合、idは「HTMLの指定住所」のようなイメージで覚えました。
特定の要素をピンポイントで指定したいときに使う、という感覚です。
親要素の中にある要素を指定する
セレクタでは、HTMLの階層を利用して指定することもできます。
例えば、
.box p {
}
と書いた場合、
.boxの中にあるp
を指定します。
HTMLが、
<div class="box">
<p>この文章</p>
</div>
<p>この文章は対象外</p>
となっていれば、最初のpだけが対象になります。
この方法を使えば、すべてのpにclassを付けなくても、親要素との関係を利用してピンポイントに指定できます。
最初は「全部classを付けたほうが分かりやすいのでは？」と思っていましたが、HTMLの構造を利用して指定できることを知って、便利だなと思いました。
スペースがあるかないかで意味が変わる！
今回、サイト制作をしていて特に混乱したのがここです。
例えば、
.box .main {
}
と、
.box.main {
}
は、見た目はほとんど同じですが、意味が違います。
スペースあり
.box .main {
}
これは、
.boxの中にある.main
を指定します。
つまり、別々の要素です。
スペースなし
.box.main {
}
こちらは、
.boxと.mainの両方のclassが付いている同じ要素
を指定します。
例えば、
<div class="box main">
このような要素が対象になります。
この違いを最初は理解していなくて、CSSが思ったように反映されないことがありました。
スペースがあるかないかで意味が変わる。
これは今回かなり勉強になったポイントです。
階層をさらに細かく指定する
複数のセレクタをスペースでつなげることで、さらに細かく指定することもできます。
例えば、
.main .section .title {
}
と書いた場合、
.mainの中にある.sectionの中にある.title
を指定しています。
ここで最初に勘違いしていたのが、
「複数のclassを指定している」
という考え方でした。
実際には、これは複数のclassが同じ要素についているという意味ではなく、HTMLの階層をたどって指定しているということでした。
一方で、
.box.main {
}
のようにスペースを入れなければ、同じ要素に.boxと.mainの両方が付いている場合を指定できます。
この違いが分かると、セレクタの見方が少し分かりやすくなりました。
「>」という指定方法もあるらしい
今回の勉強では、スペースを使った指定方法を中心に覚えました。
ただ、セレクタには>を使った指定方法もあります。
.box > p {
}
これは、
.boxの直下にあるp
を指定します。
一方、
.box p {
}
は、.boxの中にあるpを指定します。
そのため、
<div class="box">
<div>
<p>文章</p>
</div>
</div>
の場合、
.box p
ならpが対象になりますが、
.box > p
では対象になりません。
まだ完全に使いこなせているわけではないので、今後のコーディングで少しずつ慣れていきたいと思います。
実際にサイトを作ってみて分かったこと
今回、架空のサイトを実際にコーディングしてみて、
「どのようにセレクタを指定するか」だけではなく、「最初にHTMLの構造を考えておくことも大切」
だと感じました。
特に、指定したい場所が分からなくなったとき、
#about .about-menu ul {
}
のように階層を深くして指定してみても、思ったようにCSSが効かないことがありました。
「ulじゃなくてliを指定する必要があるのかな？」
と迷うこともありました。
そのときに大切なのは、
「自分は最終的にどの要素にスタイルを適用したいのか？」
をHTMLを見ながら確認することだと分かりました。
セレクタを長くすればいいわけではなく、HTMLの構造と、実際にスタイルを付けたい要素を確認する必要があります。
共通するスタイルは最初に考えておく
もう一つ、サイトを作っていて感じたことがあります。
それは、
サイト全体で共通する設定を最初に整理しておけばよかった
ということです。
例えば、
- font-family
- line-height
- letter-spacing
- font-weight
- ページ全体の余白
などです。
こういった共通する設定を最初に決めておけば、同じCSSを何度も書かなくても済みます。
実際に作りながら、
「ここにもclassを付けて……」
と追加していくと、どんどんCSSの記述が増えてしまいました。
最初にサイト全体の共通部分を考えておくことも、コーディングをするときには大切なんだと分かりました。
今回分かったこと
今回の勉強で、セレクタについて少しずつ理解できるようになりました。
特に覚えておきたいのは、
p
→ すべてのpを指定
.title
→ .titleというclassを指定
#about
→ #aboutというidを指定
.box p
→ .boxの中にあるpを指定
.box > p
→ .boxの直下にあるpを指定
.box.main
→ .boxと.mainの両方が付いた同じ要素を指定
.box .main
→ .boxの中にある.mainを指定
という違いです。
まとめ
今回、セレクタについて勉強してみて、
「CSSが効かないときは、セレクタの書き方だけを見るのではなく、HTMLの構造を見ることが大切」
だと分かりました。
特に、スペースを入れる・入れないだけで意味が変わることには驚きました。
まだ複雑なセレクタを自由に使いこなせるわけではありませんが、実際にサイトを作りながら、
「この要素を指定したいなら、HTMLのどこを見ればいいのか」
を考えられるようになってきました。
これからJavaScriptやLinuxなど、勉強することはまだまだありますが、HTML/CSSについても実際に手を動かしながら少しずつ理解を深めていきたいと思います。
