職業訓練ユニット14｜HTML基本編 演習 (30時間）

ユニット14では、HTML基本編の演習に取り組みました。
HTMLは「暗記」よりも、正しい型（構造）で書けることが重要だと感じました。この記事では、私がつまずいたポイント（入れ子／閉じタグ／相対パスなど）を正直に残しつつ、初心者でも再現しやすい手順にまとめます。

この記事でわかること（3つ）

• HTMLの基本構造（最低限の型）

• 演習でよく使うタグと使い分け

• つまずきやすい原因とチェック方法（原因→対処）

学習内容の全体像（ユニット14でやったこと）

• HTML文書の基本構造（DOCTYPE／head／body）

• 見出し・段落・改行の使い分け

• リスト（ul/ol）とリンク（a）

• 画像（img）とパス（相対パス）

• セマンティック要素の考え方（header/main/footer など）

基本設定（最初にここだけ押さえる）

• 最初に「骨組み（構造）」を作ってから中身を書く

• 見出しは h1→h2→h3 の順で階層を守る（h2中心運用）

• 迷ったら「この文章は見出し？本文？箇条書き？」を先に決める

• 画像・リンクは 相対パス を基本にして慣れる

ユニット14の作業手順（私の手順メモ）

1. まずHTMLの基本構造を作る（テンプレ化）

2. h1を1つ置く → 章はh2で切る

3. 本文はp、箇条書きはul/olで書く

4. リンク（a）と画像（img）を追加

5. 表示を見て崩れた所だけ原因を探す（閉じタグ／入れ子／パス）

つまずいた点と解決（原因→対処）

• 例1：表示が崩れる／急に全部おかしくなる
  → 原因：閉じタグの抜け、入れ子の順番ミス
  → 対処：直近で触った所から戻って、タグを1つずつ対応させる（インデントを整える）

• 例2：画像が表示されない
  → 原因：相対パスが違う／拡張子違い／大文字小文字
  → 対処：画像の置き場所を確認→パスを「現在のHTMLから見た位置」で書き直す

• 例3：リンクはあるのに飛べない
  → 原因：hrefのURLが不完全／ファイル名違い
  → 対処：同じ階層なら ./、1つ上なら ../ を意識して修正

提出前チェックリスト（1分で確認）

• h1は1つ、章はh2で分かれている

• タグの入れ子が崩れていない（インデントが揃っている）

• 画像が表示される（相対パスOK）

• リンクが動く（別ページに遷移できる）

• ファイル名・拡張子の表記が一致している

学習のコツ（初心者向け）

• HTMLは「文章」ではなく「構造」を書く、と意識すると迷いが減る

• 崩れた時は焦らず「閉じタグ」「入れ子」「パス」の順で確認

• 分からない所は“分からないまま”でOK。どこで止まったかをメモすると次が早い

まとめ｜次に読むおすすめ

• 前：ユニット13（STUDIO）

• 次：ユニット15（WordPressの基本操作）

• 関連：ユニット5（デザイン概論）

参考（外部リンクと授業動画タイトル）

公式ヘルプ（分からない時はここ）

• HTML要素リファレンス：MDN

• リンク（相対URLの考え方）：MDN

•  <a>要素：MDN

•  <img>要素：MDN

＜授業動画タイトル＞
授業動画が視聴できないため、下の「授業動画タイトル一覧」は“チェックリスト”として活用しています。
タイトルから作業内容が想像できない場合は、同じキーワードで公式ヘルプを検索して補います。