STEP 1
CSSのきほん
CSSは「どの要素を(セレクタ)・何を(プロパティ)・どうする(値)」で書きます。例: h1 { color: red; }
セレクタ
スタイルを当てる相手。h1(タグ)、.box(クラス)などで指定。
プロパティ
変える項目。color(文字色)、font-size(文字サイズ)など。
値
どうするか。red、18px、center など。
宣言の形
プロパティ: 値; をセレクタの { } の中に並べます。行末の ; を忘れずに。
よく使うプロパティ
| プロパティ | 変わるもの | 値の例 |
|---|---|---|
| color | 文字の色 | #4263eb / crimson |
| background | 背景 | #edf0fe / white |
| font-size | 文字の大きさ | 18px / 2rem |
| text-align | 行揃え | center / left |
| padding | 内側の余白 | 16px / 8px 20px |
| border-radius | 角の丸み | 12px / 999px |
STEP 2
変えてみる(ライブエディタ)
HTMLは下の通り固定です。CSSを書き替えると、右のカードの見た目が変わります。プロパティを追加ボタンも使ってみましょう。
対象のHTML(クリックで表示)
🎨 色をえらんで挿入
カーソルの位置に色コードが入ります。color: や background: の後ろに入れてみましょう。
CSS を書く
表示(プレビュー)
STEP 3
CSSクイズ
目的にあうプロパティ・値を選びましょう。全8問です。
PLUS
CSSのコツ
1. 構造と見た目を分ける
HTMLに直接色を書かず、CSSにまとめる。後から一括で変えやすい。
2. まず色と余白から
color・background・paddingの3つだけでも印象は大きく変わる。
3. 単位を意識
px(絶対)とrem/%(相対)。本文はremが拡大に強くおすすめ。
4. セミコロンを忘れない
宣言の終わりは ;。抜けると次の行まで効かないことがある。
CSSの合言葉:
① だれを(セレクタ)・なにを(プロパティ)・どう(値)
② 構造(HTML)と見た目(CSS)は分ける
③ 色・余白から整える
—— HTMLの骨組みに、CSSで「らしさ」を着せていきましょう。