liタグの基本的な役割
li（list item）タグは、HTMLでリストを作成するための要素です。このタグを使用すると、順序付きリスト（<ol>）や順序なしリスト（<ul>）内の各項目を定義できます。
この記事では、初学者がliタグの基本的な使い方と役割を理解し、ウェブページでリストを作成する方法を解説します。リストは、ナビゲーションメニューやアイテムの一覧など、ウェブページの構造化に不可欠な要素です。具体的なコード例を交えながら、liタグの使用方法と意義について解説します。
<li> は HTML の要素で、リストの項目を表すために用いられます。この要素は、その項目が属する順序付きリスト (<ol>)、順序なしリスト (<ul>)、メニュー (<menu>) のいずれかの子要素として配置する必要があります。メニュー要素および順序なしリスト内においては、リストの項目は通常、行頭文字を伴って表示されます。順序付きリスト内では、数字や文字による連番のリストマーカーを伴って表示されます。
参考：mdn web docs
liタグの基本的な使い方
liタグは、リスト内の各アイテムを表します。
<ul>
<li>アイテム1</li>
<li>アイテム2</li>
<li>アイテム3</li>
</ul>リストアイテムの作成
liタグを使用して、リスト内の各アイテムを作成します。順序付きリスト（<ol>）や順序なしリスト（<ul>）の内部にliタグを配置します。
<ul>
<li>りんご</li>
<li>バナナ</li>
<li>オレンジ</li>
</ul>ネストしたリストの作成
liタグをネストしてリストを作成することができます。親リスト内の各リストアイテムに別のリストを含めることができます。
<ul>
<li>動物
<ul>
<li>犬</li>
<li>猫</li>
<li>鳥</li>
</ul>
</li>
<li>果物
<ul>
<li>りんご</li>
<li>バナナ</li>
<li>オレンジ</li>
</ul>
</li>
</ul>これにより、階層化されたリストを作成できます。
- ネストとは？
構造が入れ子に配置されることを指します。ある構造の中に別の構造が配置されている状態。
ulタグとolタグとdlタグ-異なる種類のリスト
olタグ-順序付きリスト (Ordered List)
順序付きリストは、ol（ordered list）タグを使用して作成されます。項目が順序付けられ、通常は番号で表されます。
<ol>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>順序付きリストは、リストアイテムが順序付けされている必要がある場合に使用されます。例えば、手順や手続きを説明するリストなどが挙げられます。
dlタグ-定義リスト (Description List)
定義リストは、dl（description list）タグを使用して作成されます。各項目は、dt（description term）タグで用語を表し、dd（description details）タグでその定義や説明を提供します。
<dl>
<dt>用語1</dt>
<dd>用語1の説明</dd>
<dt>用語2</dt>
<dd>用語2の説明</dd>
<dt>用語3</dt>
<dd>用語3の説明</dd>
</dl>定義リストは、用語とそれに関連する説明をまとめて表示する場合に使用されます。例えば、用語集や語彙の説明などが挙げられます。
ulタグ-順序なしリスト（Unordered List）
順序なしリストは、ulタグ（unordered list）を使用して作成されます。リスト内の各項目が順序に関連していない場合に使用されます。
<ul>
<li>りんご</li>
<li>バナナ</li>
<li>オレンジ</li>
</ul>
順序付きリストや定義リストは、ulタグと組み合わせて情報を整理したり、異なるコンテンツタイプを表示する際に使用されます。
liタグのスタイリング
CSSを使用したスタイリング
liタグにスタイルを適用するには、CSS（Cascading Style Sheets）を使用します。これにより、リストアイテムの見栄えやレイアウトをカスタマイズできます。
<style>
/* ulタグ内のすべてのリストアイテムに適用 */
ul li {
color: #333; /* テキストの色 */
font-size: 16px; /* テキストのサイズ */
}
/* 特定のulタグにのみスタイルを適用 */
.custom-list li {
font-weight: bold; /* 太字 */
text-transform: uppercase; /* 大文字 */
}
</style>リストアイテムのスタイル
リストアイテムのスタイルを変更するために使用できる主なプロパティには次のものがあります：
- list-style-type: マーカーの種類を指定します（デフォルトはdisc）。
- list-style-image: マーカーに画像を使用する場合、その画像のパスを指定します。
- list-style-position: マーカーの位置を指定します（insideまたはoutside）。
/* ulリストのアイテムのマーカーのスタイル */
ul {
list-style-type: square; /* マーカーの形状 */
list-style-position: inside; /* マーカーの位置 */
}
/* 特定のリストアイテムにスタイルを適用 */
.custom-list li {
color: blue; /* テキストの色 */
margin-left: 20px; /* 左のインデント */
}これにより、リストアイテムの見た目をカスタマイズして、ウェブページのスタイルに合わせることができます。
リストのアクセシビリティへの配慮
スクリーンリーダーへの対応
スクリーンリーダーを使用するユーザーがウェブサイトを閲覧する際に、リストの内容を正しく理解できるようにするためには、適切なマークアップとセマンティクスが重要です。以下はその方法です：
- 適切なHTML構造:
<ul>や<ol>タグを使用してリストを適切に構造化します。 - 適切なリストアイテム: 各リストアイテムには意味のあるコンテンツを提供します。
- リストの説明: リストの目的や役割を適切に説明するために、周囲のコンテキストを提供します。
<!-- 適切なHTML構造とリストアイテムの説明 -->
<h2>最近の記事</h2>
<ul>
<li><a href="#">記事1：Aの方法</a></li>
<li><a href="#">記事2：Bの手順</a></li>
<li><a href="#">記事3：Cのヒント</a></li>
</ul>- アクセシビリティとは？
障害を持つ人や高齢者、一時的な制約を持つ人など、さまざまな能力や状況を考慮したデザインや技術の提供を意味します。 - スクリーンリーダー
コンピューター上のテキストや要素を音声やブライル（点字）、または拡大表示などの形式でユーザーに読み上げることができる、コンピューターを使用する際に利用するソフトウェアです。 - オーバーライド
親クラスで定義されたメソッドを、サブクラスで同じ名前のメソッドで再定義することで、サブクラスが親クラスのメソッドを上書きすることができます。
ARIA属性の活用
ARIA（Accessible Rich Internet Applications）属性は、ウェブアプリケーションやウェブコンテンツのアクセシビリティを向上させるための仕様です。リストをよりアクセシブルにするために、以下のようなARIA属性を活用できます：
- role属性: リストを適切な役割（例：list、listitem）にマークアップします。
- aria-labelledby属性: リストの見出しやタイトルを提供します。
<!-- ARIA属性を使用したリストのマークアップ -->
<ul role="list" aria-labelledby="recent-articles-heading">
<li role="listitem"><a href="#">記事1：Aの方法</a></li>
<li role="listitem"><a href="#">記事2：Bの手順</a></li>
<li role="listitem"><a href="#">記事3：Cのヒント</a></li>
</ul>これにより、スクリーンリーダーを使用するユーザーがリストを正しく理解し、ナビゲートできるようになります。
- セマンティクスとは？
プログラムがどのように動作するかや、データがどのように処理されるかを定義します。
SEO対策とliタグ
キーワードの適切な使用
リストアイテム内でのキーワードの使用は、SEOにおいて重要な要素です。リストの順序やリストアイテムのコンテンツに関連するキーワードを適切に配置することで、検索エンジンがページのコンテンツを理解しやすくなります。
例えば、ウェブサイトが料理に関するコンテンツを提供している場合、料理名やレシピに関連するキーワードをリストアイテム内に配置することで、そのページが関連する検索クエリに対してより適切な検索結果として表示される可能性が高まります。
<ul>
<li>料理名: カルボナーラ</li>
<li>料理名: ペペロンチーノ</li>
<li>料理名: マルゲリータピザ</li>
</ul>内部リンクの設置
ウェブサイト全体の内部リンク構造を改善するために、liタグを使用して内部リンクを配置することができます。内部リンクは、関連するコンテンツ間のナビゲーションを容易にし、検索エンジンがウェブサイトの構造を理解するのに役立ちます。
例えば、ウェブサイト内の特定のページへのリンクをリストアイテムとして表示することで、関連するページ間のナビゲーションを提供できます。
<ul>
<li><a href="/recipes/carbonara">カルボナーラのレシピ</a></li>
<li><a href="/recipes/peperoncino">ペペロンチーノのレシピ</a></li>
<li><a href="/recipes/margherita-pizza">マルゲリータピザのレシピ</a></li>
</ul>これにより、検索エンジンがウェブサイト内の関連ページを理解しやすくなり、ユーザーが関連するコンテンツにアクセスしやすくなります。
実践的な例
ナビゲーションメニューの作成
ウェブサイトのナビゲーションメニューを作成する際には、典型的にはリストとしてliタグを使用します。以下は、ナビゲーションメニューを作成する簡単な例です。
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about">会社概要</a></li>
<li><a href="/services">サービス</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>この例では、ウェブサイトのメインナビゲーションメニューをリストとして表示しています。各リストアイテムはページへのリンクとなっており、ユーザーがウェブサイト内を移動するためのナビゲーションを提供しています。
サイドバーのリスト
サイドバーエリアに表示されるリストも、liタグを使用して作成します。以下は、サイドバーコンテンツのリストを作成する例です。
<aside>
<h2>カテゴリ</h2>
<ul>
<li><a href="/category/news">ニュース</a></li>
<li><a href="/category/blog">ブログ</a></li>
<li><a href="/category/events">イベント</a></li>
</ul>
</aside>この例では、サイドバーエリアにカテゴリリストを表示しています。各リストアイテムは特定のカテゴリページへのリンクとなっており、ユーザーが関連するコンテンツにアクセスできるようになっています。サイドバーはウェブサイトのレイアウト内で一般的に使用される場所であり、重要なリンクや情報の表示に活用されます。
liタグのまとめ
liタグは、HTMLでリストアイテムを作成するための重要な要素です。
- 基本構文: <li>タグは、リスト内の各アイテムを定義します。通常、<ul>（順序なしリスト）や
<ol>（順序付きリスト）内に配置されます。 - リストアイテムの作成: <li>タグを使用して、リスト内の各アイテムを作成します。これにより、ウェブページのコンテンツを整理しやすくなります。
- ネストしたリスト: <ul>や<ol>内にさらにリストをネストすることで、階層的なリストを作成することができます。これは、サブメニューやカテゴリの階層構造などで利用されます。
リストは、ウェブサイトのSEOにも影響を与えます。正しく構造化されたリストは、検索エンジンがウェブサイトのコンテンツを理解しやすくします。
- キーワードの適切な使用: リスト内のキーワードの適切な使用は、検索エンジンのクローラーがコンテンツを正しく理解しやすくするのに役立ちます。リスト内のテキストは、ウェブページのコンテンツとして重要視されます。
- 内部リンクの設置: リストを使用して内部リンクを作成することで、ウェブサイト全体の内部リンク構造を改善し、検索エンジンのクローラーがサイト内のコンテンツを探索しやすくなります。
正しく構造化されたリストは、ウェブサイトのユーザーエクスペリエンスとSEOの両方にプラスの影響を与えます。リストを適切に活用することで、ウェブサイトのコンテンツを効果的に整理し、検索エンジンでの表示順位を向上させることができます。
適切にマークアップして情報を正確に読み取ってもらいましょう。