値
初級読み方：あたい｜英語：Value
プロパティに設定する具体的な内容だよ。例：red, 16px, center。
やさしい説明
値（あたい）とは、CSSプロパティに設定する具体的な内容です。「何をどう変えるか」の「どう」の部分です。
例えば color: red; の「red」が値です。同じプロパティでも値を変えれば結果が変わります。color: blue なら青、color: green なら緑です。
値の書き方はプロパティによって違います。色なら red や #ff0000、サイズなら 16px や 1.5rem、キーワードなら center や bold などです。
具体例・使い方
/* 色の値の書き方いろいろ */
color: red; /* キーワード（CSS定義済みの色名） */
color: #ff0000; /* 16進数（#RRGGBB） */
color: #f00; /* 短縮形（#RGB） */
color: rgb(255, 0, 0); /* RGB関数 */
color: rgba(255, 0, 0, 0.5); /* 透明度付きRGB */
color: hsl(0, 100%, 50%); /* 色相・彩度・明度 */
/* サイズの値の書き方いろいろ */
font-size: 16px; /* ピクセル（絶対値） */
font-size: 1rem; /* rem（ルート要素の文字サイズ基準） */
font-size: 1.5em; /* em（親要素の文字サイズ基準） */
width: 100%; /* パーセント（親要素に対する割合） */
width: 50vw; /* ビューポート幅の50% */値の種類
- キーワード —
red、center、bold、flexなど、CSSが定義済みの単語 - 長さ・サイズ —
16px、1rem、50%など、単位付きの数値 - 色 —
#ff0000、rgb()、hsl()など - 文字列 —
content: "→"など、引用符で囲む - 関数 —
calc(100% - 32px)、var(--color)、min(400px, 100%)など
px・rem・%の使い分け
- px — 固定値。要素を特定のサイズに固定したいとき（border幅など）
- rem — ルート要素（html）の文字サイズ基準。フォントサイズや余白に使うとアクセシビリティが高まる
- % — 親要素に対する割合。幅をフレキシブルにしたいときに使う
- vw / vh — ビューポートの幅・高さに対する割合。画面いっぱいのセクションなどに使う
フォントサイズには rem を使うのがおすすめです。ユーザーがブラウザのフォントサイズを変更した場合に正しくスケールするため、アクセシビリティが向上します。
いつ使う？
CSSを書くときは必ずプロパティとセットで値を指定します。「見出しを青くしたい」なら color: blue、「余白を広げたい」なら margin: 32px のように書きます。適切な値の種類（px・rem・%など）を選ぶことがきれいなレイアウトの鍵です。
間違いやすいポイント
❌ 数値に単位をつけ忘れる
CSSでは 0 以外の数値には単位が必要です。単位なしの数値は line-height など一部プロパティを除いて無効になります。
/* ❌ 単位がない（効かない） */
font-size: 16;
margin: 8;
/* ✅ 単位をつける */
font-size: 16px;
margin: 8px;
/* ✅ 例外: 0は単位なしでOK */
margin: 0;❌ 色名のスペルを間違える
キーワードの色名（gray など）はスペルミスしても警告が出ません。意図した色にならない場合は16進数（#cccccc）を使うと確実です。
よくある疑問
Q: px と rem の違いは？
A: px は固定サイズ、rem はルート要素のフォントサイズを基準にした相対サイズです。レスポンシブデザインではremが便利です。
Q: 色の指定方法は？
A: 色名（red）、16進数（#ff0000）、RGB（rgb(255,0,0)）、HSL（hsl(0,100%,50%)）などがあります。16進数が最もよく使われます。
Q: 単位を書き忘れるとどうなる？
A: 値が無効になりスタイルが適用されません。font-size: 16 は効きませんが font-size: 16px は効きます。0だけは例外で単位不要です。
関連用語
📖 関連レッスン
レッスンを見る →