第1回：HTMLの本質を理解する

3月 2, 2026

授業目次

🎯 今日のゴール

  • HTMLが「見た目を作るもの」ではないと理解する
  • HTMLは「文章の構造を作るもの」だと説明できる
  • 最低限のタグで1ページを作れる

1. WEB制作の全体像

WEB制作はこの流れで進みます。

  1. ヒアリング
  2. ワイヤーフレーム作成
  3. デザイン
  4. コーディング（HTML / CSS / JS）
  5. 公開
  6. 修正・改善

HTMLはこの中の「構造」を担当します。

2. なぜHTMLタグがあるのか？

もしタグがなかったらどうなるでしょうか？

山田太郎
WEB制作者を目指しています。

これだけでは、ブラウザは
「どこがタイトルで、どこが本文か」判断できません。

そこでタグを使います。

<h1>山田太郎</h1>
<p>WEB制作者を目指しています。</p>

HTMLタグとは？

HTMLは、

開始タグと終了タグで内容を囲み、意味を与える仕組み

です。

例えば：

<h1>山田太郎</h1>
  • <h1> → 開始タグ
  • </h1> → 終了タグ
  • その間の「山田太郎」→ 中身（コンテンツ）

このように、

<タグ名> 内容 </タグ名>

という形で文章を囲みます。

なぜ囲むのか？

タグで囲むことで、

  • これは「ページの最も重要な見出し」
  • これは「段落」
  • これは「リスト」

という意味をコンピュータに伝えることができます。

ポイント

タグは「見た目を大きくするためのもの」ではありません。

タグは、

👉 文章に意味を与えるラベル

です。

3. HTMLとは何か？

HTMLは

  • 人間
  • ブラウザ
  • 検索エンジン（Google）
  • 音声読み上げソフト

に「文章の構造」を伝える言語です。

HTMLは「見た目」ではありません。

見た目は次回学ぶCSSが担当します。

4. HTMLの基本構造

まずは最小構成を見てみましょう。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>自己紹介</title>
</head>
<body>
　<h1>山田太郎</h1>
  <p>WEB制作者を目指しています。</p></body>
</html>

各要素の役割

  • html → ページ全体
  • head → ページの情報（設定）
  • body → 実際に表示される内容
  • h1 → ページで最も重要な見出し
  • p → 段落

5. よく使う基本タグ

見出し

<h1>大見出し</h1>
<h2>中見出し</h2>

段落

<p>これは文章です。</p>

リンク

<a href="https://example.com">サイトを見る</a>

画像

<img src="sample.jpg" alt="説明文">

箇条書き

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

6. 実践：自己紹介ページを作る

以下を参考に、自分用に書き換えてください。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>自己紹介</title>
</head>
<body>  
　<h1>あなたの名前</h1>
　<section>
    <h2>自己紹介</h2>
    <p>ここに自己紹介を書きます。</p>
  </section>
　<section>
    <h2>目標</h2>
    <ul>
      <li>6ヶ月で案件獲得</li>
      <li>月5万円の副収入</li>
      <li>ポートフォリオ完成</li>
    </ul>
  </section>
　<a href="#">お問い合わせ</a></body>
</html>

7. 宿題

① 自己紹介ページを完成させる

  • 箇条書きを3つ以上入れる
  • セクションを最低2つ作る

② 架空サービス紹介ページを作る

以下の条件で、HTMLだけで1ページを作成してください。

テーマは自由ですが、例：

  • オンライン英会話
  • パーソナルジム
  • カフェ
  • WEB制作サービス

必須条件

  • h1を1つ使う
  • h2を最低3つ使う
  • sectionを最低3つ作る
  • ulを1回以上使う
  • aタグで「お問い合わせ」リンクを作る

🟡 発展課題（やれる人だけ）

画像を追加する

フォルダ構造：

lesson1/
  ├ index.html
  └ images/
      └ profile.jpg

コード：

<img src="images/profile.jpg" alt="プロフィール画像">

🔰 自習推奨セクション

※ここから先は必須ではありません。
余裕がある人はぜひ挑戦してみてください。

1. 他にはどんなHTMLタグがあるのか？

HTMLには、今回使ったタグ以外にも多くのタグがあります。

よく使われる代表的なタグ

  • header … ページやセクションの導入部分
  • footer … ページやセクションの末尾
  • nav … ナビゲーション
  • main … ページのメインコンテンツ
  • article … 記事コンテンツ
  • aside … 補足情報
  • strong … 強調
  • form … 入力フォーム
  • input … 入力欄
  • button … ボタン

ポイント

すべてを覚える必要はありません。

大事なのは：

「この情報は何の役割か？」を考えてタグを選ぶこと

タグは見た目のためではなく、意味のためにあります。

2. 基本的なページ構造の例

一般的なWEBページは、次のような構造になることが多いです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ページタイトル</title>
</head>
<body>
　<header>
    <h1>サイト名</h1>
  </header>
　<main>
    <section>
      <h2>見出し</h2>
      <p>本文テキスト</p>
    </section>
　　<section>
      <h2>別の見出し</h2>
      <p>説明文</p>
    </section>
  </main>
　<footer>
    <p>© 2026 サイト名</p>
  </footer>
</body>
</html>

重要な考え方

これは「正解」ではありません。

大事なのは：

  • header → 導入
  • main → 主な内容
  • footer → 終わり

というように、意味で区切ることです。

3. EMMETとは？

EMMET（エメット）は、
HTMLを高速で書くためのショートカット機能です。

VSCodeなどのエディタで使用できます。

例①：リストを一瞬で作る

エディタで次のように入力して、Tabキーを押します。

ul>li*3

すると、自動で次のHTMLが生成されます。

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

例②：ページの基本構造

!

と入力してTabを押すと、
HTMLの基本構造が一瞬で生成されます。

なぜ使うのか？

プロの現場では、

  • タイピング速度
  • 作業効率
  • 記述ミスの削減

が非常に重要です。

EMMETはそのためのツールです。

🔥 発展メッセージ

ここまで理解できる人は、成長が早いです。

ただし焦らなくて大丈夫です。

まずは「意味を理解すること」が最優先です。

8. 次回予告

次回は「CSS」を学びます。

今日作ったHTMLに「見た目」をつけていきます。

HTMLが「骨組み」なら、
CSSは「装飾」です。

← 週一覧に戻る