<LI> ul・olの項目

<LI>タグは「List Item」の略称で<UL><OL>で箇条書き形式のテキスト(リスト)を表示させたい際に使用するタグです。

リスト形式で表示したい各項目を<LI>~</LI>で囲み<UL><OL>の中に記述します。 また<LI>タグ内にはテキストの他、インライン要素やブロックレベル要素なども入れる事ができ、一般的なブラウザでは<LI>の前(各項目の先頭)に黒丸(・)などが付いて表示されます。

ちなみに各リストの使い分けですが、<UL>は項目の順序が重要でない箇条書きに、<OL>は順序が重要な箇条書きを表示したい場合に使用します。

なお<LI>にtype属性を使用する事で、指定した項目の先頭に付くマークの種類を変更することができ、value属性を使用する事でリストの連番を変える事ができます。

※type属性を指定する場合はuLとolで表示されるマークが異なります。それについてはolのtype属性ulのtype属性を確認して下さい。

使用した時の例

<p>支払いは以下の方法から選べます</p>
<ul>
  <li>銀行振込</li>
  <li>代引き</li>
  <li>クレジットカード</li>
</ul>

<p>ホットケーキの作り方</p>
<ol>
  <li>牛乳と卵を混ぜる</li>
  <li>ミックスを加える</li>
  <li>焼いて完成!</li>
</ol>

<ul>
  <li type="disc">銀行振込</li>
  <li type="circle">代引き</li>
  <li type="square">クレジットカード</li>
</ul>

<ol>
  <li type="A">牛乳と卵を混ぜる</li>
  <li type="a">ミックスを加える</li>
  <li type="I">焼いて完成!</li>
</ol>

<ol>
  <li>牛乳と卵を混ぜる</li>
  <li value="5">ミックスを加える</li>
  <li>焼いて完成!</li>
</ol>

ブラウザ上の表示例

支払いは以下の方法から選べます
  • 銀行振込
  • 代引き
  • クレジットカード
ホットケーキの作り方
  1. 牛乳と卵を混ぜる
  2. ミックスを加える
  3. 焼いて完成!
  • 銀行振込
  • 代引き
  • クレジットカード
  1. 牛乳と卵を混ぜる
  2. ミックスを加える
  3. 焼いて完成!
  1. 牛乳と卵を混ぜる
  2. ミックスを加える
  3. 焼いて完成!

属性

value="整数" 変更したいリスト項目の番号を整数で指定(1,2,3…など)
type="1" リストマークの種類
olの場合以下のいずれか
  • 1・・・10進数(1,2,3…)
  • a・・・小文字アルファベット(a,b,c…)
  • A・・・大文字アルファベット(A,B,C…)
  • i・・・小文字ローマ字(ⅰ,ⅱ,ⅲ…)
  • I・・・大文字ローマ字(Ⅰ,Ⅱ,Ⅲ…)

ulの場合以下のいずれか
  • disc・・・黒丸
  • circle・・・白丸
  • square・・・四角

対応ブラウザなどのデータ

形式 <li>~</li> カテゴリ なし
親要素 ol / ul 子要素 フローコンテンツ
開始タグ 必須 終了タグ 省略可能
汎用属性 accesskey / class / contenteditable / dir / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer2~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~