li要素

Home>HTML>要素リファレンス>li

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

li要素の役割

li要素は、リスト要素の各項目を示す要素です。ulやol要素に内包される形で使用されます。

li要素に設定できる属性

属性名 意味
class クラス名。CSSを適用するときなどに使用する。
dir 文字表記の方向。左から右(ltr)と、右から左(rtl)を指定する。通常はltrなので、右から左へ表記する言語を使わないのであれば、指定しなくてよい。
id ID名。CSSを適用するときに使用する。
lang 言語コード。日本語、英語といった言語を指定する。html要素に記述してあれば、明示する必要はない。
style スタイルシートを直接記述する。
title 補足情報。テキストにカーソルを合わせるとtitle属性に指定した文字列をポップアップで表示する。
type リストの項目のマークの種類を指定。非推奨。
value ul要素のときに使用。項目の番号を強制的に指定。非推奨。

li要素の使い方

<ul>
<li>項目1</li>
<li>項目2</li>
</ul>

  • 項目1
  • 項目2

上記のように、ul要素またはol要素に内包する形で使われます。
なお、SEOの観点では、一つのリスト要素に含まれる項目の数は、8つを超えないことが望ましいとされています。

type属性

type属性を指定すると、リストの項目に使われるマークを指定することができます。これらのマークは、ブラウザによって対応していない場合もあります。

1 数字。
a 小文字のアルファベット。
A 大文字のアルファベット。
circle 円形のマークを表示。デフォルト。
disc 円形のマークを表示。
i 小文字のローマ数字。
I 大文字のローマ数字。
square 四角形のマークを表示。
  1. 数字のマーク
  2. 小文字アルファベット
  3. 大文字アルファベット
  4. 白い円
  5. 黒い円
  6. 小文字ローマ数字
  7. 大文字ローマ数字
  8. 四角形
<li type="1">数字のマーク</li>
<li type="a">小文字アルファベット</li>
<li type="A">大文字アルファベット</li>
<li type="circle">白い円</li>
<li type="disc">黒い円</li>
<li type="i">小文字i</li>
<li type="I">大文字I</li>
<li type="square">四角形</li>

ただし、非推奨属性なので、CSSのlist-style-typeプロパティなどを使用しましょう。

value属性

li要素にvalue属性を指定すると、強制的に表示する数値を指定できます。value属性をしない場合は、上のli要素の値の連番になります。

<ol>
<li>項目</li>
<li>項目</li>
<li value="10">項目</li>
<li>項目</li>
</ol>

  1. 項目
  2. 項目
  3. 項目
  4. 項目

関連リンク

よく読まれている記事

UpDate:2010-4-17