演習：自己紹介ページの骨組みを作ろう

ストーリー

先輩「見出し、段落、リスト、テーブル。基本タグが揃ったね。これらを組み合わせて自己紹介ページの骨組みを作ろう」

いよいよ実践ですね！

先輩「見た目はまだ整えなくていい。まずはHTMLだけで『内容が全部揃ったページ』を作ることを目指そう」

ミッション

Step 2で学んだタグを使って、自己紹介ページ（profile.html）の骨組みを作成してください。

要件

必須要素

以下の要素をすべて含めてください。

要素	使うタグ	内容
ページタイトル	`<h1>`	自己紹介ページのタイトル
セクション見出し	`<h2>`	最低4つのセクション
自己紹介文	`<p>`	2段落以上の自己紹介
テキスト装飾	`<strong>`, `<em>`	重要な部分や強調
趣味リスト	`<ul>`	3つ以上の趣味
学習手順	`<ol>`	3つ以上の手順
プロフィール表	`<table>`	基本情報のテーブル
スキル表	`<table>`	スキル一覧のテーブル

セクション構成（推奨）

<h1>（ページタイトル）
├── <h2> プロフィール
│   ├── <table> 基本情報
│   └── <p> 自己紹介文
├── <h2> スキル
│   └── <table> スキル一覧
├── <h2> 趣味
│   └── <ul> 趣味リスト
└── <h2> 学習計画
    └── <ol> 学習手順

ヒント

ファイルの開始テンプレート

html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>自己紹介ページ</title>
</head>
<body>
  <!-- ここにコンテンツを書く -->
</body>
</html>

基本情報テーブルのヒント

名前、年齢、職業、住所などを <th> と <td> で書きましょう。

スキルテーブルのヒント

<thead> と <tbody> を使って、スキル名・レベル・経験期間の列を作りましょう。

チャレンジ（余裕がある人向け）

ネストしたリスト（趣味のサブカテゴリなど）を追加する
説明リスト <dl> を使った用語集セクションを追加する
<tfoot> を使ってテーブルに合計行を追加する
<hr> でセクションを区切る

解答例

html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>山田太郎の自己紹介</title>
</head>
<body>
  <h1>山田太郎の自己紹介ページ</h1>

  <!-- プロフィールセクション -->
  <h2>プロフィール</h2>
  <table>
    <tbody>
      <tr>
        <th>名前</th>
        <td>山田太郎</td>
      </tr>
      <tr>
        <th>年齢</th>
        <td>25歳</td>
      </tr>
      <tr>
        <th>職業</th>
        <td>Webエンジニア（見習い）</td>
      </tr>
      <tr>
        <th>住所</th>
        <td>東京都渋谷区</td>
      </tr>
      <tr>
        <th>趣味</th>
        <td>プログラミング、読書、映画鑑賞</td>
      </tr>
    </tbody>
  </table>

  <p>はじめまして、<strong>山田太郎</strong>です。IT企業でWebエンジニアの見習いとして働いています。</p>
  <p>現在は<em>HTMLとCSS</em>を勉強中で、将来は<strong>フルスタックエンジニア</strong>になることが目標です。毎日少しずつ学習を続けています。</p>

  <hr>

  <!-- スキルセクション -->
  <h2>スキル</h2>
  <table>
    <thead>
      <tr>
        <th>スキル</th>
        <th>レベル</th>
        <th>学習期間</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>HTML</td>
        <td>学習中</td>
        <td>2週間</td>
      </tr>
      <tr>
        <td>CSS</td>
        <td>学習中</td>
        <td>1週間</td>
      </tr>
      <tr>
        <td>Excel</td>
        <td>中級</td>
        <td>2年</td>
      </tr>
      <tr>
        <td>Word</td>
        <td>中級</td>
        <td>2年</td>
      </tr>
    </tbody>
  </table>

  <hr>

  <!-- 趣味セクション -->
  <h2>趣味</h2>
  <ul>
    <li>プログラミング
      <ul>
        <li>Webサイト作成</li>
        <li>ツール作成</li>
      </ul>
    </li>
    <li>読書
      <ul>
        <li>技術書</li>
        <li>ビジネス書</li>
      </ul>
    </li>
    <li>映画鑑賞</li>
    <li>散歩</li>
  </ul>

  <hr>

  <!-- 学習計画セクション -->
  <h2>学習計画</h2>
  <p>以下の順番で学習を進めています。</p>
  <ol>
    <li>HTMLの基本を学ぶ <strong>← 今ここ！</strong></li>
    <li>CSSでデザインを整える</li>
    <li>JavaScriptで動きを付ける</li>
    <li>フレームワーク（React等）を学ぶ</li>
    <li>ポートフォリオサイトを作成する</li>
  </ol>

  <hr>

  <p><small>最終更新日: 2025年5月</small></p>
</body>
</html>

</details>

確認ポイント

作成したページをブラウザで開いて、以下を確認しましょう。

確認項目	チェック
ページタイトルがタブに表示される	`<title>` が設定されている
h1が1つだけある	ページの最上部にタイトル
h2でセクションが分かれている	最低4つのセクション
段落が2つ以上ある	`<p>` で自己紹介文
太字や強調が使われている	`<strong>`, `<em>`
箇条書きリストがある	`<ul>` + `<li>`
番号付きリストがある	`<ol>` + `<li>`
テーブルが2つある	基本情報 + スキル一覧
文字化けしていない	`<meta charset="UTF-8">`

まとめ

ポイント	内容
構造優先	まずはHTMLで内容の構造を作る
セクション分け	h2でセクションを区切る
適切なタグ選択	リスト、テーブル、段落を使い分ける
見た目は後で	CSSは Step 4 で学ぶ

チェックリスト

profile.html を作成した
h1, h2 で見出し構造ができている
段落、リスト、テーブルをすべて使った
ブラウザで正しく表示されることを確認した
文字化けしていないことを確認した

次のステップへ

自己紹介ページの骨組みが完成しました。次のクイズでStep 2の理解度を確認しましょう。

推定読了時間: 90分