CSSの基本的な書き方

前回はCSSについてざっと概要をまとめました。
その記事の中の「CSSの基本的な書き方」について、今回は少しだけ深堀りしてみたいと思います。

CSSがデザインをコントロールするためのものであることは、前回お伝えしました。
今回はそのデザインを、どうやって指定するかの説明になります。

例えば文字を赤くしたいとき、文字サイズを大きくしたいとき、文字をセンター合わせにしたいとき。
ページの見出しにそれを反映するのか、記事のリード文にそれを反映するのか。
この記事一覧のタイトルは太字にしたいけど、その下の投稿日は小さい文字で控えめに表示させたい。

そんな指定の仕方を今回は覚えましょう。

CSSセレクタとは？

HTMLの「どこに適用するか」を決めるターゲット指定

CSSはスタイルを定義するものですが、「どのHTML要素に対して」そのスタイルを使うのかを明示しなければなりません。その対象になるのがセレクタです。

h1 {
  color: red;
}

この例では、h1がセレクタとなり、h1タグに属するテキストの文字色（color）が赤（red）となります。
h1とは見出し（heading）を意味し、この記事のタイトルはこれですよ、と示すためのタグです。

「どの要素を選択するか」が、CSSのすべての出発点になります。

よく使う基本セレクタ

1. 要素セレクタ（タグ名で指定）

一番シンプルなセレクタです。
pやh1など、HTMLタグそのものを指定します。

端的でわかりやすい書き方になりますが、このCSS指定を読ませた全ページの全タグに適用されるため、融通が効かないところがあります。

p {
  font-size: 16px;
}

• 特徴：全ての同じタグに適用される
• 注意点：細かい個別調整には不向き

2. クラスセレクタ（.クラス名）

HTMLタグに「class=”クラス名”」という情報を付加することで、この「クラス名」がついているタグにだけ、デザインを反映することができます。
同じデザインを複数の場所に適用したいときに使います。

<p class="lead">重要な段落です</p>

.lead {
  font-weight: bold;
  font-size: 18px;
}

つまり「color_red」というクラス名に「color: red;」を指定しておけば、文字を赤くしたいときに都度「color_red」を使うことで、わかりやすい記述が可能になるのです。

• 特徴：再利用性が高い
• 複数の要素に共通スタイルを与えられる
• 間に半角スペースを入れることで、一つの要素に複数のクラスも指定可能（例：class="btn primary"）

3. IDセレクタ（#ID名）

1ページに一つだけの、特定の要素を装飾する場合に使います。

<h2 id="main-title">会社概要</h2>

#main-title {
  text-align: center;
  font-size: 24px;
}

クラスと異なり、IDは「#」を使って指定します。
IDの特徴は、ページ上に同名のIDは1度しか使えない代わりに、クラスより強い指定になるということです。

p {
  font-size: 20px;
}

pタグの文字サイズが20pxという指定があったとき

#font30px {
  font-size: 30px;
}

という指定が添えてあると、

<p id="font30px">テキスト情報</p>

このpタグは、フォントサイズを30pxで表示するわけです。

• 特徴：ページ内で唯一の要素に使う
• JavaScriptでもIDをよく使うので、CSSとJSの連携でも重要
• クラスより優先度が高い

応用セレクタにステップアップ！

セレクタにはもっと複雑で、有機的に使えるものがまだ存在します。
初心者段階ではまだ気にしなくて良いのですが、知っておくことで使い所に気付けることもあると思います。

4. 子孫セレクタ（半角スペース）

指定した要素の中にある子要素すべてにスタイルを適用します。

section > p {
  color: red;
}

この例では、<section>内の<p>だけが対象です。
実践の現場でも多く使われるため、覚えておきましょう。

5. 子セレクタ（>）

直下の子要素だけを対象にします。

section > p {
  color: red;
}

この場合

<section>
  <p>この文字は赤色です</p>
</section>

このpタグは文字色が赤になりますが

<section>
  <p>この文字は赤色ですが</p>
  <div>
    <p>この文字は赤色ではありません</p>
  </div>
</section>

このsectionの中のdivの、更に中にあるpは、赤色になりません。
段々パズルみたいになってきましたが、最初のpがタイトル、divの中のpが本文だとしたら、文字サイズや色の指定は、それぞれ別物にしたいですよね。

疑似クラス・疑似要素：状態や部分にスタイル

6. :hover：マウスをのせたとき

マウスカーソルを合わせたときにのみ、変化を与えることができます。

a:hover {
  color: orange;
}

ボタンにマウスカーソルを載せると、色が変わったりボタンが立体的に動くのは、このhoverを使って実装されています。
ここはクリックできる場所だ、と視覚的に明示するためにも便利な指定です。

9. :first-child / :last-child

指定した最初の要素、または最後の要素だけに変化を与えることができます。

li:first-child {
  font-weight: bold;
}

この場合、複数並んだリストの最初の項目だけにスタイルを適用させることができます。

まとめ

CSSセレクタは、Webページをデザインするための照準器のようなものです。

「どこをどう装飾したいのか」
その意図を正確にHTMLに伝えることで、思い通りのスタイルが実現できます。

最初は戸惑うかもしれませんが、セレクタを覚えることはCSS理解の核心です。今回紹介したセレクタを一つひとつ試しながら、自分のWebページに当てはめていくうちに、自然と感覚が掴めてくるでしょう。

これを理解しておくと、WEB制作業者に作ってもらったサイトの、このテーマカラーを新しく決めた色に変更したい、なんていうときに、自力で変更できたりするわけなのです。

CSSは奥の深い世界ですので、ゆっくりと勉強していきましょう！