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