セレクタとプロパティ

CSSとは

CSS（Cascading Style Sheets）は、HTMLの見た目を装飾するための言語です。 色、サイズ、配置、アニメーションなど、Webページのビジュアルをすべてコントロールできます。

CSSの基本的な書き方は「セレクタ { プロパティ: 値; }」です。

基本のセレクタ

要素を選択する3つの基本的なセレクタがあります：

• 要素セレクタ - タグ名で選択（例: p, h1）
• クラスセレクタ - class属性で選択（例: .highlight）
• IDセレクタ - id属性で選択（例: #header）

結合子（コンビネータ）

セレクタを組み合わせて、より具体的に要素を選択できます：

• div p - 子孫セレクタ（div内のすべてのp）
• div > p - 子セレクタ（divの直接の子のp）
• h1 + p - 隣接兄弟セレクタ（h1の直後のp）
• h1 ~ p - 一般兄弟セレクタ（h1以降のすべてのp）

詳細度（Specificity）

複数のCSSルールが同じ要素に適用される場合、「詳細度」が高いルールが優先されます：

• 要素セレクタ（p） → 詳細度: 低
• クラスセレクタ（.text） → 詳細度: 中
• IDセレクタ（#main） → 詳細度: 高
• インラインスタイル → 詳細度: 最高

同じ詳細度の場合は、後に書かれたルールが優先されます（カスケード）。

まとめ

• 要素セレクタ（p）、クラスセレクタ（.class）、IDセレクタ（#id）が基本
• 結合子を使えば、親子・兄弟関係で要素を絞り込める
• 詳細度によって、どのスタイルが優先されるか決まる
• color、font-size、margin、padding がよく使うプロパティ