リファレンス

CSSプロパティ早見表

よく使う CSS プロパティを、用途べつに一覧にまとめました。「あのプロパティ何だっけ？」を、ここでサッと引けます。それぞれの見出しから、くわしく学べるレッスンにも飛べます。

色をつける

プロパティ	主な値	何をする
`color`	`red` / `#3399ff`	文字の色を指定する
`background-color`	`red` / `#3399ff`	要素の背景の色を指定する

プロパティ	主な値	何をする
`border`	`1px solid #333`	枠線をまとめて指定する
`border-radius`	`8px`	角のまるみをつける。数字が大きいほど大きくまるくなる
`box-shadow`	`2px 4px 6px #0003`	影をつけて立体感を出す

プロパティ	主な値	何をする
`width`	`300px` / `100%`	部品の幅を指定する
`height`	`300px` / `100%`	部品の高さを指定する
`margin`	`16px` / `auto`	枠の外のすき間をあける。部品どうしの間隔になる
`padding`	`16px`	枠の内のすき間をあける。中身と枠の間隔になる
`box-sizing`	`content-box` / `border-box`	paddingとborderをwidthに含めるかどうかを決める

プロパティ	主な値	何をする
`display`	`flex` / `grid` / `block` / `inline` / `none`	部品の表示形式を切り替える。flexなら横並び、gridなら格子状にできる
`justify-content`	`center` / `space-between` / `flex-start`	Flexboxの子を、横方向にどうそろえるか決める
`align-items`	`center` / `stretch` / `flex-start`	Flexboxの子を、縦方向にどうそろえるか決める
`gap`	`16px`	並んだ子どうしの間隔をあける
`grid-template-columns`	`1fr 1fr 1fr`	Gridで列の数と幅を決める

プロパティ	主な値	何をする
`position`	`relative` / `absolute` / `fixed` / `sticky` / `static`	部品の置き方を切り替える。ふつうの流れから外して配置できる
`top`	`0` / `10px`	positionを指定した部品を、上からどれだけずらすか決める
`right`	`0` / `10px`	positionを指定した部品を、右からどれだけずらすか決める
`bottom`	`0` / `10px`	positionを指定した部品を、下からどれだけずらすか決める
`left`	`0` / `10px`	positionを指定した部品を、左からどれだけずらすか決める

見た目や名前が似ていて迷いやすいものを、ペアで並べました。「基準」と「役割」で選ぶのがコツです。

margin

枠の外のすき間。部品と部品のあいだをあける

padding

枠の内のすき間。中身と枠のあいだをあける

content-box

初期値。widthは中身だけの幅で、paddingとborderは外側に足される

border-box

paddingとborderを含めた幅がwidthになる。指定どおりの大きさに揃う

relative

自分がもともといた位置を基準に、少しだけずらす

absolute

直近のrelativeな親を基準に、好きな場所へピタッと置く

flex

一列（横または縦）に並べるのが得意

grid

縦横きちんとそろった格子状に敷きつめるのが得意