プロパティ
初級読み方：プロパティ｜英語：Property
CSSで変更する項目の名前だよ。例：color, font-size, margin。
やさしい説明
プロパティとは、CSSで「何を変えるか」を指定する部分です。
CSSは「セレクタ { プロパティ: 値; } 」の形で書きます。プロパティは「変更したい項目」です。color なら文字色、font-size なら文字サイズを変えます。
プロパティは数百種類ありますが、よく使うのは20〜30個程度です。color、font-size、margin、padding、display、background あたりを覚えれば基本的なデザインは作れます。
具体例・使い方
h1 {
color: blue; /* 文字色 */
font-size: 2rem; /* 文字サイズ */
margin-bottom: 16px; /* 下の余白 */
background-color: #eee; /* 背景色 */
border-radius: 8px; /* 角丸 */
padding: 12px 24px; /* 内側の余白（上下 左右） */
}よく使うプロパティ一覧
- color — 文字色（例:
color: red;） - background-color / background — 背景色・背景画像
- font-size / font-weight — 文字サイズ・太さ
- margin / padding — 外側・内側の余白
- width / height — 幅・高さ
- display — 表示方法（flex / grid / block / none）
- border / border-radius — 枠線・角丸
- position — 配置方法（relative / absolute / fixed）
- transition — アニメーションの変化速度
最初からすべてを覚える必要はありません。「やりたいこと」から逆引きで調べる習慣をつけると自然に覚えられます。「文字を中央揃えにしたい → text-align: center」のように。
いつ使う？
CSSでデザインを変えるときは必ずプロパティを使います。「文字を大きくしたい」→ font-size、「色を変えたい」→ color、「余白を空けたい」→ margin/padding です。
間違いやすいポイント
❌ プロパティ名のスペルミス
backgroud-color（正しくは background-color）のようなタイポはスタイルが効かない原因になります。VSCode などのエディタの補完機能を活用しましょう。開発者ツール（F12）でスタイルに打ち消し線が引かれていたら、タイポを疑ってください。
/* ❌ スペルミス → スタイルが無視される */
h1 {
backgroud-color: blue; /* background-color の typo */
font-wieght: bold; /* font-weight の typo */
}
/* ✅ 正しい書き方 */
h1 {
background-color: blue;
font-weight: bold;
}❌ セミコロン ; を忘れる
プロパティの末尾に ; がないと、次の行以降のスタイルが全部無視されることがあります。複数のプロパティを書くときは特に注意しましょう。
よくある疑問
Q: プロパティは全部覚える必要がある？
A: よく使うものは20個程度です。color, font-size, margin, padding, display, width, height などを覚えれば基本はOKです。
Q: プロパティが効かないときは？
A: スペルミス、セミコロン忘れ、値の間違いが多いです。開発者ツールで打ち消し線や警告マークを確認しましょう。
Q: ショートハンドプロパティとは？
A: 複数のプロパティをまとめて書く方法です。例: margin: 10px 20px; は margin-top/bottom: 10px, margin-left/right: 20px の省略形です。
関連用語
📖 関連レッスン
レッスンを見る →