HTML5/CSS3の授業ノート

1. <ul>【順序なしリスト】
2. <ol>【順序付きリスト】
3. <dl>【説明リスト】

<ul>〜</ul>【順序なしリスト】

Unordered Listの略。リスト項目は<li>タグで指定し、全体を<ul>で囲みます。
「順序のない」リストなので、項目の配置順を変えても文書の意味が変わらないリストに使います。
初期設定では各項目の先頭に「・」がつきます。・を消したり他のマークに変えたりする場合はCSSで設定します。

<ul>に直接入れることができるのは<li>,<script>,<template>要素のみです。<li>の中には他の要素を含めたり、他のリストを入れ子にすることもできます。

<ol>〜</ol>【順序付きリスト】

Ordered Listの略。リスト項目は<li>タグで指定し、全体を<ol>で囲みます。
手順やランキングなど、項目の配置順を変えられないリストに使います。
初期設定では各項目の先頭に「1.,2.,3.…」の連番がつきます。番号を消したり他のマークに変えたりする場合はCSSで設定します。

<ol>に直接入れることができるのは<li>,<script>,<template>要素のみです。<li>の中に他の要素を含めたり、他のリストを入れ子にすることもできます。

<dl>〜</dl>【説明リスト】

Description Listの略。一連の用語を<dt>要素で、その用語に対する説明を<dd>要素で指定し、それらをリスト化したものです。
<dt>要素と<dd>要素は必ずしも一対一ではなく、複数の<dt>要素に対して一つの<dd>要素だったり、その逆だったりすることもあります。
<dl>の中では、<dt>,<dd>を<div>要素で囲むことができます。
複数の一般的な使用例として、用語集の作成やメタデータ (キーと値のペアのリスト) の表示が挙げられます。

以前は定義リスト(Definition List)と言われていましたが、HTML5で変更された要素です。

表(テーブル)は<table><tr><th><td>タグを基本として作成します。

<table>〜</table>

その範囲が表であることを表します。表を構成する各要素の最初と最後に配置します。

<tr>〜</tr>

table rowの略で、行を定義します。横一列分のデータの最初と最後に配置します。
<table>の子要素としてだけ使えます。

<th>〜</th>

tabele headerの略で、行や列の見出し(ヘッダー)のセルを定義します。見出しとして定義されたセルの内容は一般的には太字、センタリングで表示されます。
<tr>の子要素としてだけ使えます。

<td>〜</td>

table dataの略で、表に含まれる個々のセルを定義します。セルに入れる内容をこのタグ内に記述します。
<tr>の子要素としてだけ使えます。

上の例ではセルの区切りがわかりやすいように罫線を表示しています。
以前はborder属性を使用していましたが、HTML5では廃止されたため、CSSで指定するようにします。

他にもいくつかのタグがあります。

<caption>〜</caption>

表のタイトルを指定します。
タイトルを付ける場合、<table>タグ内の一番上に一つだけ配置できます。
<table>タグの中に記述しますが、表示上はtableの外側になります。

表の下に表示したい場合でも<table>タグ内の一番上に記述します。表示位置はCSSで指定します。

<thead>〜</thead>

表の列の見出しを定義する行のセットを定義します。
この中に<tr><th>が入ります。

セルの結合

td要素やth要素に属性を追加すると、セルを結合することができます。

colspan="…"(colspan属性)

セルをいくつ結合させるか(横方向)を指定します。1〜999までの整数を指定できます。

rowspan="…"(rowspan属性)

セルをいくつ結合させるか(縦方向)を指定します。1〜65534までの整数を指定できます。