CSS構文
CSSルールの基本構造
CSSスタイルは一連のルールセットで構成され、それぞれにセレクターと宣言ブロックが含まれます。ブラウザはこれらのルールを解析し、HTMLドキュメント内の対応する要素に適用します。
基本的な構文構造は以下の通りです：
セレクター {
プロパティ1: 値1;
プロパティ2: 値2;
/* さらに宣言を続ける... */
}
構成要素の解説
セレクター: セレクターはCSSの核心で、スタイルを適用したいHTML要素を「選択」するために使用します。HTMLタグ名、クラス名、ID名、またはより複雑なセレクターの組み合わせることができます。
宣言ブロック: 波括弧{}で囲まれ、1つ以上の宣言を含みます。
宣言: プロパティと値で構成され、英語のコロン:で区切られ、各宣言は英語のセミコロン;で終わります。
:で区切られ、各宣言はセミコロン;で終わります。セミコロンは忘れやすいですが、1つでも欠けると後続のスタイルが適用されなくなることがあります——すべての行にセミコロンを追加する癖をつけましょう。
プロパティ: プロパティはCSSの特定の機能で、要素のスタイルを定義するために使用します。各プロパティには変更するスタイルのタイプを説明する名前があり、color、border、font-sizeなどがあります。
値: プロパティの具体的な視覚効果を定義し、単位付きの数値またはキーワードで構成されます。
完全な例
サンプル
<style>
h1 {
color: blue;
font-size: 24px;
text-align: center;
}
</style>
<h1>見出し1</h1>
このルールの意味：ページ上のすべての<h1>要素を選択し、テキストの色を青に、フォントサイズを24ピクセルに、テキストを中央揃えにします。
CSSコメント
/* */を使用し、HTMLの<!-- -->とは異なります。コメントはコードセクションをマークするのに役立ち、チーム開発で特に便利です。
CSSコメントは/* コメント内容 */という構文を使用します。ブラウザはコメント内容を解析しません。CSSにはこの1種類のコメントスタイルしかなく、単一行でも複数行でも、すべて/* */の間に記述します。
サンプル
<style>
/* これは単一行コメントです */
/*
これは複数行
コメントです
*/
p {
color: red; /* 宣言の後に書くこともできます */
}
</style>
<p>これは段落のサンプルです。</p>
コメントは開発に非常に便利で、特定のスタイルが何をするかを説明したり、デバッグのために一時的にスタイルを「無効化」したりすることができます。
構文の注意点
1. セミコロンは区切り文字
すべての宣言は英語のセミコロン;で終わり、ブラウザに宣言が完了したことを伝えます。最後の宣言の後のセミコロンは省略できますが、一貫性を保ち、後で新しいスタイルを追加しやすくするために追加することをお勧めします。
サンプル
<style>
/* ✅ 推奨：すべての宣言にセミコロン */
h1 {
color: red;
font-size: 20px;
}
/* ❌ 非推奨：セミコロンを見落としやすい */
h2 {
color: blue
font-size: 18px /* これはエラーになります */
}
</style>
<h1>見出し1</h1>
<h2>見出し2</h2>
<span class="demo-blue">青いテキスト</span>
2. プロパティ名と値の間のコロン
コロンは英語のコロン:でなければなりません。プロパティ名とコロンの間にスペースがあっても問題ありませんが、一貫したスタイルを保つことをお勧めします。
3. 引用符の使用
一部のプロパティ値（フォント名など）にスペースが含まれる場合は、引用符で囲む必要があります：
サンプル
<style>
p {
font-family: "Microsoft YaHei", "宋体", sans-serif;
}
</style>
<p>これは段落のサンプルです。</p>
4. 大文字・小文字の区別
CSSのプロパティ名と値はほとんどの場合大文字・小文字を区別しませんが、慣例として小文字が使用されます。唯一の例外は、一部の値（フォント名、URLパスなど）が元の大文字・小文字を保持する必要がある場合です。
サンプル
<style>
/* ✅ 推奨：一貫した小文字 */
p {
color: red;
}
/* 🔄 大文字でも動作しますが、非推奨 */
P {
COLOR: RED;
}
</style>
<p>これは段落のサンプルです。</p>
<p>サンプルコンテンツ</p>
よくある構文エラー
初心者がCSSを書くときによく犯す以下のミスに注意してください：
| エラー | 正しい書き方 |
|---|---|
color: redにセミコロンがない |
color: red; |
中国語のコロンを使用color：red |
英語のコロンを使用color: red |
| 波括弧が一致しない | {と}がペアになっていることを確認 |
| プロパティ名のスペルミス | プロパティ名が正しいことを確認（例：backgroundはbackgoundではない） |
❓ よくある質問
📖 まとめ
- CSS構文は実は非常にシンプル：セレクターが要素を選択し、宣言ブロックにプロパティと値が含まれる
- この基本構造をマスターすれば、すべてのCSSルールを読み書きできる
- 覚えておこう：各宣言はセミコロンで終わり、プロパティ名と値はコロンで区切り、コメントは
/* */で囲む
📝 演習
- HTMLファイルを作成し、
<style>タグを使用してh1要素に赤いテキストと28pxのフォントサイズ、p要素に青いテキストと16pxのフォントサイズを設定してください。 - スタイルコードにコメントを追加し、各スタイルが何をするか説明してください。
- 意図的に1つの宣言を間違って書き（例：
colorの代わりにcolourと書く）、ブラウザでページを開き、開発者ツールのスタイルパネルに何が表示されるか確認してください。