HTML/リスト
出典: フリー教科書『ウィキブックス（Wikibooks）』
HTMLでその部分がリストであることを示す場合、ul要素やli要素などを用いる。リスト要素によって記述された部分は、一般的なブラウザだと行頭にインデントがとられ、各項目は強制的に改行される。また、行頭には黒丸や数字が表示されるものもあるが、ブラウザの種類やウェブページ側の設定によって黒丸や数字以外のものが表示される場合もある。
目次 |
[編集] 順不同リスト
順不同リストはul要素（Unordered Listの略）を用いる。個々の項目は、ul要素の開始・終了タグの間にli要素（List Itemの略）を用いて記す。リストの行頭には標準だと黒丸が表示されるが、Wikibooksの標準スタイル (Monobook) では四角いマークが表示されるようになっている。
[編集] 入力例
<ul> <li>ごはん</li> <li>味噌汁</li> <li>焼き鮭</li> </ul>
[編集] 表示例
- 御飯
- 味噌汁
- 焼き鮭
[編集] 詳細設定
[編集] マークの種類を変える
type属性を加えることでリストマークの種類を変更することが出来る。ulに指定すればリスト全体のマークを、liに指定すれば個別項目のマークを変更可能である。ただし正式なHTMLの仕様としては非推奨であるため、CSSを使うことが望ましい。また、リストマークのデザインはブラウザによって多少異なる場合がある。
- disc
- 黒丸
- circle
- 白丸
- square
- 四角型
[編集] 序列リスト
各項目の順番を明示するリストはol要素(Ordered List)を用いる。一般的なウェブブラウザでは1, 2, 3, ... や A, B, C, ... などといった描画をされる事が多い。個々の項目は、ul要素の時と同様、li要素を用いる。
[編集] 入力例
<ol> <li>○○駅で電車に乗る</li> <li>××駅で乗り換える</li> <li>△△駅で降りる</li> </ol>
[編集] 表示例
- ○○駅で電車に乗る
- ××駅で乗り換える
- △△駅で降りる
[編集] 詳細設定
[編集] 番号の種類を変える
type属性を変更することにより番号の種類を変更することが出来る。ただし標準仕様に従う場合はul要素の場合と同様CSSを用いることが望ましい。
- 1
- 算用数字 (1, 2, 3, ...)
- a
- アルファベット小文字 (a, b, c, ...)
- A
- アルファベット大文字 (A, B, C, ...)
- i
- ローマ数字小文字 (i, ii, iii, ...)
- I
- ローマ数字大文字 (I, II, III, ...)
[編集] 数字の順番を変える
ol要素にvalue属性を指定すると開始番号を変更可能である。例えばvalue属性に5を指定するとli要素には上から順番に5, 6, 7, ...という番号が振られる。また、個別のli属性にstart属性を変更することでリストの途中から開始番号を変更することが出来る。例えばリスト中の3番目にあるリストに9というvalue属性値を付与した場合、そのリストは三番目の項目から9, 10, 11, ...という番号が振られるようになる。
[編集] 定義リスト
定義リストはdl要素（Definition Listの略）を用いる。dl要素は、ul要素やol要素と違い、li要素ではなくdt要素とdd要素という2つの要素から構成される。一般的なブラウザでは、行頭にリストマークは表示されないが、dd要素にインデントをとることが多い。なお、ウィキブックスの標準スタイル (Monobook) だとdt要素は太字で表示されるが、他の環境でも太字で表示されるとは限らない。
dt要素は定義される用語 (Definition Term) を示し、dd要素は用語の解説 (Definition Description) を示すが、必ずそのとおりに使わなければならないという規定はない。dl要素にはdt要素とdd要素のみ含むことが出来、dt要素はインライン要素、dd要素はブロックレベル要素を含むことが出来る。次の例は、ウィキブックスの姉妹プロジェクトを説明している。
[編集] 記述例
<dl> <dt>メタウィキ</dt> <dd>全プロジェクトの補助的プロジェクトです。</dd> <dt>ウィキペディア</dt> <dd>百科事典を作成するプロジェクトです。</dd> <dt>ウィクショナリー</dt> <dd>辞書・シソーラス作成プロジェクトです。</dd> </dl>
[編集] 表示例
- メタウィキ
- 全プロジェクトの補助的プロジェクトです。
- ウィキペディア
- 百科事典を作成するプロジェクトです。
- ウィクショナリー
- 辞書・シソーラス作成プロジェクトです。
