いにしえのフロントエンド入門

今回は、前回「建設予定地」だった index.html を、申請一覧のページに建て替えます。中身は次のとおりです。

• ページの頭 ── ロゴとサイト名、メニュー（申請一覧・承認・ダッシュボード）、ログイン中の利用者
• ページの本体 ── 大見出し、新規申請へのリンク、今月のまとめ、申請の一覧表
• ページの足 ── 著作権の表示

CSS はまだ使わないので、見た目は素朴なままです（服を着せるのは第4回）。そのぶん、どのタグを選ぶかに集中できます。

まずは部品の名前から。HTML は、タグで文字を挟んで「これは何か」を示す言語です。

• 要素 ── 開始タグ・中身・終了タグをまとめたもの。「a 要素」「table 要素」のように呼ぶ
• 属性 ── 要素に付ける追加の情報。開始タグの中に 名前="値" の形で書く
• 空要素 ── 中身を持たない要素。終了タグも書かない（img、br、input、meta など）

どの要素にも付けられる属性のうち、よく使うのはこの三つです。

もう一つ大事なのが、入れ子のきまりです。要素の中に要素を入れるときは、箱の中に箱を入れるように、後から開いたタグを先に閉じます。

前回、</h1> を消したら全部が見出しになったのを覚えているでしょうか。ブラウザは間違いがあってもエラーを出さず、自分なりに木を組み直して表示します。その「自分なり」が、こちらの意図と合っている保証はありません。

ページはふつう、頭（ヘッダー）・メニュー・本体・足（フッター）に分かれます。HTML には、それぞれ専用のタグがあります。こうした区画をランドマーク（目印）と呼びます。

では、div だけで作ったページと、意味のあるタグで作ったページを比べてみましょう。

画面で見る限り、ほとんど同じです。ところが、読み上げソフトなどの支援技術には、まるで違って見えています。ブラウザがページから作る「アクセシビリティの木」を、テストの道具 Playwright で取り出してみました（実際の出力。長い部分は省略）。

# ① div スープ：ほぼ「画像1枚と、ひと続きの文字」
- img
- text: 経費精算システム • 申請一覧 • 承認 • ダッシュボード 新井 太郎（申請者） 申請一覧 ＋ 新 …

# ② 意味のあるタグ：区画・見出し・リスト・表がそのまま伝わる
- banner:
  - paragraph:
    - link "経費精算システム":
      - /url: index.html
  - navigation:
    - list:
      - listitem:
        - link "申請一覧":
          - /url: index.html
      - listitem:
        - link "承認":
          - /url: approve.html
      - listitem:
        - link "ダッシュボード":
          - /url: dashboard.html
  - paragraph: 新井 太郎（申請者）
- main:
  - heading "申請一覧" [level=1]
  - paragraph:
    - link "＋ 新規申請":
      - /url: form.html
  - heading "今月のまとめ" [level=2]
  - list:
    - listitem: 今月の申請：4 件
    - listitem:
      - text: 承認待ちの金額：
      - strong: 32,400 円
    - listitem: 差し戻し：1 件
  - heading "申請の一覧" [level=2]
  - table "2026年10月の申請（新しい順）":
    …

②では、banner（header）、navigation（nav）、main、見出しのレベル、リストの数、表の見出しまでが伝わっています。①では、リンクの役割すら消えてしまいました（span をクリックで動くようにしただけなので、キーボードの Tab キーでもたどり着けません）。

• 読み上げソフトの利用者 ── 見出しを飛び移ってページの全体をつかむ人が多い（WebAIM の調査）。ランドマークも同じように「目次」として使える。div スープでは、頭から全部聞くしかない
• テストの道具 ── 開発ガイドのPlaywright 入門と実践で紹介した getByRole('navigation') のような探し方は、意味のあるタグがあって初めて使える
• AI のツール ── ブラウザを操作する AI も、こうした役割の情報を手がかりに画面を読む。人にとって分かりやすいページは、機械にとっても分かりやすい

第1回で、ブラウザは HTML を読んで DOM という木を作る、と書きました。今回のページを木にすると、こうなります。

インデント（字下げ）をそろえて HTML を書くと、コードの形がそのまま木の形になります。字下げは見た目の飾りではなく、木の形を目で確かめるための道具です。ブラウザで要素を右クリックして「検証」を選ぶと、開発者ツールの Elements タブで、この木を実物で見られます。

見出しには h1 から h6 までの6段があります。大事なのは、大きさではなく、文章の構造で選ぶこと。

かつて HTML の仕様には、section の入れ子から見出しの段を自動で決める仕組み（アウトライン・アルゴリズム）が書かれていましたが、どのブラウザも実装しないまま、2022年に仕様から削除されました。見出しの段は、自分で正しく付けるのが今のきまりです。

メニューを ul で書くのは、「項目が3つある、ひとまとまりのリスト」だからです。読み上げソフトは「リスト、3項目」と先に教えてくれます。<br> で改行を重ねて並べると、この情報は伝わりません。

申請の一覧は、行（1件の申請）と列（申請日・件名・金額・状態）のあるデータです。こういうデータには table を使います。

<table>
  <caption>2026年10月の申請（新しい順）</caption>
  <thead>
    <tr>
      <th scope="col">No.</th>
      <th scope="col">申請日</th>
      <!-- …件名・金額（円）・状態… -->
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0007</td>
      <td><time datetime="2026-10-16">2026-10-16</time></td>
      <!-- …1行に、見出しと同じ数のマス… -->
    </tr>
  </tbody>
</table>

• 状態は文字で書く ── あとで「申請中は黄色、差し戻しは赤」と色を付けても、色だけに頼らず文字を残す。色の見分けにくい人や、白黒で印刷したときにも伝わる
• 金額の列 ── 「金額（円）」と見出しに単位を書けば、各マスは数字だけで済む。右寄せにするのは CSS の仕事（第4回）
• 行の数は決め打ちしない ── 今は手で4行書いているが、第10回からはデータを読み込んで JavaScript で行を作る

リンクは a 要素の href、画像は img 要素の src で、行き先（ファイルの場所）を書きます。書き方は三種類あります。

リンクを新しいタブで開く target="_blank" には、昔は安全のために rel="noopener" を必ず添えましたが、今の主要なブラウザはこれを自動で付けてくれます。ただ、業務システムで勝手にタブが増えるのは嫌がられがち。新しいタブは、外部のサイトや PDF を開くときくらいにしておきましょう。

画像で忘れてはいけないのが alt（代わりの文字）です。画像が見えない人や、画像が読み込めなかったときに、代わりに伝わる文章です。

width と height も書いておきましょう。画像が読み込まれる前から場所が確保されるので、読み込み途中にページがガタッとずれるのを防げます。

ここまでの部品を組み合わせた、今回の完成形です。前回の index.html を、まるごと書き換えます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>申請一覧 | 経費精算システム</title>
</head>
<body>
  <header>
    <p><a href="/"><img src="img/logo.svg" alt="" width="32" height="32"> 経費精算システム</a></p>
    <nav>
      <ul>
        <li><a href="/">申請一覧</a></li>
        <li><a href="approve.html">承認</a></li>
        <li><a href="dashboard.html">ダッシュボード</a></li>
      </ul>
    </nav>
    <p>新井 太郎（申請者）</p>
  </header>

  <main>
    <h1>申請一覧</h1>
    <p><a href="form.html">＋ 新規申請</a></p>

    <section>
      <h2>今月のまとめ</h2>
      <ul>
        <li>今月の申請：4 件</li>
        <li>承認待ちの金額：<strong>32,400 円</strong></li>
        <li>差し戻し：1 件</li>
      </ul>
    </section>

    <section>
      <h2>申請の一覧</h2>
      <table>
        <caption>2026年10月の申請（新しい順）</caption>
        <thead>
          <tr>
            <th scope="col">No.</th>
            <th scope="col">申請日</th>
            <th scope="col">件名</th>
            <th scope="col">金額（円）</th>
            <th scope="col">状態</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>0007</td>
            <td><time datetime="2026-10-16">2026-10-16</time></td>
            <td><a href="detail.html">大阪出張（交通費・宿泊費）</a></td>
            <td>32,400</td>
            <td>申請中</td>
          </tr>
          <tr>
            <td>0006</td>
            <td><time datetime="2026-10-15">2026-10-15</time></td>
            <td><a href="detail.html">客先打ち合わせの電車代</a></td>
            <td>3,830</td>
            <td>承認済み</td>
          </tr>
          <tr>
            <td>0005</td>
            <td><time datetime="2026-10-09">2026-10-09</time></td>
            <td><a href="detail.html">技術書の購入</a></td>
            <td>4,180</td>
            <td>差し戻し</td>
          </tr>
          <tr>
            <td>0004</td>
            <td><time datetime="2026-10-02">2026-10-02</time></td>
            <td><a href="detail.html">勉強会の参加費</a></td>
            <td>3,000</td>
            <td>精算済み</td>
          </tr>
        </tbody>
      </table>
    </section>
  </main>

  <footer>
    <p><small>© 2026 KIJI 経費精算システム（練習用）</small></p>
  </footer>
</body>
</html>

• head の中 ── 前回の charset と title に、meta name="viewport" を足した。スマホで画面の幅に合わせて表示するためのおまじない（詳しくは第5回）。title は「ページ名 | サイト名」の順にすると、タブがたくさん開いていても見分けやすい
• 同じ「経費精算システム」でも ── header の中ではサイト名なので p、main の中のページ名「申請一覧」が h1。どちらを h1 にするかで迷ったら、「このページの題名はどれか」で決める
• 件名のリンク先 ── 今は全部 detail.html。どの申請の詳細を出すかは、第10〜12回で URL に番号を付けて渡す

メニューの「承認」「ダッシュボード」や、リンク先の form.html、detail.html は、まだ存在しません。押すと「ファイルが見つからない」と表示されますが、それで正常です。これから順に建てていきます。

ブラウザは間違いを黙って飲み込んでしまうので、HTML の文法は、専用の検査ツールで確かめます。W3C が公開している Nu Html Checker（validator.w3.org/nu）なら、ファイルを渡すか、コードを貼り付けるだけで使えます。わざと3つ間違えた HTML を検査してみました。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>申請一覧</title>
</head>
<body>
  <header>
    <p><img src="img/logo.svg"> 経費精算システム</p>
  </header>
  <main>
    <h1 id="title">申請一覧</h1>
    <p><strong><a href="form.html">＋ 新規申請</strong></a></p>
    <h2 id="title">申請の一覧</h2>
  </main>
</body>
</html>

結果はこうなりました（実際の出力。長い行は折り返し）。

Error: An “img” element must have an “alt” attribute, except under
       certain conditions. For details, consult guidance on
       providing text alternatives for images.  （9行目）
Error: End tag “strong” violates nesting rules.  （13行目）
Error: No “a” element in scope but a “a” end tag seen.  （13行目）
Error: Duplicate ID “title”.  （14行目）
Warning: The first occurrence of ID “title” was here.  （12行目）
Document checking completed.

8章の完成形を同じツールにかけると、「No errors found（エラーなし）」と出ます。