はじめまして！プログラミング学習を始めて3ヶ月の初心者です。
プログラミング学習3ヶ月目の私が、HTMLを学習していて「なんとなく分かるけど、うまく作れない」という壁にぶつかった時に気づいた考え方です。
「HTMLはDivブロックを配置するゲーム」
この考え方を持つようになってから、HTMLの理解が一気に深まりました。同じように悩んでいる初心者の方に共有したくて記事にしました。
対象読者
- HTML/CSSを学習中の初心者
- 「なんとなく分かるけど、思うように作れない」と感じている人
- HTMLの構造を理解したい人
- ゲーム感覚で楽しく学習したい人
私の環境
- macOS Big Sur
- Visual Studio Code
- Chrome DevTools
- HTML5 / CSS3
HTMLの「なんとなく分からない」問題
学習初期の悩み
HTML学習を始めた頃、こんな悩みがありました：
- タグの意味は分かるけど、どう組み合わせればいいか分からない
- 思った通りのレイアウトにならない
- 「なんとなく」でコードを書いてしまう
- 他の人のコードを見ても構造が理解できない
転機：「ブロック配置ゲーム」という発想
ある日、先輩エンジニアから言われた一言が転機でした：
「HTMLは、Divブロックをいかに綺麗に配置するかのゲームだよ」
この言葉で、HTMLに対する見方が180度変わりました。
HTMLを「ブロック配置ゲーム」として考える
基本的な考え方
<!-- HTMLは「箱（ブロック）」を配置するゲーム -->
<div class="container"> <!-- 大きな箱 -->
<div class="header"> <!-- ヘッダー箱 -->
<div class="logo">Logo</div> <!-- ロゴ箱 -->
<div class="nav">Menu</div> <!-- ナビ箱 -->
</div>
<div class="main"> <!-- メイン箱 -->
<div class="content">Content</div> <!-- コンテンツ箱 -->
<div class="sidebar">Sidebar</div> <!-- サイドバー箱 -->
</div>
<div class="footer">Footer</div> <!-- フッター箱 -->
</div>
ゲームのルール
- 大きな箱から小さな箱へ：外側から内側に向かって配置
- 箱の中には箱を入れる：入れ子構造を意識
- 箱には名前をつける：classやidで識別
- 箱の配置が決まれば半分成功：構造が整えばCSSで装飾しやすい
実践：ブロック配置ゲームの進め方
ステップ1：全体の設計図を描く
まず、作りたいレイアウトを「箱」で考えます：
┌─────────────────────┐
│ Header │ ← ヘッダー箱
├─────────────────────┤
│ Main │ Sidebar │ ← メイン箱とサイドバー箱
│ Content │ │
│ │ │
├─────────────────────┤
│ Footer │ ← フッター箱
└─────────────────────┘
ステップ2：大きな箱から配置
<!-- レベル1：一番大きな箱 -->
<div class="container">
<!-- ここに全体を入れる -->
</div>
ステップ3：主要な箱を配置
<!-- レベル2：主要な箱たち -->
<div class="container">
<div class="header">ヘッダー箱</div>
<div class="main">メイン箱</div>
<div class="footer">フッター箱</div>
</div>
ステップ4：細かい箱を配置
<!-- レベル3：細かい箱たち -->
<div class="container">
<div class="header">
<div class="logo">ロゴ箱</div>
<div class="nav">ナビ箱</div>
</div>
<div class="main">
<div class="content">コンテンツ箱</div>
<div class="sidebar">サイドバー箱</div>
</div>
<div class="footer">
<div class="copyright">コピーライト箱</div>
</div>
</div>
よくある配置パターン（ゲームの定石）
パターン1：シンプルな縦並び
<div class="container">
<div class="header">Header</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
パターン2：サイドバー付き
<div class="container">
<div class="header">Header</div>
<div class="content-wrapper">
<div class="main">Main Content</div>
<div class="sidebar">Sidebar</div>
</div>
<div class="footer">Footer</div>
</div>
パターン3：カード型レイアウト
<div class="container">
<div class="card-grid">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</div>
</div>
初心者がやりがちな「配置ミス」
ミス1：箱の入れ子を無視する
<!-- ❌ 悪い例：構造が分からない -->
<div class="header">Header</div>
<div class="logo">Logo</div>
<div class="nav">Nav</div>
<div class="main">Main</div>
<!-- ✅ 良い例：箱の中に箱 -->
<div class="header">
<div class="logo">Logo</div>
<div class="nav">Nav</div>
</div>
<div class="main">Main</div>
ミス2：意味のない箱を作りすぎる
<!-- ❌ 悪い例：不要な箱が多い -->
<div class="wrapper">
<div class="container">
<div class="inner">
<div class="content-wrapper">
<div class="content">Hello</div>
</div>
</div>
</div>
</div>
<!-- ✅ 良い例：必要最小限の箱 -->
<div class="container">
<div class="content">Hello</div>
</div>
ミス3：箱に適切な名前をつけない
<!-- ❌ 悪い例：意味不明な名前 -->
<div class="box1">
<div class="item">
<div class="thing">Content</div>
</div>
</div>
<!-- ✅ 良い例：意味のある名前 -->
<div class="article">
<div class="article-header">
<div class="article-title">Content</div>
</div>
</div>
ゲーム感覚で楽しく学ぶコツ
1. 「箱当てゲーム」をする
既存のWebサイトを見て、「この部分はどんな箱で作られているか」を予想してみる。
Chrome DevToolsで確認すると答え合わせができます！
2. 「最小箱チャレンジ」
同じレイアウトを、できるだけ少ない箱で作ってみる。
3. 「箱の名前付けゲーム」
箱に適切な名前をつける練習。意味のある名前をつけられるようになると、コードが読みやすくなります。
4. 「箱の構造予想ゲーム」
好きなWebサイトを見て、「この部分はどんな箱で構成されているか」を予想してみる。
私が学んだ教訓
1. 構造を意識すると理解が深まる
HTMLの箱配置を意識することで、「なんとなく」ではなく「意図的」にコードを書けるようになりました。
2. 他の人のコードが読めるようになる
箱の構造を理解できるようになると、他の人が書いたHTMLも理解しやすくなります。
3. デザインを見る目が変わる
Webサイトを見る時に、「この部分はどんな箱で構成されているか」を自然に考えるようになりました。
4. 次のステップ（CSS）への準備ができる
HTMLで適切な箱配置ができていれば、CSSでの装飾もスムーズに進められます。
次のステップ
HTMLの「ブロック配置ゲーム」をマスターしたら、次はCSSで箱を装飾する段階です。
- CSS基礎：色、サイズ、余白の設定
- レイアウト：FlexboxやGridを使った配置
- レスポンシブ：画面サイズに応じた調整
HTMLの構造がしっかりしていれば、CSSの学習もきっと楽しくなるはずです！
## まとめ
HTMLを「ブロック配置ゲーム」として考えることで：
- **構造的思考**が身につく
- **意図的なコーディング**ができるようになる
- **他の人のコード**が理解しやすくなる
- **次のステップ（CSS）**への準備ができる
- **楽しく学習**できる
「ブロックの配置が決まれば半分は成功」
この考え方で、HTML学習がより楽しく、効率的になることを願っています！