モデリングでHTMLを学ぶ｜気に入ったサイトのコピーから始めるコーディング練習

はじめに
1. モデリングとは
- 1.1 モデリング（模写コーディング）とは
- 1.2 モデリングで身につく力
2. モデルサイトを選ぶ
- 2.1 最初に選ぶサイトの基準
3. HTMLファイルを取得する
- 3.1 ソースコードを表示する
- 3.2 フォルダとindex.htmlファイルを作成する
4. CSSとJavaScriptのファイルを取得する
- 4.1 HTMLの中のリンクを確認する
- 4.2 ファイルの階層をそのまま再現する
5. 画像をダウンロードする
- 5.1 Image Downloaderブラウザ拡張機能を使う
- 5.2 画像ファイルの格納場所を揃える
6. ローカルで表示確認する
- 6.1 index.htmlをブラウザで開く
- 6.2 表示が崩れている場合の確認ポイント
7. GitHubにアップロードしてバージョン管理する
8. モデルサイトを自分のサイトに作り変える
9. 変更のたびにGitでコミットする習慣をつける
- 9.1 小さな変更でもコミットする
- 9.2 コミットを積み重ねる意味
まとめ

はじめに

プログラミング学習を始めたばかりの頃、「HTMLとCSSを学んだけど実際に何を作ればいいかわからない」という壁にぶつかる方は多いと思います。私が最初に取り組んだのがモデリングです。気に入ったWebサイトのコードを手元に持ってきて、自分のサイトに作り変えていく練習方法です。

教材のサンプルコードではなく実際に公開されているサイトのコードを扱うため、HTMLとCSSの構造がリアルに体感できます。この記事では私が実際に行ったモデリングの手順を一から解説します。

⚠️ 著作権について最初に必ず確認してください： モデリングはあくまでローカル環境での学習目的のみに限った練習方法です。コピーしたコード・画像・文章には著作権があります。絶対にサーバーにアップロードして公開してはいけません。この点だけは必ず守ってください。

1. モデリングとは

1.1 モデリング（模写コーディング）とは

モデリングとは既存のWebサイトを手元に再現し、そのコードを読んで理解しながら自分のサイトに作り変えていく練習方法のことです。美術の世界で名画を模写して技術を学ぶのと同じ考え方です。

教材のサンプルコードで学ぶ	モデリングで学ぶ
簡略化されたコード	実際に動いているリアルなコード
学習用に整理された構造	実務に近い複雑な構造
想定された範囲しか学べない	想定外の書き方に多く出会える
受け身の学習になりやすい	能動的に読み解く力がつく

1.2 モデリングで身につく力

HTMLの文書構造を読む力
CSSのクラス設計・命名規則の感覚
ファイルの階層構造の理解
「このデザインはどのコードで実現されているか」を逆引きする力

2. モデルサイトを選ぶ

2.1 最初に選ぶサイトの基準

モデルにするサイトは以下の基準で選ぶと学習効率が上がります。

基準	理由
デザインが気に入っている	作業モチベーションが上がる
ページ構成がシンプル	1ページ完結のサイトが最初は適切
過度にJavaScriptに依存していない	最初はHTMLとCSSに集中する
自分が作りたいサイトのジャンルに近い	実用的な学習になる

💡 ポートフォリオサイトやランディングページが最適です： 構成がシンプルで1ページに多くのHTML・CSSの技術が詰まっています。最初のモデリングにはちょうどいい難易度です。

3. HTMLファイルを取得する

3.1 ソースコードを表示する

モデルにしたいサイトをブラウザで開き、ページ上で右クリックします。表示されるメニューの中から**「ページのソースを表示」**をクリックします。

右クリック → ページのソースを表示
（ショートカット：Ctrl + U ）

HTMLのソースコードが別タブで表示されます。Ctrl + Aで全選択し、Ctrl + Cでコピーします。

3.2 フォルダとindex.htmlファイルを作成する

デスクトップに作業用フォルダを作成します。フォルダ名はサイト名など管理しやすい名前にしましょう。

デスクトップ/
  └── my-portfolio/        ← 作業フォルダ

フォルダの中に index.html という名前のファイルを作成して、コピーしたHTMLのソースコードをそのまま貼り付けて保存します。

VSCodeを使う場合の手順：

VSCodeを開きます。
**「ファイル」→「フォルダーを開く」**で作業フォルダを選択します。
左サイドバーのフォルダ名の右にある「新しいファイル」アイコンをクリックします。
ファイル名を index.html として作成します。
コピーしたソースコードを貼り付けて保存します。

4. CSSとJavaScriptのファイルを取得する

4.1 HTMLの中のリンクを確認する

HTMLのソースコードの中を見ると、CSSとJavaScriptのファイルへの参照が記述されています。

CSSファイルへのリンク例：

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="assets/css/main.css">

JavaScriptファイルへのリンク例：

<script src="js/main.js"></script>
<script src="assets/javascript/app.js"></script>

4.2 ファイルの階層をそのまま再現する

HTMLに書かれているパス（ファイルの場所の指定）をそのままの階層構造で再現することが重要です。

たとえば href="css/style.css" と書かれていれば、作業フォルダの中に css フォルダを作り、その中に style.css を置く必要があります。

my-portfolio/
  ├── index.html
  ├── css/
  │   └── style.css        ← href="css/style.css" に対応
  ├── js/
  │   └── main.js          ← src="js/main.js" に対応
  └── images/
      └── hero.jpg         ← src="images/hero.jpg" に対応

💡 ファイルの取得方法： CSSやJavaScriptのURLをブラウザのアドレスバーに直接入力するとファイルの中身が表示されます。それをコピーして同じファイル名で保存しましょう。または、ブラウザの開発者ツール（F12）の「Sources」タブから各ファイルを確認することもできます。

⚠️ パスの階層が違うと表示が崩れます： href="css/style.css" と書かれているのに style.css を index.html と同じ場所に置いてしまうとCSSが読み込まれずデザインが崩れます。HTMLのコードに書かれている階層を必ず確認して揃えてください。

5. 画像をダウンロードする

5.1 Image Downloaderブラウザ拡張機能を使う

画像を1枚ずつ保存するのは手間がかかります。**「Image downloader – Imageye」**というブラウザ拡張機能を使うとページ内の画像をまとめてダウンロードできます。

インストール手順（Google Chromeの場合）：

Chrome ウェブストアで「Image downloader Imageye」を検索します。
「Chromeに追加」をクリックしてインストールします。
モデルサイトを開いた状態でツールバーのアイコンをクリックします。
ページ内の画像一覧が表示されるので必要な画像を選択してダウンロードします。

5.2 画像ファイルの格納場所を揃える

HTMLのコードの中で画像がどのように参照されているかを確認して、同じ階層に画像ファイルを格納します。

<!-- HTMLのコードでの画像参照例 -->
<img src="images/hero.jpg" alt="ヒーロー画像">
<img src="img/profile.png" alt="プロフィール画像">

上記の例なら images フォルダと img フォルダをそれぞれ作り、対応する画像ファイルを入れます。

💡 フォルダ名の確認を忘れずに： サイトによって images・img・assets/images などフォルダ名が異なります。HTMLのコードに書かれているパスをそのまま真似することが最重要です。

6. ローカルで表示確認する

6.1 index.htmlをブラウザで開く

ファイルの準備ができたら実際にブラウザで表示を確認します。

確認手順：

作業フォルダの中の index.html をダブルクリックします。
既定のブラウザが開いてサイトが表示されます。
元のサイトと同じように表示されているか確認します。

アドレスバーが file:///Users/yourname/Desktop/my-portfolio/index.html のような形式になっていればローカルで正しく開けています。

6.2 表示が崩れている場合の確認ポイント

症状	確認すること
デザインがまったく適用されていない	CSSファイルのパスが正しいか確認する
画像が表示されない（×マークになる）	画像ファイルのパスとフォルダ名を確認する
一部の装飾だけ崩れている	外部フォントやCDNリンクがある場合は正常。ネット接続を確認する
JavaScriptの動きがおかしい	JSファイルのパスを確認する

💡 ブラウザの開発者ツールでエラーを確認しましょう： F12キーで開発者ツールを開き「Console」タブを見るとどのファイルが読み込めていないかエラーメッセージで確認できます。

7. GitHubにアップロードしてバージョン管理する

7.1 GitHubにリポジトリを作成する

github.com にアクセスしてサインインします。
右上の「＋」→「New repository」をクリックします。
Repository nameに作業フォルダ名を入力します（例：my-portfolio）。
「Private」を必ず選択します（著作権のあるコードを含むため公開しないこと）。
「Create repository」をクリックします。

⚠️ 必ずPrivateリポジトリにしてください： モデリングで取得したコード・画像・文章には著作権があります。Publicリポジトリにすると誰でも見られる状態になってしまいます。必ずPrivateを選択してください。

7.2 VSCodeからGitHubにアップロードする

VSCodeのターミナルを開いて以下のコマンドを順番に実行します。

# Gitの初期設定（初回のみ）
git config --global user.name "Your Name"
git config --global user.email "your@email.com"

# 作業フォルダに移動
cd ~/Desktop/my-portfolio

# Gitリポジトリを初期化
git init

# すべてのファイルをステージングに追加
git add .

# 最初のコミットを作成
git commit -m "first commit"

# GitHubのリポジトリと連携
git remote add origin https://github.com/yourusername/my-portfolio.git

# GitHubにプッシュ
git push -u origin main

7.3 VSCodeでバージョン管理を設定する

VSCodeの左サイドバーにある**ソース管理アイコン（ブランチのマーク）**をクリックするとGUIでGitの操作ができます。

ファイルを変更した後の基本的な操作：

操作	VSCodeでの手順
変更をステージング	変更ファイルの横の「＋」をクリック
コミットメッセージを入力	上部のテキストボックスに入力
コミットする	チェックマークをクリック
GitHubにプッシュ	「…」→「プッシュ」をクリック

💡 コミットメッセージは変更内容がわかる言葉で書きましょう： 「update」や「fix」だけでは後から何を変えたかわかりません。「ヘッダーの背景色を変更」「プロフィール画像を差し替え」のように具体的に書く習慣をつけると、後から変更履歴を見返す時に役立ちます。

8. モデルサイトを自分のサイトに作り変える

8.1 作り変えの進め方

ローカルで正しく表示されることが確認できたら、いよいよ自分のサイトへの作り変えを始めます。一度にたくさん変えようとせずひとつ変えたら確認するを繰り返しましょう。

おすすめの作り変えの順序：

順序	作業内容	難易度
1	テキスト・文章の差し替え	★☆☆
2	画像の差し替え	★☆☆
3	色・フォントの変更（CSS編集）	★★☆
4	不要なセクションの削除	★★☆
5	新しい要素の追加	★★★

8.2 テキストと画像を差し替える

まずはHTMLの文章と画像を自分のものに変えるところから始めます。HTMLの構造には触れずに中身だけ変える作業なので、コードの書き方がわからなくても取り組めます。

<!-- 変更前：モデルサイトのテキスト -->
<h1 class="hero-title">Welcome to My Website</h1>
<p class="hero-description">デザイナー・田中太郎のポートフォリオです。</p>

<!-- 変更後：自分のテキストに差し替え -->
<h1 class="hero-title">はじめまして</h1>
<p class="hero-description">Web制作を学習中のYukiryuのポートフォリオです。</p>

画像の差し替えは src の値を自分の画像ファイルのパスに変えます。

<!-- 変更前 -->
<img src="images/profile.jpg" alt="プロフィール">

<!-- 変更後：自分の画像ファイルに差し替え -->
<img src="images/my-profile.jpg" alt="プロフィール">

8.3 CSSでスタイルを変える

テキストと画像の差し替えに慣れてきたらCSSで色やフォントを変えてみましょう。

/* 変更前：モデルサイトのカラー */
.hero {
    background-color: #1a1a2e;
    color: #ffffff;
}

/* 変更後：自分好みのカラーに変更 */
.hero {
    background-color: #0a1628;
    color: #e0f0ff;
}

💡 変更前の値をコメントアウトして残しておきましょう： 変更前のコードを消してしまうと元に戻せなくなります。コメントアウト（/* */）して残しておくか、Gitでコミットしてからコードを変えると安心です。

8.4 不要な要素を削除する

モデルサイトに自分には必要ないセクションがある場合は削除します。HTMLでは開始タグから終了タグまでをセットで削除する必要があります。変更を加えた後に表示が崩れる時はほとんどが開始タグと終了タグのセットが合っていない時です（終了タグだけが一つ多く残っている場合など）。必ずどの開始タグとどの終了タグがセットかを確実に確認してから削除しましょう。

<!-- このセクション全体が不要な場合は開始から終了タグまで削除 -->
<section class="testimonials">
    <div class="container">
        <!-- ... -->
    </div>
</section>  ← ここまでをまとめて削除

⚠️ 対応するCSSも一緒に削除しましょう： HTMLからセクションを削除してもCSSに記述が残っていても特に問題はありませんが、ファイルが肥大化します。慣れてきたらCSSの対応するクラスも削除する習慣をつけましょう。

9. 変更のたびにGitでコミットする習慣をつける

9.1 小さな変更でもコミットする

ひとつ変更して確認できたらすぐにGitでコミットする習慣をつけましょう。

git add .
git commit -m "プロフィール画像とテキストを自分のものに差し替え"
git push

9.2 コミットを積み重ねる意味

コミットを積み重ねる利点	内容
いつでも元に戻せる	変更を誤っても過去のコミットに戻れる
変更履歴がわかる	何をいつ変えたかを後から確認できる
学習記録になる	GitHubのコントリビューショングラフが埋まっていく
実務に直結する	チーム開発でのGitの使い方と同じ習慣