Day 5: リストとテーブル
今日学ぶこと
- 順序なしリスト、順序付きリスト、説明リスト
- リストのネスト（入れ子）
- テーブルの基本構造
- テーブルの結合とグループ化
順序なしリスト（<ul>）
項目の順序が重要でないリストには<ul>を使います。
<h2>買い物リスト</h2>
<ul>
<li>牛乳</li>
<li>パン</li>
<li>卵</li>
<li>バター</li>
</ul>
順序付きリスト（<ol>）
順序が重要なリストには<ol>を使います。
<h2>カレーの作り方</h2>
<ol>
<li>野菜と肉を一口大に切る</li>
<li>鍋で肉と野菜を炒める</li>
<li>水を加えて煮込む</li>
<li>カレールーを溶かす</li>
<li>弱火で10分煮込む</li>
</ol>
<ol> の属性
| 属性 | 説明 | 例 |
|---|---|---|
start |
開始番号 | start="5" |
reversed |
逆順 | reversed |
type |
番号の種類 | type="A", type="i" |
<ol type="A" start="3">
<li>項目C</li>
<li>項目D</li>
<li>項目E</li>
</ol>
説明リスト（<dl>）
用語と定義のペアには<dl>を使います。
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language。Webページの構造を定義する。</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets。Webページの見た目を装飾する。</dd>
<dt>JavaScript</dt>
<dd>Webページに動的な機能を追加するプログラミング言語。</dd>
</dl>
| 要素 | 意味 |
|---|---|
<dl> |
Description List（説明リスト） |
<dt> |
Description Term（用語） |
<dd> |
Description Details（説明） |
flowchart TB
subgraph Lists["3種類のリスト"]
UL["<ul> 順序なし<br>• 項目A<br>• 項目B"]
OL["<ol> 順序付き<br>1. 手順1<br>2. 手順2"]
DL["<dl> 説明<br>用語: 定義"]
end
style UL fill:#3b82f6,color:#fff
style OL fill:#22c55e,color:#fff
style DL fill:#f59e0b,color:#fff
リストのネスト
リストの中にリストを入れることができます。
<ul>
<li>フロントエンド
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>バックエンド
<ul>
<li>Python</li>
<li>Node.js</li>
<li>Java</li>
</ul>
</li>
</ul>
ルール: ネストしたリストは、
<li>要素の内側に配置します。
テーブルの基本
基本構造
<table>
<tr>
<th>名前</th>
<th>年齢</th>
<th>職業</th>
</tr>
<tr>
<td>田中太郎</td>
<td>28</td>
<td>エンジニア</td>
</tr>
<tr>
<td>佐藤花子</td>
<td>32</td>
<td>デザイナー</td>
</tr>
</table>
| 要素 | 意味 |
|---|---|
<table> |
テーブル全体 |
<tr> |
Table Row（行） |
<th> |
Table Header（見出しセル） |
<td> |
Table Data（データセル） |
flowchart TB
subgraph Table["テーブル構造"]
T["<table>"]
TR1["<tr> ヘッダー行"]
TR2["<tr> データ行1"]
TR3["<tr> データ行2"]
TH1["<th>名前"]
TH2["<th>年齢"]
TD1["<td>田中"]
TD2["<td>28"]
end
T --> TR1 --> TH1
TR1 --> TH2
T --> TR2 --> TD1
TR2 --> TD2
T --> TR3
style T fill:#3b82f6,color:#fff
style TR1 fill:#8b5cf6,color:#fff
style TR2 fill:#22c55e,color:#fff
style TR3 fill:#22c55e,color:#fff
テーブルのグループ化
<thead>, <tbody>, <tfoot>
<table>
<caption>2025年 四半期売上</caption>
<thead>
<tr>
<th>四半期</th>
<th>売上（万円）</th>
</tr>
</thead>
<tbody>
<tr>
<td>Q1</td>
<td>1,200</td>
</tr>
<tr>
<td>Q2</td>
<td>1,500</td>
</tr>
<tr>
<td>Q3</td>
<td>1,800</td>
</tr>
<tr>
<td>Q4</td>
<td>2,100</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>合計</th>
<td>6,600</td>
</tr>
</tfoot>
</table>
| 要素 | 用途 |
|---|---|
<caption> |
テーブルのタイトル |
<thead> |
ヘッダー部分 |
<tbody> |
データ部分 |
<tfoot> |
フッター部分（合計行など） |
セルの結合
列の結合（colspan）
<table>
<tr>
<th colspan="2">名前</th>
<th>年齢</th>
</tr>
<tr>
<td>姓: 田中</td>
<td>名: 太郎</td>
<td>28</td>
</tr>
</table>
行の結合（rowspan）
<table>
<tr>
<th>カテゴリ</th>
<th>商品</th>
<th>価格</th>
</tr>
<tr>
<td rowspan="2">飲料</td>
<td>コーヒー</td>
<td>300円</td>
</tr>
<tr>
<td>紅茶</td>
<td>250円</td>
</tr>
</table>
テーブルのアクセシビリティ
scope 属性
<table>
<tr>
<th scope="col">商品</th>
<th scope="col">価格</th>
<th scope="col">在庫</th>
</tr>
<tr>
<th scope="row">りんご</th>
<td>100円</td>
<td>50個</td>
</tr>
<tr>
<th scope="row">みかん</th>
<td>80円</td>
<td>120個</td>
</tr>
</table>
| scope値 | 意味 |
|---|---|
col |
その列のヘッダー |
row |
その行のヘッダー |
ポイント:
scope属性をつけることで、スクリーンリーダーがテーブルの構造を正しく読み上げられます。
実践: 時間割ページ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>時間割</title>
</head>
<body>
<h1>今週の時間割</h1>
<table>
<caption>プログラミングスクール 第1週</caption>
<thead>
<tr>
<th scope="col">時間</th>
<th scope="col">月曜</th>
<th scope="col">水曜</th>
<th scope="col">金曜</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">10:00-12:00</th>
<td>HTML基礎</td>
<td>CSS基礎</td>
<td>JavaScript基礎</td>
</tr>
<tr>
<th scope="row">13:00-15:00</th>
<td>HTML演習</td>
<td>CSS演習</td>
<td>JS演習</td>
</tr>
<tr>
<th scope="row">15:00-17:00</th>
<td colspan="3">自習・質問タイム</td>
</tr>
</tbody>
</table>
<h2>学習の進め方</h2>
<ol>
<li>午前中の講義で概念を理解する</li>
<li>午後の演習で手を動かす</li>
<li>自習時間で復習する</li>
</ol>
<h2>用語集</h2>
<dl>
<dt>HTML</dt>
<dd>Webページの構造を作るマークアップ言語</dd>
<dt>CSS</dt>
<dd>Webページの見た目を装飾するスタイルシート言語</dd>
<dt>JavaScript</dt>
<dd>Webページに動きを付けるプログラミング言語</dd>
</dl>
</body>
</html>
まとめ
| 概念 | 説明 |
|---|---|
<ul> |
順序なしリスト |
<ol> |
順序付きリスト |
<dl> |
説明リスト |
<table> |
テーブル |
<thead>/<tbody>/<tfoot> |
テーブルのグループ化 |
colspan / rowspan |
セルの結合 |
重要ポイント
- リストの種類はコンテンツの性質で選ぶ
- テーブルは表形式のデータにのみ使う（レイアウトには使わない）
<caption>とscopeでアクセシビリティを向上させる- テーブルのグループ化で構造を明確にする
練習問題
問題1: 基本
好きな料理のレシピを順序付きリストで、材料を順序なしリストで表示するページを作成してください。
問題2: 応用
5教科の成績表をテーブルで作成してください。<thead>, <tbody>, <tfoot>を使い、フッターに平均点を表示しましょう。
チャレンジ問題
colspanとrowspanを両方使った、複雑なスケジュール表を作成してください。
参考リンク
次回予告: Day 6では「フォームの基礎」について学びます。ユーザーからの入力を受け取るフォームの作り方を学びましょう。