【情報リテラシー】第10回 HTML -Webページ作成2-
リストの要素
同じような項目を並べる場合はリストを使用するとよい。 HTML では順序なしリスト、順序付きリスト、説明リストという3種類のリスト要素がある。
| 要素 | タグ | 意味 | 置ける場所 | writerとの対応 |
|---|---|---|---|---|
| ul | <ul>...</ul> | 順序なしリストの要素である。 | body 要素内 | 箇条書き |
| ol | <ol>...</ol> | 順序付きリストの要素である。 | body 要素内 | 番号付きリスト |
| li | <li>...</li> | ul 要素や li 要素の中で使う項目を記述するための要素である。 | ul 要素内 ol 要素内 | |
| dl | <dl>...</dl> | 説明リストの要素である。 | body 要素内 | |
| dt | <dt>...</dt> | dl 要素の中で用語や名前を記述するための要素である。 | dl 要素内 | |
| dd | <dd>...</dd> | dl 要素の中で説明や定義を記述するための要素である。 | dd 要素内 |
順序なしリスト
順序なしリスト とは、行頭に「・」などの記号を入れて項目を表して並べたリスト、つまり箇条書きである。 HTML では順序なしリストの要素を使用すると自動的に箇条書きになる。
順序なしリストは ul 要素で指定する。
開始タグは「<ul>」、終了タグは「</ul>」である。
順序なしリストの各項目は ul 要素の中で li 要素で指定する。
開始タグは「<li>」、終了タグは「</li>」である。
ただし、終了タグ「</li>」は省略できる。
具体的には以下のように記述する。 インデントをすることで開始タグから終了タグの範囲が分かりやすくなる。 インデントはタグの入力時にある程度自動で行われるが、手動で行いたい場合はインデントを行いたい行で Tab を押す。
<ul> <li>項目A</li> <li>項目B</li> <li>項目C</li> </ul>
Firefox では以下のように表示される。
- 項目A
- 項目B
- 項目C
順序付きリスト
順序付きリストとは、行頭に数字などを入れて項目に番号を付けて並べたリスト、つまり番号付きリストである。 HTML では順序付きリストの要素を使用すると自動的に連番が付けられて番号付きリストになる。
順序付きリスト ol 要素で指定する。
開始タグは「<ol>」、終了タグは「</ol>」である。
順序付きリストの各項目は ol 要素の中で li 要素で指定する。
開始タグは「<li>」、終了タグは「</li>」である。
ただし、終了タグ「</li>」は省略できる。
具体的には以下のように記述する。
<ol> <li>項目A</li> <li>項目B</li> <li>項目C</li> </ol>
Firefox では以下のように表示される。
- 項目A
- 項目B
- 項目C
説明リスト
説明リストは、いくつかの単語を並べて、それらの意味を逐一説明するような書き方をするときに使用する。
例えば、以下のような説明的な書き方をする場合である。
林檎
丸くて赤い果物で、酸味と甘みがある。
梨
丸くて黄色い果物で、和梨・洋梨・中国梨がある。
まず、用語や名前があり、その下にインデントされて説明や定義がある。
説明リストは dl 要素で指定する。
開始タグは「<dl>」、終了タグは「</dl>」である。
dl 要素の中で用語や名前は dt 要素、その説明や定義は dd 要素で指定する。
開始タグは「<dt>」「<dd>」、終了タグは「</dt>」「</dd>」である。
ただし、終了タグ「</dt>」「</dd>」は省略できる。
具体的には以下のように記述する。
<dl> <dt>林檎</dt> <dd><p>丸くて赤い果物で、酸味と甘みがある。</p></dd> <dt>梨</dt> <dd><p>丸くて黄色い果物で、和梨・洋梨・中国梨がある。</p></dd> </dl>
リストのレベル
li 要素の中に ul 要素や ol 要素を入れることで下のレベルのリストにすることができる。
例1
<ul> <li>項目A <ul> <li>項目A-1</li> <li>項目A-2</li> </ul> </li> <li>項目B</li> </ul>
Firefox では以下のように表示される。
- 項目A
- 項目A-1
- 項目A-2
- 項目B
例2
<ol> <li>項目A <ul> <li>項目A-1</li> <li>項目A-2</li> </ul> </li> <li>項目B</li> </ol>
Firefox では以下のように表示される。
- 項目A
- 項目A-1
- 項目A-2
- 項目B
リストの例
順序なしリストと順序付きリストを含む文書を作成してみよう。
~/public_html/ に list.html という名前のファイルを作成する。
1. HTMLの作成
emacs で Ctrl+X Ctrl+F と連続してキー操作し、「Find File:」の次に「~/public_html/list.html」と入力して Enter を押す。
U:——— *scratch*
ファイルを開いたら、そこに以下のように入力する（行番号は不要）。
2. HTMLの保存
emacs で Ctrl+X Ctrl+S と連続してキー操作し、ファイルを保存する。
3. Firefoxで確認
保存したら Firefox のアドレスバーに次の URL を入力してファイルの内容が表示されるか確認してみよう。
http://roy.e.koeki-u.ac.jp/~ユーザ名/list.html
小テスト
Moodle Server（非公式） で第10回の小テストを受験しなさい。
表の要素
一つの対象に対して複数の項目や観測値を持つ多次元データは表（テーブル）で表した方が分かりやすい。 HTML では表を入れるために table 要素を使用する。
| 要素 | タグ | 意味 | 置ける場所 | writerとの対応 |
|---|---|---|---|---|
| table | <table>...</table> | 表の要素である。 | body 要素内 | 表 |
| caption | <caption>...</caption> | 表にキャプションを付けるための要素である。 | table 要素内 | キャプション |
| tr | <tr>...</tr> | table 要素の中で行を記述するための要素である。 | table 要素内 | |
| th | <th>...</th> | tr 要素の中で表頭か表側のセルを記述するための要素である。 | tr 要素内 | |
| td | <td>...</td> | tr 要素の中でセルを記述するための要素である。 | tr 要素内 |
table要素の基本構成
表の開始と終了は table 要素で指定する。
開始タグは「<table>」、終了タグは「</table>」である。
table 要素の中は以下のような基本構成になる。
<table> <tr><th>表頭1</th><th>表頭2</th>...</tr> <tr><td>項目1-1</td><td>項目2-1</td>...</tr> <tr><td>項目2-2</td><td>項目2-2</td>...</tr> ... </table>
表の各行は tr 要素で指定する。
開始タグは「<tr>」、終了タグは「</tr>」である。
ただし、終了タグ「</tr>」は省略できる。
行内のセルは th 要素か td 要素で指定する。
th 要素は表頭か表側にのみ使用する。
開始タグは「<th>」「<td>」、終了タグは「</th>」「</td>」である。
ただし、終了タグ「</th>」「</td>」は省略できる。
表の例
例えば、次のような表を作ってみよう。
| 佐藤錦 | 山形県 | ６月中旬から７月初旬 |
| ジュノハート | 青森県 | ７月上旬から中旬 |
横にならんだ1行は「<tr>」「</tr>」で囲む。
1行の中は3つのセルがならんでおり、それぞれは「<td>」「</td>」で囲む。
例えば、1行目は次のようになる。
<tr> <td>佐藤錦</td> <td>山形県</td> <td>６月中旬から７月初旬</td> </tr>
分かりやすいように適宜改行をしている。 2行目も同じように作る。
最後に全ての要素を「<table>」「</table>」で囲む。
<table> <tr> <td>佐藤錦</td> <td>山形県</td> <td>６月中旬から７月初旬</td> </tr> <tr> <td>ジュノハート</td> <td>青森県</td> <td>７月上旬から中旬</td> </tr> </table>
以上のことを実際に HTML 文書で作成してみよう。
「~/public_html/table.html」に以下のように入力して保存する。
保存したら Firefox のアドレスバーに次の URL を入力してファイルの内容が表示されるか確認してみよう。
http://roy.e.koeki-u.ac.jp/~ユーザ名/table.html
枠線
Firefox で table.html を実際に表示してみると、次のように表示されるはずである。
佐藤錦 山形県 ６月中旬から７月初旬 ジュノハート 青森県 ７月上旬から中旬
table 要素では、指示しない限り枠線は表示されない。
枠線を表示するためには、スタイルシートを使用する。 スタイルシートについては、あとで詳しく説明する。
とりあえず、table.html で head 要素の中の title 要素の下に以下のように style 要素を挿入する（黄色の部分）。
<head> <meta charset="UTF-8"> <title>Table Sample</title> <style>table, th, td {border: solid; border-collapse: collapse;}</style> </head>
挿入したら Firefox のリロードボタンで再読込して枠線が引けているか確認する。
表頭
枠線を引いた表は次のようになる。
| 佐藤錦 | 山形県 | ６月中旬から７月初旬 |
| ジュノハート | 青森県 | ７月上旬から中旬 |
しかし、このような表では、各列が何を意味するのか分からない。
通常、表の一番上の行には各項目の説明（見出し）を入れる。 これを表頭という。
| 品種 | 産地 | 収穫期 |
|---|---|---|
| 佐藤錦 | 山形県 | ６月中旬から７月初旬 |
| ジュノハート | 青森県 | ７月上旬から中旬 |
同様に表の一番左に入れる見出しは、表側という。
表頭や表側を入れるには th 要素を使用する。 th 要素のセルは表頭や表側とみなされる。
表頭を入れるには td 要素と同じように th 要素を使って table 要素の一番上の行に以下のように挿入する。
<table> <tr> <th>品種</th> <th>産地</th> <th>収穫期</th> </tr> <tr> <td>佐藤錦</td> <td>山形県</td> <td>６月中旬から７月初旬</td> </tr> <tr> <td>ジュノハート</td> <td>青森県</td> <td>７月上旬から中旬</td> </tr> </table>
挿入したら Firefox でリロードボタンをクリックして再読込して枠線が引けているか確認する。
キャプション
writer では図表にはキャプションを付けることができた。 HTML 文書で表にキャプションを付けるには caption 要素を使用する。
caption 要素は table 要素の中の一番最初に入れる。
開始タグは「<caption>」、終了タグは「</caption>」である。
キャプションを入れて完成した table.html は以下である。
課題
timetable.html というファイル名でS2Q に自分が履修している授業の時間割を table 要素を利用した HTML ファイルで作成しなさい。
作成例
table.html を参考にし、赤で書かれた指示に従うこと。
「~/public_html/timetable.html」というファイルは Firefox では以下の URL で見ることができる。
http://roy.e.koeki-u.ac.jp/~ユーザ名/timetable.html
作成した HTML ファイルはMoodle Server（非公式） の第10回の課題に提出すること。
- 締め切り：2023年7月1日（土）20時