li要素
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 | 四角形のマークを表示。 |
- 数字のマーク
- 小文字アルファベット
- 大文字アルファベット
- 白い円
- 黒い円
- 小文字ローマ数字
- 大文字ローマ数字
- 四角形
<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>
<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>
- 項目
- 項目
- 項目
- 項目
関連リンク
よく読まれている記事
- 右クリックメニューの表示が遅い【Information】
- 画像の一部にリンクを貼る(クリッカブルマップ【Dreamweaver】
- 一定時間でローテーションする広告【JavaScript】
- Dreamweaver【Dreamweaver】
- クリックした画像を拡大・縮小する【JavaScript】
UpDate:2010-4-17