HTML/リスト

出典: フリー教科書『ウィキブックス(Wikibooks)』

箇条書きを書きたい場合など、下記の節のようにリスト(List)を定義します[1]

概要[編集]

リストには「順不同リスト」「序列リスト」と「定義リスト」があります。 このうち「順不同リスト」と「序列リスト」のマークアップは共通していますが「定義リスト」のマークアップは2つとは異なります。

「順不同リスト」と「序列リスト」では

<リスト要素>
  <li>ごはん</li>
  <li>味噌汁</li>
  <li>焼き魚</li>
</リスト要素>

のように、内部をLI要素を用いて各要素を指定し外側のリスト要素(UL要素など)で表示方法を指定します。 なお、内部のLI要素の冒頭の「l」は、小文字のLですので注意してください[2]。 内部のLI要素によって記述された部分は、ウェブブラウザのユーザーエージェント・スタイルシートでは行頭にインデントがとられ各項目は強制的に改行されます。 また、行頭には黒丸や数字が表示されるものもありますがウェブブラウザの種類やウェブページ側の設定によって黒丸や数字以外のものが表示される場合もあります。

順不同リスト[編集]

UL要素はアイテムのリストを表しますが、アイテムの順序は重要ではありません。 UL要素の内容にはLI要素しか許されません。

入力例[編集]

<ul>
  <li>ごはん</li>
  <li>味噌汁</li>
  <li>焼き魚</li>
</ul>

表示例[編集]

  • ごはん
  • 味噌汁
  • 焼き魚

リストの入れ子[編集]

リストの中にリストを入れることもできます。

この際、内側のリストはインデントされる事に注意してください。

<ul>
  <li>ごはん</li>
  <li>味噌汁</li>

<ul>
<li>赤味噌</li>
<li>白味噌</li>
</ul>

  <li>焼き魚</li>
</ul>


表示結果の例

  • ごはん
  • 味噌汁
    • 赤味噌
    • 白味噌
  • 焼き魚


普通の実効環境では、インデントが適用されるのはリスト項目だけでなく、内側のulタグで囲まれた部分全体になります。 たとえば、

ソース例

<ul>
  <li>ごはん</li>
  <li>味噌汁</li>

<ul>
<li>赤味噌</li>あああ<br>あああああ<br>ああ<br>ああああ
<li>白味噌</li>
</ul>

  <li>焼き魚</li>
</ul>

とすると、

実行結果
  • ごはん
  • 味噌汁
    • 赤味噌
    • あああ
      あああああ
      ああ
      ああああ
    • 白味噌
  • 焼き魚

リスト中での追記などのインデント[編集]

リスト中でリスト項目外にテキストを書いても、特に追加のインデントなどは無いので、項目の備考などを書きたい場合には、そのままでは不便です。

そこで、下記のように div タグによるスタイル指定などを用いて、インデントが出来ます。(リストに限らず、一般的にHTMLでインデントをする場合の手法です。)

ソース例

<ul>
  <li>ごはん</li>
  <li>味噌汁</li>
  
<ul>
<li>赤味噌</li><div style="margin-left: 1em;">大豆が多め</div>
<li>白味噌</li><div style="margin-left: 1em;">米が多め</div>
</ul>
  
  <li>焼き魚</li>
</ul>
実行結果
  • ごはん
  • 味噌汁
    • 赤味噌
    • 大豆が多め
    • 白味噌
    • 米が多め
  • 焼き魚


詳細設定[編集]

リストマークの種類を変える[編集]

CSSのlist-style-typeプロパティをUL要素に適用すると、リスト全体のリストマークの種類を変更することが出来ます。 CSSのlist-style-typeプロパティをUL要素の子要素のLI要素に適用すると、個々のリスト要素のリストマークの種類を変更することが出来ます。 リストマークのデザインや使えるリストマークの種類はウェブブラウザによって異なる場合があります。

list-style-type
disc
黒丸
list-style-type
circle
白丸
list-style-type
square
四角型

序列リスト[編集]

OL要素は、アイテムのリストを表し、アイテムが意図的に順序付けられており順序を変更するとドキュメントの意味が変わるようなケースに用いられます。 一般的なウェブブラウザでは1, 2, 3, ... や A, B, C, ... とレンダリングされる事が多く、個々の項目はUL要素の時と同様LI要素を用います。

入力例[編集]

<ol>
  <li>○○駅で電車に乗る</li>
  <li>××駅で乗り換える</li>
  <li>△△駅で降りる</li>
</ol>

表示例[編集]

  1. ○○駅で電車に乗る
  2. ××駅で乗り換える
  3. △△駅で降りる

詳細設定[編集]

番号の種類を変える[編集]

CSSのlist-style-typeプロパティをOL要素に適用するとリスト全体の列挙表現を変更することが出来ます。 CSSのlist-style-typeプロパティをOL要素の子要素のLI要素に適用すると、個々のリスト要素の列挙表現を変更することが出来ます。 列挙表現のデザインや使える列挙表現はウェブブラウザによって異なる場合があります。

list-style-type: decimal
  1. 算用数字
  2. 算用数字
  3. 算用数字
list-style-type: lower-latin
  1. アルファベット小文字
  2. アルファベット小文字
  3. アルファベット小文字
list-style-type: upper-latin
  1. アルファベット大文字
  2. アルファベット大文字
  3. アルファベット大文字
list-style-type: lower-roman
  1. ローマ数字小文字
  2. ローマ数字小文字
  3. ローマ数字小文字
list-style-type: upper-roman
  1. ローマ数字大文字
  2. ローマ数字大文字
  3. ローマ数字大文字
list-style-type: lower-greek
  1. ギリシャ文字小文字
  2. ギリシャ文字小文字
  3. ギリシャ文字小文字
list-style-type: upper-greek
  1. ギリシャ文字大文字
  2. ギリシャ文字大文字
  3. ギリシャ文字大文字
list-style-type: cjk-decimal
  1. 漢数字
  2. 漢数字
  3. 漢数字
list-style-type: katakana-iroha
  1. 片仮名イロハ
  2. 片仮名イロハ
  3. 片仮名イロハ
list-style-type: cjk-earthly-branch
  1. 十二支
  2. 十二支
  3. 十二支
list-style-type: cjk-heavenly-stem
  1. 十干
  2. 十干
  3. 十干
list-style-type: thai
  1. タイ文字
  2. タイ文字
  3. タイ文字

数字の順番を変える[編集]

OL要素にvalue属性を指定すると開始番号を変更可能である。例えばvalue属性に5を指定するとLI要素には上から順番に5, 6, 7, ...という番号が振られる。また、個別のli属性にstart属性を変更することでリストの途中から開始番号を変更することが出来る。例えばリスト中の3番目にあるリストに9というvalue属性値を付与した場合、そのリストは三番目の項目から9, 10, 11, ...という番号が振られるようになる。

入力例[編集]

<ol>
  <li>○○駅で電車に乗る</li>
  <li value="5">××駅で乗り換える</li>
  <li>△△駅で降りる</li>
</ol>

表示例[編集]

  1. ○○駅で電車に乗る
  2. ××駅で乗り換える
  3. △△駅で降りる

定義リスト[編集]

用語の定義のような名前と説明が対になったリストにはDL要素を用います。 DT要素は、UL要素やOL要素と違い、LI要素ではなくDT要素とDD要素とDIV要素[3]から構成されます。 DT要素は定義される用語(名前)を示し、DD要素は用語の説明を示します。 DT要素にはDT要素とDD要素とDIV要素[3]のみを含むことが出来ます。 DT要素はインライン要素を含むことができます。 DD要素はブロックレベル要素を含むことが出来ます。

次の例は、ウィキブックスの姉妹プロジェクトを説明しています。

記述例[編集]

<dl>
  <dt>メタウィキ</dt>
  <dd>全プロジェクトの補助的プロジェクトです。</dd>
  <dt>ウィキペディア</dt>
  <dd>百科事典を作成するプロジェクトです。</dd>
  <dt>ウィクショナリー</dt>
  <dd>辞書・シソーラス作成プロジェクトです。</dd>
</dl>

表示例[編集]

メタウィキ
全プロジェクトの補助的プロジェクトです。
ウィキペディア
百科事典を作成するプロジェクトです。
ウィクショナリー
辞書・シソーラス作成プロジェクトです。

脚注[編集]

  1. ^ HTML5には List という分類はなくHTML4まで List とされた要素は、P要素やMAIN要素などとともに §4.4 Grouping contentに分類されました。
  2. ^ 先頭が数字で始まる要素はありません。
  3. ^ 3.0 3.1 HTML5ではDL要素の直下の子要素にDIV要素が許されるようになりました。

外部リンク[編集]