【liタグ】でリストの各項目を作ってみよう！「HTML・解説・初心者向け」｜ノブレコ

2022年7月4日 2022年9月19日

nobreco

<li> リストの各項目を表示する要素について知ろう！

★<li>タグの特徴：

・タグのカテゴリ ―― なし。

・コンテンツモデル ―― フローコンテンツ。

・タグの省略 ―― 可能。
（①<li>要素にまた次の<li>要素が続く場合。②<li>要素が続くことなく親要素が閉じられた場合）

・使用可能な親要素 ―― <ol>・<ul>・<menu>。

・グローバル属性を持つ。

・ARIAロール ―― 標準でlist itemロールを持つ。

<li>の説明

<li>とは

「list item（リストアイテム）」の略で、リストのコンテンツである各項目を示すためのタグです。

この<li>要素を子要素にできるのは、<ol><ul><menu>のの３種類になります。

また<li>要素自体のモデルはflowであり、他のフローコンテンツであれば、そのほとんどを子要素として入れることができます。

【主な使用目的】

<ol>や<ul>や<menu>要素で、リスト項目を表示するために使用します。

※<li>要素を内包することで、ブラウザ上で目視することができます。

■<li>で使用する主な属性

・value属性

親が<ol>要素の場合にだけ使用でき、リストマーカーの番号を整数値で変更できます。

<li>要素にvalue属性で指定された整数値の番号は、その後に続く<li>要素の番号にも変更の影響を与えるので注意。

例えば<li value="5">と指定した場合は、５の順番から後続していくということになります。

・start属性

リスト項目の開始値を算用数字で指定する。

123…から普通は開始しますが、567…というように開始値を変更できます。

・type属性

リスト項目の数字の型を変更する。

初期状態はインド・アラビア数字である算用数字の１０進数で表されますが、それをアルファベットやローマ数字の大文字、小文字に変更することができます。

※ type属性は、使用しなければならい特別に重要な理由がない場合以外は使わないようにしましょう。
普段はCSSのlist-style-typeプロパティでリストマーカーの型を変更してください。
種類もtype属性より豊富です。

■CSSのlist-style-typeプロパティ

リストマーカーの値と種類

値	効果の説明
none	なし
disc	黒丸
circle	白丸
square	黒四角
decimal	数字
cjk-ideographic	漢数字
decimal-leading-zero	０から始始まる数字
lower-roman	小文字のローマ字
upper-roman	大文字のローマ字
lower-geek	小文字のギリシャ語
lower-alpha lower-latin	小文字のアルファベット
upper-alpha upper-latin	大文字のアルファベット
georgian	グルジア語
hebrew	ヘブライ語
hiragana	ひらがな
hiragana-iroha	ひらがな（いろは順）
katakana	カタカナ
katakana-iroha	カタカナ（イロハ順）