4.1 タイプセレクター
CSSのセレクターは、スタイルを適用する要素を選択するために使用されるよ。基本的なセレクターには、 タイプセレクター、クラスセレクター、IDセレクター、ユニバーサルセレクターが含まれるんだ。これらのセレクターそれぞれに特定の特徴と用途があるよ。
タイプセレクター (Type Selectors)
タイプセレクターは特定のタグに対してスタイルを適用するよ。例えば、すべての段落
(<p>)や見出し (<h1>, <h2> など) または他のHTMLタグにスタイルを適用できるんだ。
tagname {
プロパティ: 値;
プロパティ: 値;
}
p {
color: blue;
font-size: 14px;
}
このセレクターはドキュメント内のすべての<p>タグに対してスタイルを適用するよ。
特徴:
- 指定されたタグのすべての要素に適用される
- 特定のタイプのすべての要素にグローバルなスタイルを適用するのに便利
4.2 クラスセレクター
クラスセレクターは、特定のクラスを持つ一つ以上の要素にスタイルを適用するよ。
クラスはHTML内のclass属性で定義され、CSSではドット (.) で示されるんだ。
構文:
.classname {
プロパティ: 値;
プロパティ: 値;
}
例:
.button {
background-color: green;
color: white;
padding: 10px;
}
このセレクターはクラスbuttonを持つすべての要素に対してスタイルを適用するよ。
特徴:
- 複数の要素に同じクラスを使うことができる
- 異なる要素に同じスタイルを簡単に適用できる
4.3 IDセレクター
IDセレクターはユニークなIDを持つ要素にスタイルを適用するよ。IDは HTML内のid属性で定義され、CSSではハッシュ記号 (#) で示されるんだ。
構文:
#uniq-id {
プロパティ: 値;
プロパティ: 値;
}
例:
このセレクターはIDmainを持つ要素にスタイルを適用するよ。
/* ID #mainを持つ要素を選択 */
#main {
width: 800px;
background: yellow;
}
<div id="main">この要素は幅800pxを持つ</div>
<div>この要素にはスタイルが適用されないよ。</div>
特徴:
- IDはページ上でユニークでなければならない
- 見出しやメインコンテンツなど、ユニークな要素のスタイリングに使用される
4.4 グループセレクター
グループセレクターを使うと、複数の要素に同じルールを適用することができるよ。これによりコードの量が減り、スタイル管理が簡単になるんだ。
構文:
セレクター, セレクター, … {
プロパティ: 値;
プロパティ: 値;
}
例:
/* すべてのh1, h2, h3要素を選択 */
h1,
h2,
h3 {
font-family: Arial, sans-serif;
}
<h1>見出し 1</h1>
<h2>見出し 2</h2>
<h3>見出し 3</h3>
<p>このテキストにはこのルールは適用されないよ。</p>
4.5 ユニバーサルセレクター
ユニバーサルセレクターはページ上のすべての要素にスタイルを適用するよ。これはアスタリスク (*) で示され、スタイルのリセットやすべての要素に共通スタイルを適用するのに役立つんだ。
構文:
* {
プロパティ: 値;
プロパティ: 値;
}
例:
このセレクターはページ上のすべての要素にスタイルを適用し、マージンをリセットしてボックスモデルを設定するんだ。
<div>段落 1</div>
<div>段落 2</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
特徴:
- ページ上のすべての要素に適用される
- スタイルのグローバルリセットや、すべての要素に基本スタイルを適用するのに便利
GO TO FULL VERSION