プロパティ
初級読み方：プロパティ｜英語：Property
CSSで変更する項目の名前だよ。例：color, font-size, margin。いつ使う？ 文字の色を変えたい→color、文字の大きさを変えたい→font-size、余白を調整したい→marginのように、「何を変えるか」を指定するときに使うよ。間違いやすいポイント: プロパティ名のスペルミスに注意。例えばbackground-colorをbackground-colourと書くと効かないよ。また、プロパティの後にはコロン(:)、値の後にはセミコロン(;)を忘れずに。
やさしい説明
プロパティとは、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; /* 角丸 */
}いつ使う？
CSSでデザインを変えるときは必ずプロパティを使います。「文字を大きくしたい」→ font-size、「色を変えたい」→ color、「余白を空けたい」→ margin/padding です。
間違いやすいポイント
❌ プロパティ名のスペルミス
backgroud-color（正しくは background-color）のようなタイポはスタイルが効かない原因になります。エディタの補完機能を活用しましょう。
❌ セミコロン ; を忘れる
プロパティの末尾に ; がないと、次の行以降のスタイルが全部無視されることがあります。
よくある疑問
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 の省略形です。
関連用語
📖 関連レッスン
レッスンを見る →