QUIZPO OFFICIAL GUIDE
この問題集について
HTMLは見た目を作る言語ではなく、文書の意味と構造を伝えます。CSSはその構造を保ったまま見た目と配置を調整します。
18語を通じて、正しい要素選びからレスポンシブ表示、アクセシビリティまでを一つのWebページとして捉えます。
対象となる学習者
Web制作を始めたい人。HTMLとCSSの役割を基礎から整理したい人。
前提知識
ブラウザでWebページを閲覧した経験があれば十分です。
この問題集で学べること
- HTMLとCSSの担当を分けて説明できる
- 見出し・段落・リンク・画像を意味に沿って選べる
- ボックスモデルとFlexbox・Grid・メディアクエリの役割を整理できる
重要ポイント
意味をHTMLで表す
見出しには見出し要素、段落にはp要素、移動にはa要素を使います。見た目だけで要素を選ぶと、読み上げや検索エンジンへ構造が伝わりにくくなります。
ボックスは四層で考える
contentの外側にpadding、border、marginがあります。幅が予想と合わないときは、どの領域が加わっているかを確認します。
レイアウト手段を目的で選ぶ
Flexboxは主に一方向、Gridは行と列の二方向を扱います。メディアクエリは画面条件に応じた調整に使います。
間違えやすいポイント
- 文字を大きくするためだけにh1を複数使う
- 画像のaltへファイル名だけを書く
- 固定幅だけで組み、狭い画面の操作を確認しない
学習の進め方
- 意味のある小さなHTML文書を考える
- Quick Reviewで各要素とCSS概念を確認する
- 同じ内容をスマホ幅とPC幅で表示して違いを見る