実務で役立つ!CSSのセレクタの種類と使い方【初心者向け】

初心者向けにCSSのセレクタの使い方を解説しています。セレクタを使うことでCSSのコーディングもスッキリ見えますし、作業の効率も上がるので、実際の業務に役立ちます。知識として覚えるというより少しずつ書き慣れていくような感覚で理解しておくと良いでしょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

CSSで書くセレクタの使い方について解説しています。

セレクタを使うことで作業効率も上がるので、すぐ覚えるのは難しいかもしれませんが、書いていくうちに慣れてくるはずです。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

田島悠介

今回はCSSを記述する上での基本、セレクタについて説明するよ。

大石ゆかり

田島メンター!!セレクタというのは何ですか〜?

田島悠介

スタイルを適用させる対象のことだよ。セレクタでは要素そのものを指定する他に、classやidなど色々な条件をつけることができるんだ。代表的なものを見てみよう。

大石ゆかり

了解です!

 

セレクタとは

セレクタとは、CSSのスタイルを指定する対象のことです。

HTMLタグであったり、クラス名やid名だったりと、用途に応じてセレクタは使い分ける必要があります。

 

セレクタの種類

セレクタの種類はたくさんあります。よく使うセレクタをセレクタのジャンルごとに紹介していきます。

全称セレクタ

・「*」

対象:すべての要素

使い方の例:

* { color: rgb(255, 0, 0); }

 

要素型セレクタ

・要素名

対象:対象の要素

使い方の例:

p { color: rgb(255, 0, 0); }
div { font-size: 12px; }

 

classセレクタ

・要素名.クラス名

対象:対象の要素で対象のクラスがついているもの

使い方の例:

p.red { color: rgb(255, 0, 0); }
p.blue { color: rgb(0, 0, 255); }

 

idセレクタ

・要素名#id名

対象:対象の要素で対象のidがついているもの

使い方の例:

div#red { color: rgb(255, 0, 0); }
div#green { color: rgb(255, 0, 0); }

 

擬似クラス

・要素名:link

対象:対象の要素でまだ閲覧していないリンク

使い方の例:

a:link { color: rgb(255, 0, 0); }

 

・要素名:visited

対象:対象の要素で閲覧済みのリンク

使い方の例:

a:visited { color: rgb(0, 0, 255); }

 

・要素名:hover

対象:対象の要素でマウスカーソルが要素の上にある場合

使い方の例:

a:hover { color: rgb(0, 255, 0); }

 

・要素名:focus

対象:対象の要素でフォーカスされている場合

使い方の例:

input:focus { background: rgb(255, 100, 100); }

 

・要素:first-child

対象:対象の要素内の最初の要素

使い方の例:

div:first-child { color: rgb(255, 0, 0); }

 

・要素:before

対象:対象の要素の直前

使い方の例:

div:before { content: "["; }

 

・要素:after

対象:対象の要素の直後

使い方の例:

div:after { content: "]"; }

 

属性セレクタ

・要素名[属性名]

対象:対象の要素の中で属性名の属性があるもの

使い方の例:

a[target] { color: rgb(255, 0, 0); }

 

・要素名[属性名=”属性値”]

対象:対象の要素の中で属性が属性値と一致するもの

使い方の例:

a[href="http://google.co.jp/"] { color: rgb(0, 0, 255); }

 

複数のセレクタ

・セレクタ1,セレクタ2

対象:複数のセレクタ

使い方の例:

h1, h2, h3, h4, h5, h6 { color: rgb(255, 0, 0); }

 

子孫セレクタ

・親セレクタ 子孫セレクタ

対象:親セレクタの下の階層にある子孫セレクタ

tr td { color: rgb(255, 0, 0); }

 

子セレクタ

・親セレクタ>子セレクタ

対象:対象のセレクタの直下の子セレクタ

div>strong { color: rgb(255, 0, 0); }

 

大石ゆかり

要素を指定するだけなら、その要素の名前を入れるだけでいいんですね。

田島悠介

classセレクタとidセレクタの書き方の違いを覚えておこう。擬似クラスもときどき使うことになるよ。

大石ゆかり

なるほど、分かりました!

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

実際に書いてみよう

それでは実際に書いてみましょう。htmlファイルを作成し、以下を記述します。

css部分
------------------------
div>strong {
  color: rgb(255, 0, 0);
}
table,th,td {
  border: 1px rgb(0,0,0) solid;
}
td.green {
  color: rgb(0, 255, 0);
}
td.blue {
  color: rgb(0, 0, 255);
}
------------------------
html部分
------------------------
<div>
  <strong>太郎</strong>
  <strong>二郎</strong>
  <strong>ジョン</strong>
  <strong>ニキータ</strong>
  <strong>三郎</strong>
</div>
<table id="table">
  <thead>
    <tr>
      <th>名前</th>
      <th>好きな食べ物</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="green">太郎</td>
      <td class="blue">きびだんご</td>
    </tr>
    <tr>
      <td class="green">二郎</td>
      <td class="blue">ラーメン</td>
    </tr>
    <tr>
      <td class="green">ジョン</td>
      <td class="blue">ドーナツ</td>
    </tr>
  </tbody>
</table>
------------------------

ブラウザでアクセスします。

 

まとめ

今回はよく使うセレクタをご紹介しましたが、この他にもセレクタはたくさんあります。実際に使ってみて状況に応じて使い分けられるようになりましょう。

加えて、Webデザイナーがどんな仕事を担当する人なのか、詳しく知りたい方はWebデザイナーとはの記事も合わせてご覧ください。

 

田島悠介

“color”や”border”は「プロパティ」と呼ばれるもので、何について設定するのかを決めるんだ。プロパティの後ろの”:”に続く部分は「値」で、具体的にどのような状態にするのかをここで指定するよ。

大石ゆかり

各セレクタ内でプロパティと値が設定されて、画面内のそれぞれの部分に反映されているんですね。

田島悠介

CSSは基本的に「セレクタ{プロパティ:値;}」という形で構成されているんだ。まずはこれを頭に入れておこう。

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルのWebサイトを開発することが可能です。

独学に限界を感じている場合はご検討ください。