CSSの構文
CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 2/76。
CSSにおいて、構文（シンタックス）とは、CSSコードをどのように記述すべきかを定義する一連のルールのことを指します。CSSの構文を理解することは、適切に構造化された機能的なスタイルシートを作成するために不可欠です。基本的なCSSルールは、セレクタと宣言ブロックで構成されます。
簡単な内訳は以下の通りです：
- セレクタ：スタイルを適用したいHTML要素（例：p、div、img）を指定します。
- 宣言ブロック：波括弧
{}で囲まれた1つ以上の宣言が含まれます。
- 宣言：プロパティと値で構成され、コロン
:で区切られます（例：color:green;）。各宣言はセミコロン（;）で終了する必要があります。
- プロパティ：変更したいスタイル属性（例：color, font-size）。
- 値：プロパティに設定したい値（例：blue, 16px）。
例えば：
p {
color: blue;
font-size: 16px;
}この例では、p はセレクターであり、すべての段落要素を対象としています。宣言ブロックには2つの宣言が含まれています。1つはテキストの色を青に設定し、もう1つはフォントサイズを16ピクセルに設定するものです。
チャレンジ
簡単段落要素と、その段落に対するCSSルールが含まれたHTMLコードが与えられています。テキストの色を red に変更するように、CSSルールを修正してください。
チートシート
CSSの構文は、セレクタと宣言ブロックで構成されます：
- セレクタ: スタイルを適用するHTML要素を指定します（例：p, div, img）
- 宣言ブロック: 波括弧
{}で囲まれた宣言が含まれます - 宣言: コロン
:で区切られたプロパティと値で、セミコロン;で終わります - プロパティ: 変更するスタイル属性です（例：color, font-size）
- 値: プロパティに設定する値です（例：blue, 16px）
p {
color: blue;
font-size: 16px;
}自分で試してみよう
<html>
<head>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
