HTML/CSS：リストと表

ul の中に li が3個

<ul> の中に <li> を3つ並べる。

<ul>
  <li>コーヒー</li>
  <li>紅茶</li>
  <li>ジュース</li>
</ul>

ul は unordered list（順序なしリスト）。並び順に意味が無い項目の列挙に使う。既定では黒丸が付く。

解答 == B

ordered list（順序ありリスト）。

B

順序に意味があるなら ol。番号が自動で振られ、項目を入れ替えても番号がずれない。

ol の中に li が3個

<ol> の中に <li> を並べる。番号は自動で付く。

<ol>
  <li>お湯を沸かす</li>
  <li>豆を挽く</li>
  <li>抽出する</li>
</ol>

番号は自分で書かない。ブラウザが自動で振るので、途中に項目を追加しても番号がずれない。

<ul>
  <____>項目1</____>
  <____>項目2</____>
</ul>

li が2個

list item の略。2文字。

li

li は必ず ul か ol の中に置く。単独で使うことはできない。

解答 == B

table header cell の略。

B

th は「これは見出しである」という意味を持つ。太字・中央寄せになるのは結果であって、目的ではない。

th が2個、td が2個

table の中に tr を2つ。1行目は th、2行目は td を使う。

<table>
  <tr>
    <th>商品</th>
    <th>価格</th>
  </tr>
  <tr>
    <td>ノートPC</td>
    <td>128,000円</td>
  </tr>
</table>

tr が行、th/td がセル。行を先に作り、その中にセルを並べる——この入れ子の順序が表の基本。

<table>
  <____>
    <td>A</td>
    <td>B</td>
  </____>
</table>

tr が1個、td が2個

table row の略。2文字。

tr

tr は1行を表す。この中に th や td を並べることで、横一列が作られる。

解答 == B

col は column（列）の略。

B

colspan は横方向の結合。縦方向は rowspan。結合した分、その行に書くセルの数を減らす必要がある。

li が3個、ul の中に ul がある

li の中に ul を入れる。閉じる位置に注意。

<ul>
  <li>ドリンク
    <ul>
      <li>ホット</li>
      <li>アイス</li>
    </ul>
  </li>
</ul>

子のリストは li の中に入れる。ul の直下に ul を置くのは誤りで、必ず li を経由する。

dt が「HTML」、dd が説明文

<dl> の中に <dt>（用語）と <dd>（説明）を並べる。

<dl>
  <dt>HTML</dt>
  <dd>Webページの骨組みを作る言語</dd>
</dl>

dl は definition list（定義リスト）。用語集やFAQなど、「項目と説明」が対になる情報に適している。

li が3個、それぞれの中に a がある

li の中に a を入れる。これがメニューの標準的な作り方。

<ul>
  <li><a href="index.html">ホーム</a></li>
  <li><a href="service.html">サービス</a></li>
  <li><a href="about.html">会社概要</a></li>
</ul>

メニューは ul + li + a で作るのが標準。CSSで横並びにすれば（HT13）、一般的なナビゲーションバーになる。

th が3個、td が6個、tr が3個

1行目に th を3つ、2行目と3行目に td を3つずつ並べる。

<table>
  <tr>
    <th>プラン</th>
    <th>月額</th>
    <th>容量</th>
  </tr>
  <tr>
    <td>ベーシック</td>
    <td>5,000円</td>
    <td>10GB</td>
  </tr>
  <tr>
    <td>プロ</td>
    <td>12,000円</td>
    <td>100GB</td>
  </tr>
</table>

各行のセル数を揃えるのが基本。列数がずれると表示が崩れるので、書いたあとに数を確認する習慣を持つ。

h2 と ol の中に li が3個

見出しの下に ol を配置する。

<h2>会員登録の手順</h2>

<ol>
  <li>メールアドレスを入力</li>
  <li>認証メールを確認</li>
  <li>パスワードを設定</li>
</ol>

手順は必ず ol を使う。ul で書くと「順番はどうでもよい」という意味になってしまい、読み手を混乱させる。

td が5個、colspan=2 のセルがある

最終行は td を1つだけにして colspan="2" を付ける。

<table>
  <tr>
    <td>ノートPC</td>
    <td>128,000円</td>
  </tr>
  <tr>
    <td>マウス</td>
    <td>3,200円</td>
  </tr>
  <tr>
    <td colspan="2">合計 131,200円</td>
  </tr>
</table>

結合した行はセル数が減る。2列を1つにまとめたので、その行の td は1つだけになる——ここを間違えると表が崩れる。

caption・thead・tbody がそれぞれ存在する

table の直後に caption、次に thead（見出し行）、その後に tbody（データ行）を書く。

<table>
  <caption>在庫一覧</caption>
  <thead>
    <tr>
      <th>商品</th>
      <th>在庫</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ノートPC</td>
      <td>5</td>
    </tr>
    <tr>
      <td>マウス</td>
      <td>42</td>
    </tr>
  </tbody>
</table>

thead と tbody で「見出し部分」と「データ部分」を分ける。行数が多い表では、見出しだけ固定表示するといったことも可能になる。

すべての要素の数と構造が一致

③は li の中に ul を入れる（li は「コーヒー」「ホット」「アイス」「紅茶」の4つ）。⑤の結合行は td を1つだけにして colspan="2" を付ける。⑦の li は3つ。合計 li は 4+1(結合行ではない) …ではなく ③4つ ＋ ⑦3つ ＝ 7つ。加えて…実際に数えて確認すること。

<h1>メニュー</h1>

<h2>ドリンク</h2>
<ul>
  <li>コーヒー
    <ul>
      <li>ホット</li>
      <li>アイス</li>
    </ul>
  </li>
  <li>紅茶</li>
</ul>

<h2>フードメニュー</h2>
<table>
  <caption>本日のおすすめ</caption>
  <thead>
    <tr>
      <th>商品</th>
      <th>価格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>パンケーキ</td>
      <td>800円</td>
    </tr>
    <tr>
      <td>サンドイッチ</td>
      <td>650円</td>
    </tr>
    <tr>
      <td colspan="2">セットでご注文の場合は100円引き</td>
    </tr>
  </tbody>
</table>

<h2>ご注文の流れ</h2>
<ol>
  <li>レジで注文</li>
  <li>番号札を受け取る</li>
  <li>席でお待ちください</li>
</ol>

3種類のリスト構造が、それぞれ適切な場面で使われている。ドリンクは順序に意味がないので ul、注文の流れは順序が重要なので ol、フードは価格という対応データがあるので table——「どう見せたいか」ではなく「情報がどういう性質か」でタグを選ぶのがHTMLの考え方だ。

入れ子のリストにも注意点がある。「ホット」「アイス」は「コーヒー」の li の中に入っている。ul の直下に ul を置くのは構造として誤りで、必ず li を経由する。

そして最終行の colspan="2" だ。この行は2列を1つにまとめているので、td は1つしか書かない。もし td を2つ書いてしまうと、その行だけ3列になり表が崩れる。結合したら、その分セルを減らす——単純だが間違えやすい規則。

ここまででHTMLの「文章を組み立てる」部分はほぼ揃った。次章では意味のあるタグ（セマンティック）を学び、ページ全体の構造を正しく伝える方法を扱う。