LEARNING PATH / 6 STEPS
CSSの見た目とレイアウト入門
指定の当て方から、箱の幅、文字、動きの配慮まで。一度に全部変えず、一つずつ比較しよう。
- ゴール
- スタイルを当て、幅や文字サイズが変わる理由を作例で確かめられる。
- 読む前に
- HTMLの内容とCSSの見た目の役割が分かること。
- STEP 1
どこにスタイルを当てる？
CSSのclassとidは何が違う？二枚のカードで見た目を比べよう
同じclassで二枚の背景を変え、idで一枚だけに枠を付ける作例。ドットと#の書き分け、重複させないid、よくある間違いを前提から解説するよ。
- STEP 2
幅・余白・枠を分ける
widthが同じなのに幅が違う？box-sizingで余白と枠の計算を確かめよう
200pxの指定が248pxになる理由を、paddingとborderを動かして確認。content-boxとborder-boxの計算、はみ出すときの調べ方を紹介するよ。
- STEP 3
文字サイズの基準を知る
rem・em・pxはどう違う？文字サイズの基準を作例で確かめよう
入れ子の文字が大きくなるのはなぜ？remとemの基準の違いを、保存して試せるHTMLで確認するよ。
- STEP 4
画面に合わせてサイズを調整
CSSのclamp()で文字サイズを可変にする：最小・推奨・最大の決め方
見出しの文字サイズを画面幅に合わせるCSSの例。clamp()の計算と、狭い画面・ズーム時に確認する点を説明します。
- STEP 5
文字を広げても読めるか確認
行間や字間を広げると崩れる？読みやすさを保つレイアウトの確認手順
行間や字間を変えても文字が欠けない設計を、固定高さ・段落余白・折り返しの観点から整理。確認用CSSとチェック手順を用意したよ。
- STEP 6
動きを減らす設定に応える
動きを減らす設定に応えるCSS：prefers-reduced-motionを小さく試そう
アニメーションを常に再生せず、利用者の設定で動きを減らす。手動の比較とブラウザ設定の両方で確認できる作例を用意したよ。