CSSスキル - 第7章 Lesson1

セレクタについて

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

CSSのセレクタの基礎の部分を、初心者向けに解説しています。
ここでは、超基本のセレクタ「タイプセレクタ」と、「全称セレクタ」について学びます。



この動画で学べること

・セレクタの種類について



セレクタの基礎知識

セレクタを書くことによって、スタイルをかけたい要素を選び出す(セレクト)することができます。
セレクタの種類には40種類以上ありますが、全てを覚える必要はないので、みなさんはよく使うものを覚えるようにしましょう。
よく使うセレクタには以下のようなものがあります。

・タイプセレクタ
・全称セレクタ



まずはタイプセレクタの書き方を練習ファイルを使って、見ていきましょう。
例えば、HTMLファイルの<h1>タグにスタイルをかけたい場合、スタイルシートではセレクタ部分にh1と書きます。
このように、タイプセレクタを使うと、指定したタグにCSSをかけることができます。



h1{
color: red;
}



次に全称セレクタを見てみましょう。
これは「全称」つまり、すべてのセレクタに対してスタイルをかけるもので、書き方は 「*(アスタリスク)」です。


*{
color: gray;
}



保存してブラウザで見てみましょう。
すべての要素にグレーの文字色を指定しましたが、h1やh2など、タイプセレクタで色を指定している所の文字は灰色になっていません。
つまり、全称セレクタよりもタイプセレクタの方が優先して適応されるということです。
これからのコーディングでとても大事な考え方になるので、覚えておいてください。