CSSには数百種類のプロパティがありますが、実務で頻繁に使うのはその中のごく一部です。
この記事では、Webサイトを作るなら「これだけは絶対に暗記しておきたい」という必須プロパティを、用途別に厳選してまとめました。
コードを書く時の「辞書代わり」に活用してください！
目次：用途別プロパティ
1. 文字・フォントを整える
テキストの見た目を調整する基本プロパティです。
| プロパティ | 意味 | よく使う値の例 |
|---|---|---|
| color | 文字の色 | #333333 (濃いグレー)red (色名)rgba(0,0,0,0.5) (半透明の黒) |
| font-size | 文字の大きさ | 16px (基本サイズ)2rem (ルート文字サイズの2倍)0.8em (親要素の0.8倍) |
| font-weight | 文字の太さ | bold (太字)normal (標準)700 (数値指定) |
| text-align | 行の揃え位置 | left (左寄せ・初期値)center (中央寄せ)right (右寄せ) |
| line-height | 行の高さ (行間) |
1.6 (文字サイズの1.6倍・おすすめ)2 (広め)1 (隙間なし) |
| font-family | フォントの種類 | sans-serif (ゴシック体)serif (明朝体)"Helvetica", Arial (具体的なフォント名) |
| text-decoration | 線の装飾 | none (下線を消す ※リンクによく使う)underline (下線を引く) |
2. 大きさと余白（ボックスモデル）
要素のサイズや、要素同士の距離を決める最重要エリアです。
| プロパティ | 意味 | よく使う値の例 |
|---|---|---|
| width | 横幅 | 100% (親いっぱい)300px (固定幅)auto (自動・初期値) |
| height | 高さ | 100vh (画面の高さ一杯)auto (中身に合わせて自動) |
| margin | 外側の余白 (要素間の距離) |
20px (上下左右に20px)0 auto (中央寄せ)10px 20px (上下10px、左右20px) |
| padding | 内側の余白 (枠と文字の間) |
20px (内側全体に20px)1em (1文字分空ける) |
| border | 枠線 | 1px solid #ccc (1pxの実線)none (枠線を消す) |
3. 色と背景
背景色や画像をコントロールします。
| プロパティ | 意味 | よく使う値の例 |
|---|---|---|
| background-color | 背景色 | #ffffff (白)transparent (透明) |
| background-image | 背景画像 | url('gazou.jpg')linear-gradient(...) (グラデーション) |
| background-size | 画像のサイズ | cover (枠いっぱいにトリミングして表示)contain (画像全体が見えるように収める) |
4. 配置とレイアウト
要素を並べたり、表示・非表示を切り替えたりします。
| プロパティ | 意味 | よく使う値の例 |
|---|---|---|
| display | 表示モード | block (縦に積む)flex (横並びにする)grid (マス目状にする)none (非表示にする) |
| flex-direction | 並ぶ向き (Flexbox用) |
row (横並び・初期値)column (縦並び ※スマホ対応で必須) |
| justify-content | 並び位置 (Flexbox用) |
center (中央寄せ)space-between (両端配置) |
| align-items | 垂直位置 (Flexbox用) |
center (上下中央)flex-start (上揃え) |
| gap | 要素間の隙間 | 20px (アイテムの間にだけ隙間を作る) |
5. 装飾・見た目
デザインをよりリッチにするためのプロパティです。
| プロパティ | 意味 | よく使う値の例 |
|---|---|---|
| border-radius | 角の丸み | 10px (少し丸く)50% (正円にする) |
| box-shadow | 影 | 0 4px 10px rgba(0,0,0,0.1)(横 縦 ぼかし 色) |
| opacity | 不透明度 | 1 (不透明・初期値)0.5 (半透明)0 (完全透明) |
| cursor | マウスカーソル | pointer (指の形 ※ボタンに必須)default (矢印) |
| object-fit | 画像の収まり方 (imgタグ用) |
cover (歪まずに枠を埋める)※背景画像のbackground-sizeと同じ役割 |
まとめ
いかがでしたか？
最初はこれらをすべて暗記しようとしなくて大丈夫です。
「文字を中央に寄せたいときは… text-align か justify-content だな」
「余白を取りたいときは… margin か padding だな」
という風に、あたりを付けられるようになれば脱・初心者です。
迷ったらまたこのページを見返してみてくださいね！