CSS

CSSセレクターの書き方【まずは覚えたい3つの基本形】

どうも、つよぽんです!

今回はCSSセレクターの書き方の解説となります。

CSSセレクターの書き方はたくさんありますが、まずは基本形となる3つの書き方をこの記事で説明していくので一緒に覚えていきましょう。

今回の記事は次のような方に向けて書きました。

想定読者
  • CSSの学習を始めたばかりの方
  • CSSのセレクターとは何か知りたい方

今回の記事は以下の学習コンテンツ記事内のスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
CSSの基本セレクター3つを理解するCSSでスタイルを定義する際に使用するセレクター。指定できるセレクターの種類はいろいろありますが、その中でも基本となる3つのセレクターを解説します。CSSセレクターの基本形を学習していきましょう。...

今回の内容は以下のとおりです。

今回の内容
  • CSSのセレクターとは
  • CSSセレクターの書き方

 

CSSのセレクターとは

CSSのセレクターとは、HTMLで書かれた要素のうち「どの要素のスタイルを変更するか選択」するものになります。

下の画像はCSSのスタイル定義を行うときのとなります。

CSSの書き方CSSの書き方

CSSのスタイル定義の型の中で、上の赤枠で囲んだ部分がセレクターと呼ばれる部分になります。

上の画像では「セレクターリスト」と書かれていますが、CSSの1つのスタイル定義に対して複数のセレクターをセットすることもできるため、その場合はセレクターのリストをセットすることになります。

それでは、このセレクター部分にどんな値が入るのか次の項目で1つずつ見ていきましょう。

CSSセレクターの書き方

CSSのセレクターにセットできる値はたくさんありますが、冒頭でも話したように、この記事では基本的なセレクター3つを紹介します。

その基本となる3つのセレクターは次のとおりです。

3つ基本セレクター
  1. 要素型セレクター
  2. クラス型セレクター
  3. IDセレクター

上記3つのセレクターは、CSSの学習をしている中で一番良く見かけます。また、学習初期段階でも自分で書く機会がたくさん出てくるので是非抑えておきましょう。

それではそれぞれ1つずつ説明します。

要素型セレクター

要素型セレクターは、HTMLの要素(タグ名)を使うセレクターです。

次の画像では右下の部分にCSSのスタイル定義をしています

要素型セレクター要素型セレクター

CSSのスタイル定義のうち赤枠内をみると「h1」「p」が使われているのが確認できます。

上の画像内のコードが読みづらい場合は以下のリンクから直接コードを確認することもできます。

codepen : 要素型セレクターのサンプル

h1をセレクターとして使ったスタイル定義は「color: red;」とセットしているので、h1タグの出力結果を見ると文字が赤色になっているのがわかります。

pをセレクターとしている方も同様に、スタイル定義の値に従って背景色が(#00ff00)となっています。

クラスセレクター

クラスセレクターは、各要素内のclass属性の値を使います。

クラスセレクターを使うときは、クラス属性の値の前に「ドット(“.”)」をつけてセットします。

次の画像の右下のCSS定義を見てください。(画像をクリックすると新しいタブで拡大して確認することが出来ます。)

クラスセレクタークラスセレクター

CSSの中で赤枠で囲まれているセレクターを見ると「.title」「.bg-yellow」のように、クラス値の先頭に「.」がついているのがわかるかと思います。

上の画像内のコードが読みづらい場合は以下のリンクから直接コードを確認することもできます。

codepen : クラスセレクターのサンプル

クラスセレクターを使うことによって、異なる要素でも同じスタイルを反映されることが出来ます。

上の画像では「h1要素」「p要素」のclass属性の値に「bg-yellow」をセットしています。

それによって、「h1要素」「p要素」の異なる要素で同じスタイルを反映することが出来ています。(どちらも背景色を黄色になっている。)

IDセレクター

IDセレクターは、各要素内のID属性の値を使います。

IDセレクターを使うときは、ID属性の値の前に「シャープ(“#”)」をつけてセットします。

次の画像の右下のCSS定義を見てください。(画像をクリックすると新しいタブで拡大して確認することが出来ます。)

IDセレクターIDセレクター

CSSの中で赤枠で囲まれているセレクターを見ると「#special」のように、クラス値の先頭に「#」がついているのがわかるかと思います。(オレンジ枠はクラスセレクターになります。)

上の画像内のコードが読みづらい場合は以下のリンクから直接コードを確認することもできます。

codepen : IDセレクターのサンプル

ID属性の値はWebページの中で重複して使うことが出来ない値なので、特定の1つの要素に対してだけスタイルを反映させたいときに利用します。

また、CSSのセレクターには優先度があり、IDセレクターを使ってスタイル定義を行った場合は、「要素型セレクター」「クラス型セレクター」よりスタイル反映の優先度が高くなります。

CSSの優先度については以下の学習コンテンツでも解説しているので、そちらを参考にしていただけたらと思います。

あわせて読みたい
CSSの継承と優先度を理解するCSSのスタイル定義では「継承」「優先度」「詳細度」という概念があります。特定の要素が複数のスタイル定義に一致する場合に、どのスタイルが反映されるかは、この継承・優先度・詳細度によって変わります。...

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  • CSSのセレクターにセットできる値はたくさんある
  • CSSでよく見かける記述する基本的なセレクターは「要素型セレクター」「クラスセレクター」「IDセレクター」の3つ

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
CSSの基本セレクター3つを理解するCSSでスタイルを定義する際に使用するセレクター。指定できるセレクターの種類はいろいろありますが、その中でも基本となる3つのセレクターを解説します。CSSセレクターの基本形を学習していきましょう。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です