CSSセレクタとは?使い方と書き方解説

この記事のまとめ

Webページでは、CSSと呼ばれる設定方法(言語)を使って、実に様々なレイアウトや色を表現しています。 これらの設定には、「どの部分どのようにスタイル(デザイン)するのか」の2つの情報が必要で、この内どの部分を指定するのがこの記事で解説する「CSSセレクタ」と呼ばれるものです。

沢山ありすぎて、初心者はどれから使っていけばいいのか?これらをどのように使いこなせば、Webページが作られていくのか、イメージが付きづらいと思います。

そこで本記事では、プログラマのアキ(@hackablejp )がCSSセレクタの基本的な使い方から、それを使ってどのようにWebページを作ればいいのかまで解説します♪

CSSセレクタとは?

CSSセレクタとは、CSSでスタイルを設定する時の「どの部分を」を指定する時の書き方のことです。

例えば、htmlには文章の段落をを表す<p>というタグがあります(pはparagraphの略)。この<p>だけをピンポイントで指定して文字色を変えたい場合、下記のように書くことで<p>のみのスタイルを変えることが出来ます。

p {
  color: gray;
}

この「p」と書いている部分が「セレクタ」と言います。

このpのように、要素のタグ名を指定する書き方を「要素型セレクタ」と言います。他にも、「全称セレクタ」「classセレクタ」「idセレクタ」など様々な書き方があります。

MEMO

CSSのセレクタ以外の部分を解説します。

CSSは左図のように「セレクタ」「プロパティ」「」の3つの部分で構成されています。

CSSセレクタ理解の予備知識

CSSセレクタを理解する前に、HTMLの事について少し復習しましょう!HTMLについて知っていると、この後の話が理解しやすくなりますよ!

HTMLは、「開始タグ」と「終了タグ」があって、この1つのまとまりを「要素」と言います。

HTMLでは、この「開始タグ」と「終了タグ」の中に別のタグが入れ子の構造で入っています。

このような構造の場合、<div>タグは<p>タグの親要素<p>タグは<div>タグの子要素と言います。

この基本を覚えておいてください!

必ず覚えておきたいセレクタ3選

ここでは、CSSを使うにあたって、必ず覚えておきたい基本セレクタを3つ紹介します。

必ず覚えておきたい基本セレクタを3つ
  • タグ名セレクタ(要素型セレクタ): HTMLのタグ名で指定するセレクタ
    Webページ全体で使うデフォルトのスタイルなどでつかわれます。
  • classセレクタ: class名で指定するセレクタで、一番使用頻度が高い
    HTMLのタグにclass属性を使ってセレクタを指定します。一番のメリットは、Webページ内でタグの種類に縛られず、何回でも使うことが出来る点です。
  • idセレクタ: id名で指定するセレクタで、一番使用頻度が少ない
    ページ中1箇所の要素しかつかえません。基本はclassセレクタを使うようにしましょう。

タグ名セレクタ(要素型セレクタ)

HTMLタグ名を指定することで、スタイルの変更範囲を指定します。

上記の例のように、HTMLとCSSをした時は<p>のスタイルのみ変更されます。<span>タグには適用されません。

classセレクタ

先頭に.(ドット)をつけて「.クラス名」のように書くことで、好きなクラスに対してスタイルを指定できます。

MEMO

classとは、簡単に言うとHTMLで「1つのまとまりに付けた名前」の事です。同じ名前付の方法に、下記で紹介する idもありますが、idはWebページ中で1回しか使用できないのに対し、classは何度でも使用できます。

現在では、スタイルをidを使って行うことはほとんどありません。可能な限りclassを使うようにしましょう。

クラス名を付けた要素は、全てそのスタイルが適用されます。

idセレクタ

先頭に#(シャープ)を付けて「#ID名」のように書くことで、そのIDを付けた要素のスタイルを指定できます。

覚えておくと便利なセレクタ

ここから応用編となります。

前章の3種類のセレクタを駆使することで、一応スタイルは出来るのですが、沢山のセレクタを使って複雑な設定をしなくていはいけません。

それでは、非効率なので1つのセレクタで複数の要素を選択出来るCSSセレクタを使えるようになりましょう!

HTML上のすべての要素を指定

*(アスタリスク)を使うと、すべての要素を指定することが出来ます。このセレクタは「ユニバーサルセレクタ」と言います。

HTMLの記述やタグの種類に関係なく、すべて同じスタイルを適用できます。

ブラウザ表示時のパフォーマンス低下が要因になるため、可能な限り使わないようがいいと言われています。しかし、ユニバーサルセレクタが1つぐらいだと、体感出来るほど遅くはなりません。使いすぎに注意するぐらいなので大丈夫です。

ユニバーサルセレクタは、box-sizingと組み合わせてよく使われます。box-sizingを使ったメリットは、別のサイトを見てください。

子孫セレクタで絞り込み(半角スペース区切り)

セレクタとセレクタの間に半角スペースを入れると、親要素の中のすべての子要素にスタイルが適用されます。

この場合だと、<p>タグに囲まれた<span>タグが対象になります。

子セレクタで絞り込み(>区切り)

先程の半角スペース区切りだと、子や孫も含めてすべてがスタイルの対象になってしまいますが、>を使うと1つ下の階層である子要素のみを対象とすることが出来ます。

このように、.example直下のspanのみにスタイルが適用されます。 更に、>を続けて「子要素の子要素」みたいな感じで指定する事もできますよ。

同じ階層のすぐ後の要素を指定(+区切り)

+で区切ると、同じ階層のすぐ後の要素を選択していスタイルを適用出来ます。

同じ階層の後に並ぶ要素をすべて指定(~区切り)

~で区切ると、同じ階層の後に並ぶすべての要素を選択してスタイルを適用できます。

CSSから◯番目の要素を狙い撃ちして指定(:first-child、:last-child、etc…)

これまでは、HTML上のclassなどを使って、後の要素、後からすべて、子要素など、HTMLのタグにスタイルを適用する場所を予め仕込んでいないと適用出来ませんでした。

子要素の最初要素、奇数の要素、偶数の要素、最初以外の要素などは、これまでの指定方法ではスマートに実現する方法はありません

しかし、ここで解説する内容を使えば、このようなスタイル指定が簡単に出来ますよ!

解説する内容は下記です。

CSSから狙い撃ち出来るセレクタ指定方法
  • :first-child: 最初の要素を指定

    :first-childは、兄弟要素の中で最初の要素のみを指定することができます

  • :last-child: 最後の要素を指定
    :first-childとは逆に、:last-childは兄弟要素の中で最後の要素のみを指定することができます
  • :nth-child(odd): 奇数の要素を指定
    1つの親要素の中での出現する要素で、奇数の要素のみを対象としてスタイルを適用します
  • :nth-child(even): 偶数の要素を指定
    1つの親要素の中での出現する要素で、偶数の要素のみを対象としてスタイルを適用します
  • :nth-child(3n): 3の倍数の要素を指定
    1つの親要素の中での出現する要素で、3の倍数の要素のみを対象としてスタイルを適用します
  • :first-letter: 最初の1文字だけを適用
    文章中の最初の1文字だけにスタイルを適用します

:first-childで最初の要素のみ指定する

兄弟要素の中での最初の要素のみを指定することが出来ます。例えば、<li>のリスト内で初めの要素にのみスタイル上書きするといった場合に使います。

:last-childで最後の要素のみ指定する

兄弟要素の中での最後の要素のみを指定することが出来ます。例えば、<li>のリスト内で最後の要素にのみスタイル上書きするといった場合に使います。

:nth-child(odd)で奇数の要素を指定

兄弟要素の中で奇数の要素のみを指定することができます。例えば、<li>のリスト内で見やすいように色を交互に変更するといった場合に使います。

:nth-child(even)で偶数の要素を指定

兄弟要素の中で偶数の要素のみを指定することができます。例えば、<li>のリスト内で見やすいように色を交互に変更するといった場合に使います。

:nth-child(3n)で3の倍数の要素を指定

兄弟要素の中で、3の倍数の要素を指定することができます。

また、:nth-child(3n+1)のようにすると、3の倍数に1足した番目の要素を指定することもできます。

:first-letterで文章の最初の1文字を指定

文章の最初の1文字を指定するには、:first-letterを使います。新聞やニュースなどで、最初の読み始める場所がわかるように、文字の大きさが色が変わっているのを見たことがあるかと思います。

Webページ上でも、CSSを使って同じようにデザインすることが出来ます。

毎回CSSスタイルの事について調べるのは辛くありませんか?

CSSには沢山の種類があります。HTMLと組み合わせると、デザインのコーディングは非常に多くのやり方があり、常に最新の情報を追っていくのは、上級者でも大変です。

特に初心者の場合、どの情報が最新なのかわからず、知らない内に今では使えない古い知識を使っていたなんて事も多くなるのでは無いでしょうか?

そんな時、まずは最新のWeb動向や調べ方、知識を一定水準まで仕入れる事ができ、更にこの知識は古いものだから別のものを探そうと判断出来るようになりたくはないですか?

CodeCamp Webマスターコース」では、最新のHTML5とCSS3を使って授業を受けながら、わからないところは「個別指導」時にわからないところや疑問点を経験豊富なエンジニアに聞くことが出来ます!

CodeCampで学ぶと得られるメリットは下記の3つ

CodeCampで得られるメリットは沢山あるのですが、その中でも主要な3つを紹介します!

CodeCampで学ぶと得られるメリット
  • 時間・場所は選ばない: オンラインなので、仕事や学業と両立可能
    毎日朝7時〜夜24時まで時間や場所を選ばずに学習出来ます。また、365日・世界中のどこでも受講が可能です!もちろん、地方の方もOK!
  • 個別指導が受けられる: 課題の提出・添削は無制限
    自分が出来るようになるまで、課題の提出・添削は無制限で受けられます
  • 受講者数 No.1※ : オンラインプログラミングレッスンNo.1、満足度94.6%※
    実践的なテクニックや質の高いフィードバックのあるおかげで、高い満足度があります!
  • ※日経トレンディ別冊調べ:調査日 2016年10月31日
  • ※満足度:会員向け、レッスン評価アンケートの集計結果より(2018年10月-12月期)

更に、CodeCampは無料体験レッスンも実施しており、「良い方が担当者さんだった!」と、多くの口コミも広がっています!

気になる方は、下記をクリックして無料体験レッスンを受けられるので、申し込んでみてください!

最後に口コミのまとめ