CSS 構文
1. CSS の構文 (Syntax)
CSS のルールセット (Rule-set) は、セレクター (Selector) と宣言ブロック (Declaration block) で構成されています。
1.1 セレクターと宣言の役割
- セレクター: スタイルを適用したい HTML 要素を指し示します。
- 宣言ブロック: 1 つ以上の宣言を中括弧
{ }で囲んだものです。 - 宣言 (Declaration): プロパティ (Property) 名と値 (Value) がペアになっており、コロン : で区切られます。
- セミコロン (
;): 複数の宣言がある場合、各宣言の末尾にセミコロンを記述して区切ります。
2. 具体的な CSS の例
以下の例では、すべての <p> 要素が中央揃えになり、文字色が赤色に設定されます。
p {
color: red;
text-align: center;
}2.1 コードの構成要素
pは CSS のセレクターです（スタイルを適用する対象が<p>要素であることを示します）。colorはプロパティ、redはその値です。text-alignはプロパティ、centerはその値です。
3. セレクターの基本
セレクターは、スタイルを適用する HTML 要素を選択するために使用されます。
CSS セレクターは、以下の 5 つのカテゴリーに分類できます。
- シンプルセレクター: 名前、ID、クラスに基づいて要素を選択します。
- コンビネーターセレクター: 要素間の特定の関係に基づいて要素を選択します。
- 疑似クラスセレクター (Pseudo-class selectors): 特定の状態（マウスオーバー時など）に基づいて要素を選択します。
- 疑似要素セレクター (Pseudo-elements selectors): 要素の特定の部分（最初の文字や行など）を選択してスタイルを適用します。
- 属性セレクター (Attribute selectors): 属性や属性値に基づいて要素を選択します。
4. 宣言ブロックのルール
宣言ブロックには、1 つ以上の宣言を含めることができます。コードの可読性を高めるために、1 行に 1 つの宣言を記述するのが一般的なベストプラクティスです。
p {
color: red;
text-align: center;
font-size: 16px;
}4.1 注意点
- プロパティと値の間のコロン
:を忘れないようにしてください。 - 宣言の末尾のセミコロン
;を忘れると、それ以降のスタイルが適用されない原因になります。 - 宣言全体を必ず中括弧
{ }で囲みます。
5. CSS の書き方のコツ
CSS を記述する際、ブラウザは余分な空白（ホワイトスペース）を無視します。そのため、自分が読みやすいようにスペースやインデント（字下げ）を調整して問題ありません。
以下のように 1 行で記述することも可能ですが、メンテナンス性を考慮すると推奨されません。
/* 動作はしますが、読みづらい例 */
p {color:red;text-align:center;}プロフェッショナルな開発現場では、チームのコーディング規約に従い、一貫性のあるフォーマットで記述することが求められます。これにより、複雑なプロジェクトでもコードの品質を維持することが可能になります。