<li>
対応ブラウザ | Internet Explorer 2~ / Firefox 1~ / Google Chrome 1~ / Safari 1~ / Opera 6~ | ||
---|---|---|---|
タグの分類 | ul要素、ol要素、dir要素、menu要素の子要素 | 定義バージョン | Strict, Transitional, Frameset |
開始タグ | 必須 | 終了タグ | 省略可 |
用例 |
|
属性
type | 概要 |
リストのマークの種類を指定します。 <ol>要素の時にはアラビア数字、アルファベット大文字、アルファベット小文字、ローマ数字大文字、ローマ数字小文字のいずれかを、<ul>要素の時には黒丸、白丸、四角の中から指定します。 |
---|---|---|
属性の値 | disc、circle、sqare、1、A、a、I | |
value | 概要 | ol要素内で項目番号の変更を行います。 |
属性の値 | 数値 |
<li>とは
「LI」とは「list item」の略で、リストの項目を表示するために使用するタグです。
<ul>~</ul> または<ol>~</ol>の間で使用します。
<ul>タグはリスト項目に順序を付けたくない場合に使用します。
リストは箇条書きで表記され、項目の間に順番や序列は発生しません。
逆に順番を明らかにしたい場合は<ol>を使用すると項目が順番付きのリストになります。
サンプルデモ
type="disc":黒丸アイコン
<ul> <li type="disc">サンプルテキスト</li> <li type="disc">サンプルテキスト</li> </ul>

type="circle":白丸アイコン
<ul> <li type="circle">サンプルテキスト</li> <li type="circle">サンプルテキスト</li> </ul>

type="sqare":四角アイコン
<ul> <li type="sqare">サンプルテキスト</li> <li type="sqare">サンプルテキスト</li> </ul>

type="1":アラビア数字
<ol> <li type="1">サンプルテキスト</li> <li type="1">サンプルテキスト</li> <li type="1">サンプルテキスト</li> </ol>

type="A":ローマ字(大文字)
<ol> <li type="A">サンプルテキスト</li> <li type="A">サンプルテキスト</li> <li type="A">サンプルテキスト</li> </ol>

type="a":ローマ字(小文字)
<ol> <li type="a">サンプルテキスト</li> <li type="a">サンプルテキスト</li> <li type="a">サンプルテキスト</li> </ol>

type="I":ローマ数字
<ol> <li type="I">サンプルテキスト</li> <li type="I">サンプルテキスト</li> <li type="I">サンプルテキスト</li> </ol>

value="数値":任意の数字から開始
<ol> <li>サンプルテキスト</li> <li value="3">サンプルテキスト</li> <li>サンプルテキスト</li> </ol>
