今回は、Webページの見た目を設定するCSSのセレクターについてまとめました。
CSSは、Web開発をするにあたって欠かせない知識となっています。
ぜひ最後までお読みください！
【CSS】基本のまとめ | セレクター編
1. CSSとは
CSSとは、HTMLドキュメントのスタイル(文字・色・大きさ・余白など)を設定するために使用される言語のことです。
正式名称は「Cascading Style Sheets(カスケーディング・スタイル・シート)」といいます。
2. CSSの書き方
CSSでは、「どこの」「何を」「どうする」かを指定します。
例えば、以下のように記述します。
【例：style.css】
このコードでは、「h1要素の」「文字色を」「赤に変更」しています。
このコードのh1の部分を「セレクター」、colorの部分を「プロパティ」、 redの部分を「値」といいます。
例えば、以下のように記述します。
【例：style.css】
h1 {
color: red;
}このコードでは、「h1要素の」「文字色を」「赤に変更」しています。
このコードのh1の部分を「セレクター」、colorの部分を「プロパティ」、 redの部分を「値」といいます。
3. CSSセレクター
CSSセレクターは、スタイルを設定するHTML要素を「検索または選択」するために使用されます。
CSSセレクターには、以下のようなものがあります。
基本的なセレクター
・要素型セレクター
・クラスセレクター
・ID セレクター
・全称セレクター
・属性セレクター
グループ化セレクター
・セレクターリスト
結合子
・隣接兄弟セレクター
・一般兄弟セレクター
・子セレクター
・子孫セレクター
擬似クラス・要素
・擬似クラス
・擬似要素
1つずつ順番に見ていきましょう。
4. 基本的なセレクター
基本的なセレクターは、名前やID、クラスに基づいてHTML要素を選択します。
基本的なセレクターには、以下のようなものがあります。
4-1. 要素型セレクター
要素セレクターは、要素名に基づいてHTML要素を選択します。
構文と使用例は以下のとおりです。
【例：style.css】
構文と使用例は以下のとおりです。
【例：style.css】
/* 構文 */
要素名 {
プロパティ: 値;
}
/* 使用例 */
h1 {
color: red;
}
4-2. クラスセレクター
クラスセレクターは、特定のクラス属性を持つHTML要素を選択します。
構文と使用例は以下のとおりです。
【例：style.css】
構文と使用例は以下のとおりです。
【例：style.css】
/* 構文 */
.クラス名 {
プロパティ: 値;
}
/* 使用例 */
.test {
color: red;
}
4-3. ID セレクター
IDセレクターは、HTML要素のid 属性を使用して特定の要素を選択します。
構文と使用例は以下のとおりです。
【例：style.css】
構文と使用例は以下のとおりです。
【例：style.css】
/* 構文 */
#id名 {
プロパティ: 値;
}
/* 使用例 */
#sample {
color: red;
}
4-4. 全称セレクター
全称セレクターは、ページ上のすべてのHTML要素を選択します。
構文と使用例は以下のとおりです。
【例：style.css】
構文と使用例は以下のとおりです。
【例：style.css】
/* 構文 */
* {
プロパティ: 値;
}
/* 使用例 */
* {
color: red;
}
4-5. 属性セレクター
属性セレクターは、指定された属性の値に基づいてHTML要素を選択します。
構文と使用例は以下のとおりです。
【例：style.css】
構文と使用例は以下のとおりです。
【例：style.css】
/* 構文 */
要素名[属性名] {
プロパティ: 値;
}
/* 使用例: title属性を持つ<a>要素の文字色を変更する */
a[title] {
color: red;
}
5. グループ化セレクター
グループ化セレクターは、セレクターをカンマ(,)で区切って記述し、同じグループとしてHTML要素を扱います。
グループ化セレクターには、以下のようなものがあります。
5-1. セレクターリスト
セレクターリストは、一致するすべてのHTML要素を選択します。
構文と使用例は以下のとおりです。
【例：style.css】
構文と使用例は以下のとおりです。
【例：style.css】
/* 構文 */
要素名,要素名 {
プロパティ: 値;
}
/* 使用例 */
h1, p {
color: red;
}
6. 結合子
結合子は、複数のセレクタを結合子で組み合わせることで、HTML要素の構造に応じた要素の選択をおこないます。
結合子には、以下のようなものがあります。
6-1. 隣接兄弟セレクター
隣接兄弟セレクターは、2つのセレクターを接続し、「2つ目の要素が1つ目の要素の直後にあって」、「両者が同じ親要素の子同士である」HTML要素を選択します。
構文と使用例は以下のとおりです。
【例：style.css】
構文と使用例は以下のとおりです。
【例：style.css】
/* 構文 */
直前の要素名 + 対象の要素名 {
プロパティ: 値;
}
/* 使用例: h1の直後に来るp要素の文字色を変更する */
h1 + p {
color: red;
}
6-2. 一般兄弟セレクター
一般兄弟セレクターは、2つのセレクターを接続し、「1つ目の要素の後に2つ目の要素があり(直後である必要はない)」、かつ「両者が同じ親要素の子である」すべてHTML要素を選択します。
構文と使用例は以下のとおりです。
【例：style.css】
構文と使用例は以下のとおりです。
【例：style.css】
/* 構文 */
先行する要素 ~ 選択される要素 {
プロパティ: 値;
}
/* 使用例: h1と兄弟でh1より後にあるすべてのp要素の文字色を変更する */
h1 ~ p {
color: red;
}
6-3. 子セレクター
子セレクターは、2つ目のセレクターが1つ目のセレクターの直接の子要素であるHTML要素を選択します。
構文と使用例は以下のとおりです。
【例：style.css】
構文と使用例は以下のとおりです。
【例：style.css】
/* 構文 */
セレクター1 > セレクター2 {
プロパティ: 値;
}
/* 使用例 */
div > span {
color: red;
}
6-4. 子孫セレクター
子孫セレクターは、2つのCSSセレクターを結合し、1つ目のセレクターに一致する要素が祖先 (親、親の親など)となっている2つ目のセレクターに一致するHTML要素を選択します。
構文と使用例は以下のとおりです。
【例：style.css】
構文と使用例は以下のとおりです。
【例：style.css】
/* 構文 */
セレクター1 セレクター2 {
プロパティ: 値;
}
/* 使用例 */
li li {
color: red;
}
7. 擬似クラス・要素
擬似クラス・要素は、以下のような特徴があります。
・疑似クラス：ユーザーの操作やブラウザに保存されている情報などを、ページに記述されたHTML以外の情報に基づいて要素を選択する
・疑似要素：HTML要素の特定の部分の要素を選択する
7-1. 擬似クラス
擬似クラスは、セレクターに付加するキーワードであり、指定された要素の状態に基づいてHTML要素を選択します。
構文と使用例は以下のとおりです。
【例：style.css】
構文と使用例は以下のとおりです。
【例：style.css】
/* 構文 */
要素名: 状態名 {
プロパティ: 値;
}
/* 使用例: マウスカーソルが要素の上に乗っているときに文字色を変更する */
.test: hover {
color: red;
}
7-2. 擬似要素
擬似要素は、セレクターに付加するキーワードで、HTML要素の「特定の部分のみ」を選択します。
構文と使用例は以下のとおりです。
【例：style.css】
構文と使用例は以下のとおりです。
【例：style.css】
/* 構文 */
要素名: 擬似要素名 {
プロパティ: 値;
}
/* 使用例 */
.test:: before {
color: red;
}
8. おわりに
今回は、Webページの見た目を設定するCSSについて解説しました。
CSSは、Web開発をするにあたって欠かせない知識です。
「もっとCSSについて知りたい！」という方は、ぜひ参考記事を読んだり、ご自身で調べてみたりしてください。