このページは、HTMLとCSSの基礎を身につけるための
ヘッダーレイアウト専用のHTML模写課題です。
ヘッダーは、すべてのWebサイトで必ず使われる重要なパーツですが、
- ロゴとナビの上下が揃わない
- 余白が不自然になる
- スマホで崩れる
といった悩みが非常に多い部分でもあります。
この課題では、そうした「ヘッダーで詰まる原因」を
構造から正しく理解しながら模写することを目的にしています。
このHTML模写で身につくこと
この課題で練習できるポイントは次の通りです。
- header / nav の基本構造
- ロゴとナビの横並びレイアウト
- 上下中央揃えの考え方
- ナビ項目の間隔設計
- スマホ幅で崩れないヘッダー構造
実務でもそのまま使える「崩れないヘッダー設計」が身につきます。
模写の完成条件
以下を満たせば、この課題は完成です。
- ヘッダーにサイト名（またはロゴ）がある
- ナビゲーションが横並びで配置されている
- ロゴとナビの上下位置が揃っている
- 画面幅を変えても致命的に崩れない
加点ポイント：
- ナビリンクにhover時の変化がある
- クリックしやすい余白が確保されている
- class名が役割ベースで命名されている
HTML模写の進め方
1. HTMLだけで骨組みを作る
最初にCSSを書かず、構造だけを作ります。
- header
- a（ロゴ）
- nav
- ul / li / a
この段階では、見た目は一切気にしなくてOKです。
2. ロゴとナビを横並びにする
次にCSSで
- ロゴとナビを横並び
- ナビ項目を横並び
- 上下中央揃え
の3点だけを先に作ります。
ここで flexbox を使うと、非常に安定します。
3. 余白とホバーで仕上げる
最後に
- headerのpadding
- ナビ項目のgap
- hover時の色や下線
を整えると、実務レベルのヘッダーになります。
よくあるつまずき
- ロゴとナビの高さが揃わない
→ 子要素をいじり過ぎず、親要素で中央揃えを作る - ナビの間隔がバラバラ
→ margin連打ではなくgapで揃える - スマホで横スクロールが出る
→ 固定幅指定が残っていないか確認
模写サンプル
こちらのページを模写してください。
模写サンプルサイト elementary001
見た目を完全一致させる必要はありません。
目的は ヘッダー構造とレイアウトの再現です。
模写後のチェックリスト
- header / nav の構造は自然か
- ロゴとナビの上下位置は揃っているか
- 余白はpadding設計になっているか
- スマホ幅で崩れていないか
まとめ
ヘッダーは、Web制作で最初に身につけるべき重要パーツです。
このHTML模写課題を通して、
- 崩れないヘッダー構造
- レイアウト設計の考え方
- CSSの使い分け
をぜひ体に覚えさせてください。
よくある質問（FAQ）
Q. ヘッダーナビゲーションの基本構造は？
header要素の中にロゴ（aタグ＋img）とnav要素を配置し、nav内にul/liでメニュー項目を並べます。Flexboxでロゴとナビを横並びにし、justify-content: space-betweenで両端に配置するのが一般的です。fixedヘッダーにする場合はposition: fixed、スクロール時に固定するならposition: stickyを使用します。
Q. レスポンシブ対応のナビゲーションの作り方は？
PC表示ではFlexboxで横並びメニューを表示し、モバイル表示ではメディアクエリでハンバーガーメニューに切り替えます。ナビメニューはモバイル時にdisplay: noneで非表示にし、ハンバーガーボタンのクリックでJavaScriptのclassList.toggle()を使いCSSクラスを追加してdisplay: blockに切り替えます。
