2021/2/18 「HTML&CSS辞典」をオープンしました! 是非、ご覧になってください!

[初心者向け!] CSSセレクタとは? よく使用するセレクタも紹介します!

CSSセレクタやよく使用するセレクタを知りたい人

CSSセレクタやよく使用するセレクタを知りたいな!

この記事は上記のような疑問を解消するものとなっています。

セレクタ」を利用することで、どの要素に対してデザインを適用させるのかを指定できます。

セレクタ」はh1タグ、pタグなどの要素名以外にも様々な種類があります。

そこで、この記事では「セレクタとは?」、「よく使用するセレクタ」についてお話していきたいと思います。

気になる方は是非最後まで読んで頂ければと思います。

1.セレクタとは?

セレクタとは?

デザインをどの要素に適用させるかを指定するためにセレクタが利用されます。

よく使用されるセレクタにタイプセレクタ、ユニバーサルセレクタ、クラスセレクタ、IDセレクタなどがあります。

※タイプセレクタ、ユニバーサルセレクタ、クラスセレクタ、IDセレクタは「2.よく使用するセレクタ」で解説します。

これだけだと少し分かりづらいと思いますので、詳しくみていきましょう。

セレクタ」は以下のような部分を示しています。

セレクタ {

 プロパティ: プロパティ値;

}

各部分の名称と説明
  • セレクタ:どの要素に適用させるのか
  • プロパティ:どのように適用させるのか
  • プロパティ値:どのくらい適用させるのか




2.よく使用するセレクタ

それではよく使用するセレクタをみていきましょう。

よく使用するセレクタ一覧
  • タイプセレクタ
  • ユニバーサルセレクタ
  • クラスセレクタ
  • IDセレクタ

タイプセレクタ

タイプセレクタとは?

要素名を利用して指定するセレクタをタイプセレクタと呼びます。

タイプセレクタの例

それではタイプセレクタの例をみていきましょう。

下記の例はh1要素の文字を赤色にしています。

HTML
CSS
ブラウザ

ユニバーサルセレクタ

ユニバーサルセレクタとは?

すべての要素に適用させるセレクタをユニバーサルセレクタと呼びます。

要素名の部分を「*」で指定するとすべての要素に適用されます。

ユニバーサルセレクタの例

それではユニバーサルセレクタの例をみていきましょう。

下記の例は「*」ですべての要素の文字を赤色にしています。

HTML
CSS
ブラウザ

クラスセレクタ

クラスセレクタとは?

class属性に値が指定されている要素を適用させるセレクタをクラスセレクタと呼びます。

クラスセレクタの書き方

クラスセレクタを利用する場合、「要素名」または「*」を記述して、「.(ピリオド)」に続けてclass属性の値を追加すればOKです。

class属性の値は複数の値を指定できますが、指定された複数の値のどれか1つが一致すればCSSが適用されます。

※「*」の直後にclass属性の値が続く場合、「*」を省略することができます。

クラスセレクタの例

それではクラスセレクタの例をみていきましょう。

下記の例はclass属性titleの文字を赤色にしています。

HTML
CSS
ブラウザ

 

IDセレクタ

IDセレクタとは?

id属性に値が指定されている要素を適用させるセレクタをidセレクタと呼びます。

idセレクタの書き方

idセレクタを利用する場合、「要素名」または「*」を記述して、「#」に続けてclass属性の値を追加すればOKです。

id属性はclass属性とは違い、複数の値を指定できないことは注意して下さい。

※「#」の直後にid属性の値が続く場合、「#」を省略することができます。

IDセレクタの例

それではIDセレクタの例をみていきましょう。

下記の例はid属性titleの文字を赤色にしています。

HTML
CSS
ブラウザ




3.まとめ

最後まで読んで頂きまして、ありがとうございました。

CSSのセレクタをしっかりと理解しておくことはとても重要なことです。

途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

以下のような本を一冊もっておくと何か分からないことがあったら便利です。(kindle unlimitedに会員登録をすると無料で読むことができるのでオススメです。)

以下の本はより実践的な内容になっているので、もっとHTML&CSSを学びたい方は取り組んでみることをオススメします。

他にもHTML&CSSを学ぶことができる教材を知りたい方は以下の記事もご覧になってください。

[初心者・中級者向け] HTML & CSS を学ぶことができるおすすめの本 [必見!] Udemy(ユーデミー) おすすめのHTML/CSS講座

コメントを残す

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