li要素 リストの項目 (list item)

 
リスト (ol | ul | dir|menu)
ホーム > HTML Note > li要素
H2- ie1- N1-

説明

<li>-</li> 開始タグ:必須 終了タグ:省略可
li要素は(ol | ul | dir|menu)要素のリストアイテム(リストの項目)として利用します。

非推奨であるtype属性の代わりには、スタイルシートの「list-style-type」プロパティを使用するべきであるとされています。
 

属性 (W3C)

<liH2- ie1- N1-
一般属性 id class style title lang dir %events;
type="タイプ" (非推奨) H3-x1 ie1- N1-
番号の様式
 1 アラビア数字 (初期値)
 a アルファベット小文字
 A アルファベット大文字
 i ローマ数字小文字
 I ローマ数字大文字
半角英数(1|a|A|i|I)で指定。

点の形
disc塗りつぶされた丸
square塗りつぶされた四角
*1 仕様では線で描かれた四角 とされています。
circle線で描かれた丸
value="数字" (非推奨) H3-x1 ie1- N1-
開始番号
整数で指定(半角英数[0-9]で表される1桁以上の数字)。
>(%block;|%inline;)*</li>

使用例

  1. オリーブオイル
  2. にんにく
  3. とうがらし
<ol>
  <li>オリーブオイル</li>
  <li>にんにく</li>
  <li>とうがらし</li>
</ol>
 

番号の様式

  1. オリーブオイル
  2. にんにく
  3. とうがらし
  4. ホールトマト
  5. バジル
<ol>
  <li type="1">オリーブオイル</li>
  <li type="a">にんにく</li>
  <li type="A">とうがらし</li>
  <li type="i">ホールトマト</li>
  <li type="I">バジル</li>
</ol>
  • オリーブオイル
  • にんにく
  • とうがらし
<ul>
  <li type="disc">オリーブオイル</li>
  <li type="square">にんにく</li>
  <li type="circle">とうがらし</li>
</ul>
ol要素に含まれるli要素のtype属性の値は大文字小文字を区別します。
ul要素に含まれるli要素のtype属性の値は大文字小文字を区別しません。
 

開始番号の指定

  1. オリーブオイル
  2. にんにく
  3. とうがらし
  4. ホールトマト
  5. バジル
<ol type="i">
  <li>オリーブオイル</li>
  <li>にんにく</li>
  <li value="7">とうがらし</li>
  <li>ホールトマト</li>
  <li>バジル</li>
</ol>
番号の様式にかかわらず、開始番号は整数で指定します。
 

ブラウザごとによる点の形状

点(マーカー)の形状はブラウザによってレンダリング(描画)が異なります。特にIE8の点の形状は特徴があるので注意が必要です。
typeW3Cie7ie8ff3o9gc2sf4
discW3CIE7IE8Firefox3Opera9Chrome2Safari4
squareW3C
circleW3C
 
関連要素: ol | ul | dir|menu > li
トップページ HTML Note ページトップ
 2003/07/10発行 2009/09/01更新