コンピュータ

COMPUTER

公開：2024-08-12

HTMLのli要素とは？意味をわかりやすく簡単に解説

text: XEXEQ編集部

HTMLのli要素とは

li要素はHTMLにおいてリスト項目を定義するために使用されるタグです。li要素は、番号付きリスト(ol要素)または番号なしリスト(ul要素)の直下に配置され、リストの個々の項目を表します。

li要素は、単独で使用することはできません。必ず、ol要素やul要素の子要素として使用する必要があります。li要素の中には、テキストや他のHTML要素を含めることができます。

li要素にはいくつかの属性が用意されています。例えば、value属性を使用すると、番号付きリストの項目の番号を指定することができます。また、class属性やid属性を使って、CSSでスタイルを適用したりJavaScriptから要素を操作したりすることもできます。

li要素を適切に使用することで、構造化されたリストを作成できます。これにより、文書の可読性が向上し、ユーザーにとって情報を理解しやすくなります。また、検索エンジンもリスト構造を認識しやすくなるため、SEO対策にも役立ちます。

以上のように、li要素はリスト項目を定義するための重要なHTML要素です。ol要素やul要素と組み合わせて使用することで、効果的なリスト表現が可能になります。

li要素の基本的な使い方

li要素の基本的な使い方に関して、以下3つを簡単に解説していきます。

• li要素をol要素やul要素の子要素として使用する方法
• li要素内にテキストや他のHTML要素を含める方法
• li要素に属性を付与して装飾や操作を行う方法

li要素をol要素やul要素の子要素として使用する方法

li要素は、必ずol要素またはul要素の直下に配置する必要があります。ol要素は番号付きリスト、ul要素は番号なしリストを表します。li要素をこれらの要素の子要素として使用することで、リストの項目を定義できます。

以下は、番号付きリストを作成する例です。ol要素の中にli要素を配置し、各項目を定義しています。

< ol >
  < li >First item< /li >
  < li >Second item< /li >
  < li >Third item< /li >
< /ol >

li要素内にテキストや他のHTML要素を含める方法

li要素の中には、テキストを直接記述することができます。また、他のHTML要素を含めることもできます。例えば、リンクやイメージ、強調タグなどを使って、リスト項目の内容を豊かにすることができます。

以下は、li要素内にテキストとリンクを含める例です。a要素を使ってリンクを作成し、リスト項目としてまとめています。

< ul >
  < li >Visit < a href="https://example.com" >Example Website< /a >< /li >
  < li >Read < a href="https://example.com/article" >Important Article< /a >< /li >
< /ul >

li要素に属性を付与して装飾や操作を行う方法

li要素には、value属性やclass属性、id属性などを付与することができます。value属性は、番号付きリストの項目の番号を指定するために使用します。class属性やid属性は、CSSでスタイルを適用したりJavaScriptから要素を操作したりするために使用します。

以下は、value属性を使って番号付きリストの項目の番号を指定する例です。また、class属性を使ってCSSでスタイルを適用しています。

< ol >
  < li value="3" class="special" >Third item< /li >
  < li value="4" >Fourth item< /li >
  < li value="5" class="special" >Fifth item< /li >
< /ol >

li要素のスタイリングとレイアウト

li要素のスタイリングとレイアウトに関して、以下3つを簡単に解説していきます。

• CSSを使ってli要素のスタイルを変更する方法
• li要素の余白やインデントを調整する方法
• li要素にアイコンやマーカーを追加する方法

CSSを使ってli要素のスタイルを変更する方法

CSSを使うことで、li要素の文字色やフォント、背景色などを自由にカスタマイズできます。li要素に直接スタイルを適用することも、ol要素やul要素に適用して子要素のli要素に継承させることもできます。

以下は、ul要素の子要素であるli要素の文字色を赤色に、背景色を薄いグレーに設定する例です。

ul li {
  color: red;
  background-color: #f0f0f0;
}

li要素の余白やインデントを調整する方法

li要素の余白やインデントを調整することで、リストの見栄えを整えることができます。margin属性やpadding属性を使って、li要素の上下左右の余白を指定できます。また、list-style-position属性を使って、リストマーカーの位置を調整できます。

以下は、li要素の上下に10pxの余白を設定し、リストマーカーをli要素の内側に配置する例です。

li {
  margin: 10px 0;
  list-style-position: inside;
}

li要素にアイコンやマーカーを追加する方法

li要素には、デフォルトでリストマーカー(番号や黒丸)が表示されます。これを変更して、独自のアイコンやマーカーを使用することができます。list-style-type属性で様々なマーカーを指定したり、list-style-image属性で画像を指定したりできます。

以下は、ul要素の子要素であるli要素に、チェックマークの画像をマーカーとして設定する例です。

ul li {
  list-style-image: url('checkmark.png');
}

li要素に関する注意点とアクセシビリティ

li要素に関する注意点とアクセシビリティについて、以下3つを簡単に解説していきます。

• li要素を適切な要素の中で使用することの重要性
• li要素を使ったリストのネスト(入れ子)の方法と注意点
• スクリーンリーダーでli要素を正しく読み上げるための配慮

li要素を適切な要素の中で使用することの重要性

li要素は、必ずol要素かul要素の直下で使用する必要があります。他の要素の中でli要素を使用すると、文書の構造が正しくなくなり、アクセシビリティや検索エンジン最適化(SEO)に悪影響を及ぼす可能性があります。

以下は、li要素を直接div要素の中で使用した悪い例です。このような使い方は避けましょう。

< div >
  < li >First item< /li >
  < li >Second item< /li >
< /div >

li要素を使ったリストのネスト(入れ子)の方法と注意点

リストをネスト(入れ子)にすることで、階層構造を表現できます。ol要素やul要素の中に、さらにol要素やul要素を配置することで、入れ子のリストを作成できます。ただし、あまり深いネストは避け、3段階程度までに留めることが推奨されています。

以下は、番号付きリストの中に番号なしリストを入れ子にした例です。

< ol >
  < li >First item
    < ul >
      < li >Subitem 1< /li >
      < li >Subitem 2< /li >
    < /ul >
  < /li >
  < li >Second item< /li >
< /ol >

スクリーンリーダーでli要素を正しく読み上げるための配慮

スクリーンリーダーを使用している視覚障害者に配慮し、li要素を適切に使用することが重要です。ol要素とul要素を使い分け、リストの種類を明確にすることで、スクリーンリーダーがリストを正しく解釈し、読み上げることができます。

また、li要素内のテキストは簡潔で分かりやすいものにし、必要に応じてaria属性を使用して補足情報を提供すると良いでしょう。

< ul >
  < li aria-label="Important" >First item< /li >
  < li >Second item< /li >
< /ul >

※上記コンテンツはAIで確認しておりますが、間違い等ある場合はコメントよりご連絡いただけますと幸いです。

「コンピュータ」に関するコラム一覧「コンピュータ」に関するニュース一覧