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

授業目次

🎯 今日のゴール

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

1. WEB制作の全体像

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

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

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は「装飾」です。