HTML模写は、Web制作の基礎を「実際のレイアウトを作りながら」身につける練習方法です。
この005では、アンカーナビのある1ページ構成を題材に、HTML構造とCSSレイアウトを練習します。
模写対象は、ヘッダーにAbout / Serviceのリンクがあり、画像と文章で構成されたセクション、Serviceの3つ並び、そしてページ下部にTOPへ戻る導線があるシンプルな1ページです。
このHTML模写で身につくこと
この課題では、次のスキルをまとめて身につけられます。
- 1ページ構成のHTML設計（header / main / section / footer）
- アンカーナビ（ページ内リンク）の基本
- 画像＋テキストの並び（Aboutセクション）
- 3カラム（Serviceカード）のレイアウト
- TOPへ戻る導線の作り方（まずはHTML、余力でJSも可）
模写の完成条件（合格ライン）
最低限、ここまでできたら完成です。
- ヘッダーにAbout / Serviceのナビがあり、クリックで該当セクションへ移動できる
- ヒーロー画像（またはそれに相当する大きなビジュアル）がある
- Aboutに「画像＋説明文」のまとまりがある
- Serviceが3つ並びで表示されている（PC）
- ページ下部にTOPへ戻る導線がある（リンクでOK）
加点（おすすめ）
- ナビクリック時の移動がスムーズ（CSSのscroll-behavior、またはJS）
- スマホ幅で3カラムが縦積みになり、崩れない
- 余白・文字サイズが整っていて読みやすい
HTML模写の進め方
1. まずHTMLだけで骨組みを作る
CSSを触る前に、構造だけを作ります。
- header：サイト名＋nav
- main：hero / about / service
- footer：コピーライト
- TOP導線：aタグで上部へ戻す
この段階では見た目は崩れていてOKです。意味のある構造を優先してください。
2. 次にレイアウトの核を作る（3つだけ）
この課題の核は「並び」と「余白」です。
- ヘッダー：ロゴとナビの横並び
- About：画像＋文章のまとまり（縦でも横でもOK）
- Service：3つ並び（flexまたはgrid）
まずはこの3点だけを先に整えると、一気に完成に近づきます。
3. 最後にTOP導線を仕上げる
TOPはまずリンクでOKです。
href="#top"のように、ページ上部にidを置いて戻す
余力があれば、スクロールボタンとして表示したり、スムーズスクロールにしたりすると「実務っぽさ」が上がります。
この005はJavaScript（スクロールボタン）に繋げやすい課題でもあります。
模写サンプルサイト
このページを模写してください。
模写サンプルサイト beginner005
見た目を完全一致させる必要はありません。
目的は 「アンカーナビ付き1ページ構成」と「3カラム」の再現です。
おすすめChrome拡張（模写効率UP）
模写を早く正確に進めるなら、次の拡張が便利です（使えるものだけでOKです）。
- GoFullPage：ページ全体スクショ
- ColorZilla：色抽出
- WhatFont：フォント確認
- PerfectPixel：重ねてズレ確認
模写の手順（迷わない進め方）
模写は手順が9割です。次の流れで進めてください。
- 全体をスクショして、箱（セクション）を四角で区切る
- class命名ルールを決める
- HTMLの基本構造を作る
- CSSでレイアウトを模写する
- 余力があればJavaScriptで動き（TOPボタンなど）を再現する
模写後チェックリスト
- navのリンクが動く（idとhrefが一致している）
- Serviceが3つ並びになっている（PC）
- スマホで横スクロールが出ない
- 余白がgap/paddingで整っている（margin連打になっていない）
まとめ
この005は、実務でも頻出の
- 1ページ構成
- ページ内リンク（アンカー）
- 3カラム
- TOP導線
をまとめて練習できる課題です。
まずはHTMLとCSSで完成させ、余力があればTOPボタンをJSで強化してみてください。