CSSでデザインを変更するためには、
まず「ルールセット（CSSの基本構文）」を理解する必要があります。
CSSはすべて セレクタ（selector）・プロパティ（property）・値（value） の組み合わせで書かれます。
セレクタ {
プロパティ: 値;
}
この記事では、この最も基本となるルールセットの意味と使い方を、初心者向けに分かりやすく解説します。
CSSルールセットとは？
CSSは「どの要素に」「どんな見た目を与えるか」を指定するための言語です。
そのため、スタイルの指定は以下の構文で行います。
セレクタ {
プロパティ: 値;
}
例
p {
color: #333;
font-size: 16px;
}
意味：
- p（段落）に対して
- 文字色＝#333
- 文字サイズ＝16px
というスタイルを適用しています。
セレクタ（selector）とは？
セレクタとは 「どのHTML要素にCSSを適用するか」 を指定する部分です。
よく使うセレクタ
| セレクタ | 適用対象 |
|---|---|
| p | すべての <p> |
| h1 | すべての <h1> |
| .title | class=”title” を持つ要素 |
| #main | id=”main” を持つ要素 |
| a:hover | カーソルが乗ったリンク |
HTMLとセットで理解すると分かりやすいです。
HTML → CSS の流れ
<p class="lead">文章です</p>
.lead {
color: #333;
}
→ class=”lead” の段落にだけ色がつく。
プロパティ（property）とは？
プロパティとは 「どんな見た目を変えるのか」 を指定する項目です。
例：
- color（文字色）
- background（背景）
- font-size（文字サイズ）
- margin（外側の余白）
- padding（内側の余白）
- border（枠線）
- display（表示形式）
- width / height（サイズ）
例
h1 {
color: #E64A19;
}
値（value）とは？
値とは プロパティに設定する具体的な内容 のことです。
例：
| プロパティ | 値 | 説明 |
|---|---|---|
| color | #333 | 文字色 |
| font-size | 16px | 文字サイズ |
| margin | 20px | 余白 |
| display | block | 表示方法 |
例：
p {
font-size: 18px;
line-height: 1.7;
}
CSSの基本構造の全体像（図解で理解）
以下がルールセットの全体です。
セレクタ { ← どの要素に
プロパティ: 値; ← 何をどうするか
プロパティ: 値;
}
例：
.card {
background: #fff;
border-radius: 8px;
padding: 20px;
}
ルールセットの書き方のポイント
1. 改行とインデントを統一する
読みやすさの基本です。
.good {
color: #000;
margin: 20px;
}
.bad {color:#000;margin:20px;}
2. プロパティは「;」で区切る
最後にも「;」を書く習慣をつけるとミスが減ります。
p {
font-size: 16px;
color: #333;
}
3. 同じセレクタに対してまとめて書く
NG例：
p { color: red; }
p { font-size: 16px; }
OK例：
p {
color: red;
font-size: 16px;
}
実践例：HTMLとCSSのセットで理解する
HTML
<h2 class="section-title">見出しタイトル</h2>
CSS
.section-title {
font-size: 22px;
font-weight: bold;
color: #E64A19;
}
→ class=”section-title” の見出しだけデザインが変わる。
よくある間違いと注意点
プロパティ名のスペルミス
例：background-coler → 正しくは background-color
: と ; の忘れ
CSSが効かない最も多い原因です。
セレクタを正しく指定していない
例：
.title（クラス）を
title と書いてしまう
まとめ
CSSはすべて
セレクタ（対象）
プロパティ（何を）
値（どうするか）
の組み合わせで書かれています。
これが理解できれば、ほぼすべてのCSSの仕組みが理解できるようになります。
著者からのひと言
CSSの基本構造が理解できると、どのプロパティも読み解けるようになります。
焦らず「セレクタ → プロパティ → 値」の流れで覚えていきましょう。
次回は「CSSの優先順位と継承の仕組み」についてです。
