HTMLを書いてみよう

知っている人へ: 「確認しよう」のチェックリストだけやって次に進んでOKです。

このページで学ぶこと

HTML ファイルを作ってブラウザで表示できる
よく使うタグの意味と使い方がわかる
Webページの骨格がどのように作られているかわかる

HTMLとは

HTML（HyperText Markup Language）は、Webページの構造を作るための言語です。

「ここは見出し」「ここは段落」「ここはボタン」というように、コンテンツの意味を定義する
デザイン（色・大きさなど）は CSS が担当する
動き（クリックしたら何かする）は JavaScript が担当する

3つの役割分担を覚えておきましょう。

HTML  → 構造・内容（骨格）
CSS   → デザイン・見た目（皮膚）
JS    → 動作・インタラクション（筋肉）

やってみよう

ステップ1: はじめてのHTMLファイルを作る

デスクトップに practice というフォルダを作る
VS Code で practice フォルダを開く（VS Code のメニュー → ファイル → フォルダーを開く）
左のファイルツリーで右クリック → 「新しいファイル」→ index.html という名前で作成する
以下のコードを貼り付けて保存する（Windows: Ctrl + S / Mac: Cmd + S）

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>はじめてのHTML</title>
  </head>
  <body>
    <h1>こんにちは、とんペディア！</h1>
    <p>これはHTMLで作ったページです。</p>
  </body>
</html>

ファイルをブラウザで開く
- Windows: エクスプローラーで index.html を右クリック → 「プログラムから開く」→ Chrome または Edge
- Mac: Finder で index.html を右クリック（または Control + クリック）→「このアプリケーションで開く」→ Chrome

ブラウザに「こんにちは、とんペディア！」と表示されれば成功です。

ステップ2: よく使うタグを試す

以下を <body> タグの中に追加してみましょう。追加するたびにブラウザをリロード（Windows: F5 / Mac: Cmd + R）して変化を確認してください。

見出し

<h1>一番大きい見出し</h1>
<h2>二番目の見出し</h2>
<h3>三番目の見出し</h3>

段落とリスト

<p>これは段落です。文章のまとまりを表します。</p>
 
<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>バナナ</li>
</ul>

リンクと画像

<a href="https://www.google.com">Googleへ行く</a>
 
<img src="https://placehold.co/300x200" alt="サンプル画像" />

ボタン

<button>クリックしてね</button>

ステップ3: プロフィールページを作ってみよう

以下の要素を使って、自分のプロフィールページを作ってみましょう。
内容は架空でもOKです。

名前（<h1>）
自己紹介（<p>）
好きなものリスト（<ul> + <li>）
好きなサイトへのリンク（<a>）

ヒント: わからないタグが出てきたら AI に聞いてみましょう。

よく使うタグ一覧

タグ	意味	例
`<h1>〜<h6>`	見出し（数字が大きいほど小さい）	`<h1>タイトル</h1>`
`<p>`	段落	`<p>テキスト</p>`
`<a href="URL">`	リンク	`<a href="https://...">クリック</a>`
`<img src="URL" alt="説明">`	画像	`<img src="photo.jpg" alt="写真" />`
`<ul>` / `<ol>`	箇条書き / 番号付きリスト	—
`<li>`	リストの各項目	`<li>項目</li>`
`<div>`	グループ化（意味なし・レイアウト用）	`<div>...</div>`
`<span>`	インラインのグループ化	`<span>テキスト</span>`
`<button>`	ボタン	`<button>送信</button>`
`<input>`	入力フォーム	`<input type="text" />`

HTMLの構造を理解する

<!DOCTYPE html>          ← これはHTMLファイルですという宣言
<html lang="ja">         ← HTMLの開始。lang="ja"は日本語ページという意味
  <head>                 ← ページの設定（ブラウザに伝える情報）
    <meta charset="UTF-8" />  ← 文字コードの設定（日本語を表示するため）
    <title>タイトル</title>    ← ブラウザのタブに表示される名前
  </head>
  <body>                 ← ページに表示する内容はここに書く
    ...
  </body>
</html>

確認しよう

index.html を作ってブラウザで表示できた
h1 / p / ul / a / img を使えた
プロフィールページを作った
タグを変えたり追加したりして、表示がどう変わるか試した

AIに聞いてみよう

「HTMLで表（テーブル）を作るにはどうすれば良いですか？サンプルコードを見せてください」

次のステップ

→ CSSでスタイルをつけよう