li要素(エルアイヨウソ)とは | 意味や読み方など丁寧でわかりやすい用語解説

li要素は、HTML（HyperText Markup Language）においてリストの項目を定義するための要素である。liは「List Item」の略であり、その名の通り、リストを構成する個々のアイテムを示す役割を持つ。この要素は単独で使用されることはなく、必ず親要素であるリストコンテナの中に配置される必要がある。リストコンテナには主に3つの種類が存在し、それぞれul要素、ol要素、menu要素である。最も一般的に使用されるのは、順序を持たないリストを作成するul要素（Unordered List）と、順序を持つリストを作成するol要素（Ordered List）である。システムエンジニアを目指す上で、Webページの構造を正しく記述するために、li要素の役割と正しい使い方を理解することは極めて重要となる。Webサイトのナビゲーションメニュー、商品の一覧、作業手順の説明など、情報を整理して提示する多くの場面でこのli要素が活用される。

詳細な使い方として、まず親要素との関係性を理解することが不可欠である。ul要素の中にli要素を配置した場合、それは順序が重要ではない項目の集まり、つまり一般的な箇条書きとして扱われる。ブラウザは通常、各li要素の先頭に黒丸や白丸といったマーカーを付けて表示する。一方、ol要素の中にli要素を配置すると、それは順序が重要な項目の集まり、例えば料理のレシピや作業手順のような段階的な情報として扱われる。この場合、ブラウザは自動的に各li要素に「1, 2, 3...」や「A, B, C...」といった連番を付与して表示する。どちらの親要素を使用するかは、そのリストが持つ情報の意味合いによって決定されるべきである。また、あまり使われることはないが、menu要素はコマンドのリストを表すために用いられ、その中の項目もli要素で定義する。これらの親要素の直接の子要素としてのみli要素を配置できるというルールは厳格であり、例えばul要素の直下にテキストや他のブロックレベル要素を置くことは文法的に誤りとなる。

li要素の特筆すべき点は、その内部に格納できるコンテンツの自由度が非常に高いことである。単純なテキストだけでなく、段落を意味するp要素、見出しを表すh1からh6要素、画像を表示するimg要素、そして他のページへのリンクを作成するa要素など、ほとんどのHTML要素をli要素の中に含めることができる。この柔軟性により、複雑な構造を持つリスト項目を作成することが可能となる。さらに強力な機能として、li要素の中にul要素やol要素を入れ子にすることができる。これにより、階層構造を持つリスト、いわゆるネストされたリストを構築できる。例えば、Webサイトのナビゲーションメニューで、主要なメニュー項目の下にサブメニュー項目を配置する際などにこの技術が用いられる。この入れ子構造は、コンテンツの論理的な親子関係を明確に示す上で非常に有効である。

属性に関しては、li要素は主にol要素の子要素として使用される場合に限り、value属性を持つことができる。このvalue属性は、リスト項目の番号を特定の値に設定するために使用する。通常、ol要素内のli要素は1から始まる連番で表示されるが、特定のli要素にvalue属性で数値を指定すると、その項目の番号が指定した値に変更され、後続のli要素はその番号から続く連番となる。これにより、リストの途中で番号をリセットしたり、特定の番号から再開させたりといった制御が可能になる。これは、複数のセクションに分かれた手順説明などで役立つ。ただし、リスト全体の開始番号を変更したい場合は、親であるol要素のstart属性を使用するのが適切である。

li要素を正しく使用することの重要性は、単に見た目を整えるだけに留まらない。HTMLは文書の構造と意味を定義する言語であり、li要素を使用することは、その部分が「リストの項目である」という明確な意味（セマンティクス）を文書に与えることにつながる。検索エンジンは、この構造を解析してコンテンツの内容をより正確に理解し、検索結果の精度向上に役立てる。また、スクリーンリーダーのような支援技術を利用するユーザーにとって、この意味論的な構造は極めて重要である。スクリーンリーダーは、ulやol要素を検出すると「リスト、全5項目」のように読み上げ、ユーザーがコンテンツ全体の構成を把握する手助けをする。もし、div要素やp要素にCSSでスタイルを適用して見た目だけをリスト風に作成した場合、このような意味論的な情報は完全に失われ、アクセシビリティが著しく低下する。

li要素の見た目は、CSS（Cascading Style Sheets）を用いることで自由にカスタマイズできる。list-style-typeプロパティを使えば、ul要素のマーカーを黒丸から四角に変更したり、ol要素の番号をアラビア数字からローマ数字に変更したりすることが可能である。また、list-style-imageプロパティでマーカーを任意の画像に置き換えることや、list-style-positionプロパティでマーカーの位置を調整することもできる。ナビゲーションメニューなどでは、list-style: none; を指定してデフォルトのマーカーを完全に消去し、背景色や余白、罫線などを駆使して独自の洗練されたデザインを適用することが一般的である。このように、HTMLで構造と意味を定義し、CSSで見た目を制御するという役割分担を徹底することが、現代のWeb開発における基本原則である。li要素は、この原則を実践する上で欠かせない、基本的かつ強力な構成要素の一つと言える。