HTML入門 #3 - リスト・表・フォームの基本

入門 | 12分 で読める | 2026.07.12

公式ドキュメント
HTML

今回やること

Webページでは、文章だけでなく一覧、表、入力フォームもよく使います。

情報の種類に合うHTMLを選ぶと、読みやすく、あとからCSSやJavaScriptも当てやすくなります。

今回は、学習記録ページを作りながら基本タグを練習します。

箇条書きを作る

順番が重要でない一覧には ul を使います。

<h2>学習中の技術</h2>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

順番が重要な手順には ol を使います。

<h2>今日の作業手順</h2>
<ol>
  <li>VS Codeを開く</li>
  <li>HTMLを書く</li>
  <li>ブラウザで確認する</li>
</ol>

表を作る

行と列で比べたい情報には table を使います。

<table>
  <thead>
    <tr>
      <th>日付</th>
      <th>学習内容</th>
      <th>時間</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>7月12日</td>
      <td>HTMLの基本</td>
      <td>60分</td>
    </tr>
  </tbody>
</table>

th は見出しセル、td は通常のデータセルです。

フォームを作る

入力欄には form、label、input、button を使います。

<form>
  <label for="goal">今日の目標</label>
  <input id="goal" name="goal" type="text" />

  <button type="submit">保存する</button>
</form>

label の for と input の id を同じにすると、ラベルをクリックした時に入力欄へフォーカスできます。

学習記録ページを作る

body に次を追加します。

<body>
  <h1>学習記録</h1>

  <h2>学習中の技術</h2>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>

  <h2>今日の作業手順</h2>
  <ol>
    <li>前回の内容を確認する</li>
    <li>新しいタグを試す</li>
    <li>分かったことをメモする</li>
  </ol>

  <h2>記録</h2>
  <table>
    <thead>
      <tr>
        <th>日付</th>
        <th>内容</th>
        <th>時間</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>7月12日</td>
        <td>HTMLのリストと表</td>
        <td>60分</td>
      </tr>
    </tbody>
  </table>

  <h2>今日の目標</h2>
  <form>
    <label for="goal">目標</label>
    <input id="goal" name="goal" type="text" />
    <button type="submit">保存する</button>
  </form>
</body>

よくあるミス

ミス問題修正
li を ul や ol の外に書く一覧構造が崩れるli はリストの中に入れる
表をレイアウト目的で使う意味と見た目が混ざるレイアウトはCSSで行う
label がない入力欄の意味が伝わりにくいlabel を付ける
button の種類が曖昧送信か操作か分かりにくいtype を書く

練習

次を追加してください。

  1. 学習中の技術を5個に増やす
  2. 記録の行を3行に増やす
  3. フォームに「学習時間」の入力欄を追加する

次のステップ

HTML入門 #4 - セマンティックHTMLを使う で、ページ全体の構造を分かりやすくします。

参考リソース

おすすめ記事

← 一覧に戻る
PR
PR
PR
PR