ToolShare Lab

Week 01 / Phase 1: HTML バイブコーディングの土台 — フロントエンドレッスン

HTMLって何？
Webページが表示される仕組みを理解して最初の1ファイルを作る

これからAIに任せる前の土台を身につける第一歩を踏み出す。この記事を読み終わるころには「WebサイトがなぜURLを打つだけで表示されるのか」がわかり、自分の手で最初のHTMLファイルを作ってブラウザで表示できるようになっている。コードを書く前に「そもそもHTMLとは何か」を理解することが、この先AIの出力を読んで直せるようになるための土台になる。

読了時間: 約15分 公開日: 2026年4月9日 前提知識: なし（完全初心者OK）

今週のゴール

Webページが表示される仕組みを理解する。テキストエディタ（VS Code）を導入する。自分の手で最初のHTMLファイルを作り、ブラウザで表示する。HTMLの基本構造（DOCTYPE, html, head, body）を暗記する。

コードを書く前に知っておくこと

プログラミングの勉強を始めるとき、多くの人が「とりあえずコードを書いてみよう」と言います。それ自体は間違っていません。でも、ちょっと待ってほしい。

あなたは今「HTML」を学ぼうとしています。でも、そもそも HTMLが何のためにあるのか、Webページがどうやって表示されるのか を知らないままコードを書き始めると、すぐに「何やってるのかわからない」状態になります。

この第1週では、コードを書く量は最小限です。その代わり、「なぜHTMLを書くのか」「Webページが表示される仕組み」を根本から理解する ことに時間を使います。ここで築く土台が、この先のCSS・JavaScript、そしてAIとのコーディングすべてを支えます。

大事なこと: 速く進むことが目標ではありません。「理解して進む」ことが目標です。わからない部分があったら、このページを何度でも読み返してください。1回で全部わかる必要はありません。

Webページが表示される仕組み

あなたがブラウザの URL バーに https://webatives.com と打って Enter を押すと、画面にWebサイトが表示されます。この間に何が起きているか、順番に追ってみましょう。

ステップ1: ブラウザがサーバーに「ください」と言う

「ブラウザ」とは、Google Chrome や Safari のことです。あなたがURLを入力すると、ブラウザは世界のどこかにある「サーバー」というコンピュータに対して、「このページのデータをください」とリクエストを送ります。

イメージとしては、レストランでメニューを見て料理を注文するようなものです。ブラウザ（お客さん）がサーバー（厨房）に「これをくれ」と頼んでいる。

ステップ2: サーバーがファイルを送り返す

サーバーは、リクエストを受け取ると「はいどうぞ」とファイルを送り返します。このとき送られてくるのが HTMLファイル です。必要に応じて、CSSファイル（見た目）やJavaScriptファイル（動き）も一緒に送られてきます。

ステップ3: ブラウザが受け取ったファイルを「絵」に変換する

ブラウザは、受け取ったHTMLファイルを上から順番に読んでいき、「ここは見出し」「ここは段落」「ここは画像」と解釈して、画面に表示します。この「HTMLを読んで画面に描画する」処理のことを レンダリング と呼びます。

まとめ: URLを入力 → ブラウザがサーバーにリクエスト → サーバーがHTMLファイルを送信 → ブラウザがHTMLを読んで画面に表示。たったこれだけです。

ここで気づいてほしいのは、Webページの正体は「ファイル」であるということです。あなたのパソコンに入っているWordファイルやExcelファイルと同じように、HTMLファイルもただのファイルです。違いは拡張子が .html になっていることだけ。

つまり、あなたがパソコンで .html ファイルを作れば、それはもう「Webページ」です。サーバーにアップロードする前でも、自分のパソコンのブラウザで開けば表示できます。

HTMLとは何か

HTML は HyperText Markup Language の略です。日本語に訳すと「ハイパーテキスト マークアップ 言語」。

よくある誤解: 「HTMLはプログラミング言語だ」。これは違います。HTMLは「マークアップ言語」です。何が違うかというと:

HTMLは、テキストに「ここは見出し」「ここは段落」「ここはリンク」という 意味のラベルを貼る ための言語です。ブラウザはそのラベルを読んで、適切に表示します。

たとえ話: 設計図と建物

家を建てるとき、設計図が必要です。設計図には「ここは壁」「ここはドア」「ここは窓」と書いてあります。大工さん（ブラウザ）はこの設計図（HTML）を見て、実際の家（Webページ）を建てます。

HTMLは Webページの設計図 です。「ここに見出しを置く」「ここに画像を置く」「ここにリンクを置く」と書くと、ブラウザがその通りに画面に表示してくれます。

「タグ」という概念

HTMLでは、タグを使って文章に意味を付けます。タグは < > で囲まれた英単語です。 

<h1>これは見出しです</h1>
<p>これは段落です。</p>

<h1> は「ここから見出しが始まる」、</h1> は「ここで見出しが終わる」という意味です。/ が付いている方が「終了タグ」です。

最初は「なんでこんな面倒な書き方をするんだ」と思うかもしれません。でもこれは ブラウザに「ここは見出しだよ」と教えるため です。ブラウザは人間と違って「見た目」では判断できません。タグで教えてあげる必要があるんです。

VS Codeを導入する

HTMLファイルは、メモ帳（Windows）やテキストエディット（Mac）でも作れます。でも、プロのエンジニアは Visual Studio Code（VS Code） というエディタを使います。無料で、世界で最も使われているコードエディタです。

インストール手順

  1. code.visualstudio.com にアクセス
  2. 大きな「Download」ボタンをクリック（自分のOS用が自動判別される）
  3. ダウンロードされたファイルを実行してインストール
  4. インストール完了後、VS Code を起動

日本語化する（任意）

  1. VS Code を起動したら、左のバーにある四角いアイコン（Extensions）をクリック
  2. 検索欄に「Japanese」と入力
  3. 「Japanese Language Pack for Visual Studio Code」を見つけて「Install」をクリック
  4. 右下に「Change Language and Restart」と表示されたらクリック
  5. VS Code が再起動して日本語になる

英語のままでもOK: エンジニアの世界は英語が基本です。余裕があれば英語のまま使うと、将来の学習がラクになります。でも最初は日本語でも全く問題ありません。

最初のHTMLファイルを作る

いよいよ、自分の手でHTMLファイルを作ります。ここが AIに任せる前の土台を身につける最初の瞬間 です。

手順

  1. フォルダを作る
    デスクトップに my-first-website というフォルダを新規作成してください。
  2. VS Code でフォルダを開く
    VS Code を起動して、メニューの「ファイル」→「フォルダーを開く」→ 先ほど作った my-first-website を選択。
  3. 新しいファイルを作る
    VS Code の左側のエクスプローラーで、フォルダ名の横にある「新しいファイル」アイコン（紙にプラスマーク）をクリック。ファイル名を index.html と入力して Enter。
  4. 以下のコードを打つ（コピペで済ませず、まずは自分の手で1文字ずつ打ちながら、コードの意味を読んで確かめてください） 
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>はじめてのWebページ</title>
</head>
<body>
    <h1>こんにちは、世界！</h1>
    <p>これは私が作った最初のWebページです。</p>
</body>
</html>

まずは自分の手で1文字ずつ打って、書きながら意味を読んで確かめてください。指でキーボードを叩きながら1文字ずつ書き写すと、タグの構造が体に入ります。慣れてきたら、AIに同じものを作らせて出力を読み比べる練習に進みましょう（この後のセクションでやります）。

  1. 保存する
    Ctrl + S（Macは Cmd + S）で保存。
  2. ブラウザで開く
    Finderやエクスプローラーで my-first-website フォルダを開き、index.html をダブルクリック。するとブラウザが開いて、あなたが作ったWebページが表示されます。

おめでとうございます。あなたは今、自分の手でWebページを作りました。

画面に「こんにちは、世界！」と表示されていれば成功です。もし表示されなかったら、コードを見直してみてください。大文字小文字、< と > の向き、/ の有無をチェック。1文字でも間違っていると動きません。これが「コードを書く」ということです。

HTMLの基本構造を理解する

先ほど書いたコードを、1行ずつ解説します。

<!DOCTYPE html> — 「これはHTMLです」宣言

ブラウザに「このファイルはHTML5で書かれています」と伝えるための宣言です。すべてのHTMLファイルの1行目に必ず書くお約束。意味を深く考える必要はありません。「1行目にこれを書く」と覚えてください。

<html lang="ja"> — HTML全体の始まり

HTMLのコード全体を囲む「大枠」です。lang="ja" は「このページは日本語で書かれています」という意味。Googleの検索エンジンやスクリーンリーダー（視覚障害者が使うソフト）がこの情報を使います。

<head> — ページの「裏側の情報」

ユーザーの画面には直接表示されない情報を入れる場所です。ページのタイトル、文字コード、SEO情報、外部ファイルの読み込みなどを記述します。

<body> — ページの「表側の内容」

ユーザーの画面に実際に表示される内容を入れる場所です。見出し、段落、画像、リンク、ボタン…… Webページに見えているものはすべて <body> の中に書きます。

暗記ポイント: HTMLファイルは <!DOCTYPE html> で始まり、<html> の中に <head>（裏側の情報）と <body>（表側の内容）がある。これだけ覚えれば、どんなHTMLファイルも読めるようになります。

HTMLを編集してみる

ここからは、先ほど作った index.html を少しずつ編集して、変化を観察します。

実験1: テキストを変えてみる

<h1> の中身を変えてみましょう。 

<h1>私のポートフォリオサイト</h1>
<p>AIを使ってWeb制作を学習中です。</p>

保存して、ブラウザを更新（F5 または Cmd+R）してみてください。表示が変わったはずです。

実験2: タグを増やしてみる

<body> の中に、もう少し要素を足してみましょう。 

<body>
    <h1>私のポートフォリオサイト</h1>
    <p>AIを使ってWeb制作を学習中です。</p>

    <h2>自己紹介</h2>
    <p>名前: あなたの名前</p>
    <p>趣味: 映画鑑賞、読書、プログラミング</p>

    <h2>今週の目標</h2>
    <p>HTMLの基本構造を理解して、自分でWebページを作れるようになる。</p>
</body>

<h2> は2番目に大きい見出しです。<h1> がページのメインタイトル、<h2> がセクションのタイトル、という使い分けです。

実験3: titleを変えてみる

<head> の中の <title> を変更して保存→更新してみてください。ブラウザのタブに表示される文字が変わります。 

<title>私のポートフォリオ | AIと学ぶWeb制作</title>

地味ですが、この <title> はSEO（検索エンジン最適化）で最も重要な要素のひとつです。Googleの検索結果に青い文字で表示されるのがこの <title> の中身です。

初心者がやりがちな3つのミス

多くの初心者がつまずくポイントを踏まえて、第1週で確実に引っかかる3つを紹介します。先に知っておくだけで、かなりの時間を節約できます。

ミス1: 閉じタグを忘れる

<!-- ❌ 間違い -->
<h1>こんにちは
<p>段落です

<!-- ✅ 正しい -->
<h1>こんにちは</h1>
<p>段落です</p>

HTMLは「開始タグ」と「終了タグ」でセット。終了タグ（</h1>）を忘れると、ブラウザが正しく解釈できなくなります。ブラウザは賢いので、ある程度は補完してくれますが、頼ってはいけません。

ミス2: 拡張子を .html にし忘れる

ファイル名を index や index.txt にしてしまうと、ブラウザがHTMLとして認識しません。必ず .html で終わるようにしてください。index.html です。

ミス3: 全角スペースを使う

<!-- ❌ 全角スペース（目に見えないが、エラーの原因になる） -->
<meta　charset="utf-8">

<!-- ✅ 半角スペース -->
<meta charset="utf-8">

日本語入力がオンの状態でスペースキーを打つと「全角スペース」が入力されます。これはHTMLでは完全にNG。見た目では区別がつかないので、エラーが出たらまず全角スペースを疑ってください。

VS Code では、設定で「全角スペースを可視化する」拡張機能を入れておくと便利です。「Zenkaku」という拡張機能が人気です。

今週の課題

課題

以下の要件を満たす index.html を作成してください。

  1. <!DOCTYPE html> から始まる正しいHTML構造
  2. <title> に自分の名前入りのタイトル（例: 「山田太郎のポートフォリオ」）
  3. <h1> にメインの見出し
  4. <h2> を使ったセクション見出しを 3つ以上（例: 自己紹介、趣味、学習の記録）
  5. 各セクションに <p> で説明文を入れる
  6. 保存してブラウザで表示できること

AIに全部任せきりにしないでください。使うなら、まずAIに叩き台を作らせて出力を読み、意味がわかったら自分の手で1文字ずつ書き直してください。間違えたら直す。これが「学ぶ」ということです。

完成したら、スクリーンショットを撮っておいてください。土台を一通り終えたころにこのスクリーンショットを見返すと、自分の成長に驚くはずです。

提出前に、AIが作ったコードでよくある間違いも確認しておきましょう。

自己診断テスト

今週の理解度をチェックしましょう。全問正解を目指してください。

  1. URLを入力してWebページが表示されるまでの3ステップを、自分の言葉で説明できますか？
  2. HTMLは「プログラミング言語」ですか？「マークアップ言語」ですか？
  3. <head> と <body> の違いを説明できますか？
  4. <h1> と <p> の違いは何ですか？
  5. 終了タグに付いている / の意味を説明できますか？
  6. <meta charset="utf-8"> は何のために書きますか？
  7. <title> タグの内容は、画面のどこに表示されますか？

答えがすぐに出てこなかったら、記事を読み返してください。全問答えられたら、あなたはWeek 01をクリアです。

来週の予告 — Week 02: テキストを書き表す

来週は、HTMLで「文章を表現する方法」をもっと深く学びます。<h1>〜<h6> の使い分け、<strong> と <em> の違い、リスト（<ul>, <ol>）の作り方。

「ただ文字を書く」のと「HTMLで意味を付けて書く」のは全く違います。この「セマンティック（意味のある）な書き方」がわかると、SEOにも強くなるし、アクセシビリティも向上します。Week 02 でその感覚を掴みましょう。

Week 01 完了おめでとうございます。 あなたは今、世界中のWebページの「正体」を知りました。ここから先、すべてのWebページを見るたびに「これもHTMLで書かれてるんだな」と感じるはずです。来週もこの調子で進みましょう。

← カリキュラム全体に戻る | Week 02: テキストを書き表す →