セレクター入門
CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 10/76。
CSSにおいて、セレクタは、スタイルを適用したいHTML要素を選択するために使用されるパターンです。これらはCSSルールの重要な部分であり、どの要素にスタイルを適用するかを決定します。
セレクターにはさまざまな種類があり、それぞれが異なる方法で要素をターゲットにします。セレクターを理解することは、CSSを習得し、適切にスタイリングされたウェブページを作成するための基本です。
セレクターを使用した基本的なCSSルールの例を次に示します：
selector {
property: value;
}selector: スタイルを適用するHTML要素を指定します。property: 変更したいスタイル属性（例：color、font-size）。value: 属性に設定したい値（例：blue、16px）。
例えば：
p {
color: blue;
font-size: 16px;
}この例では、pはセレクターであり、すべての段落要素を対象としています。宣言によって、すべての段落のテキストの色が青に、フォントサイズが16ピクセルに設定されます。
チャレンジ
簡単HTMLドキュメントが与えられます。内部CSSを使用して、次のプロパティでドキュメントをスタイリングしてください：
- すべての
h1見出しの背景色をgreenに設定します。 - すべての
h1見出しのテキストの色をwhiteに設定します。 - すべての段落（
p）のフォントサイズを18pxに設定します。
そのためのスターターCSSコードが用意されています。
チートシート
CSSのセレクターは、スタイルを適用したいHTML要素を選択するために使用されるパターンです。これらは、どの要素にスタイルが適用されるかを決定します。
基本的なCSSルールの構造：
selector {
property: value;
}selector: スタイルを適用するHTML要素をターゲットにしますproperty: 変更したいスタイル属性（例：color、font-size）value: 属性に設定したい値（例：blue、16px）
すべての段落要素をターゲットにする例：
p {
color: blue;
font-size: 16px;
}自分で試してみよう
<!DOCTYPE html>
<html>
<head>
<title>Selectors</title>
<style>
h1 {
}
p {
}
</style>
</head>
<body>
<h1>John Doe</h1>
<p>Web Developer</p>
</body>
</html>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
