3 種類の HTML リストとその使い方

概要

• HTML リストは、Web ページ上のデータを整理して提示するために不可欠です。3 つの主要なタイプがあります: 順序付き、順序なし、説明リストです。
• 順序付きリストは、数値やその他の文字を使用して項目を順序付けます。type 属性によりカスタマイズが可能で、start 属性と reversed 属性により開始位置と順序を変更できます。
• 順序なしリストは、特定の順序なしに関連する項目をグループ化します。箇条スタイルは CSS を使用してカスタマイズできます。

HTML リストは、Web ページ上の関連するデータのグループにとって不可欠な構造要素です。メニューを作成する場合、販売中の商品を整理する場合、複雑なデータをより読みやすい形式で提示する場合など、次のリストは作業を完了するのに役立ちます。

HTML リストには、Web 開発でそれぞれ特定の構造目的を果たす 3 つの主要なタイプがあります。

1. 順序付きリスト

HTML 順序付きリストを使用すると、関連する項目のリストを特定の順序でグループ化できます。新しい順序付きリストを作成するには、

タグを使用する必要があります。
タグは、
1. タグをグループ化して含みます。各リスト要素 (
2. タグ) には、リスト内の特定の項目が含まれます。

   <!-- 順序付きリスト -->
   <ol>
   <li>項目 1</li>
   <li>項目 2</li>
   <li>項目 3</li>
   <li>項目 4</li>
   </ol>

   このコードは、次のビューをレンダリングします。

   

   順序付きリストのデフォルトの順序タイプは数字であることに注意してください。これは、タイプ属性を使用して変更できます。タイプ属性を使用すると、リストを順序付ける要素を決定できます。大文字または小文字のアルファベット、数字、大文字または小文字のローマ数字を使用するオプションがあります。

   <!-- 順序付きリスト -->
   <ol type="a">
   <li>項目 1</li>
   <li>項目 2</li>
   <li>項目 3</li>
   <li>項目 4</li>
   </ol>

   タイプ属性を

   タグに追加すると、次の更新されたビューがレンダリングされます。
   

   type 属性に加えて、

   タグで使用できる属性が他にも 2 つあります: start と reversed です。

   start 属性を使用すると、整数値を使用して任意の位置から順序付けを開始できます。たとえば、start="3" を

   タグに追加し、タイプを指定しない場合、リストの順序付けを数字の 3 から開始します。type="a" または type="I" を割り当てた場合、それぞれ c または III から順序付けを開始します。

   <!-- 順序付きリスト -->
   <ol type="I" start="3">
   <li>項目 1</li>
   <li>項目 2</li>
   <li>項目 3</li>
   <li>項目 4</li>
   </ol>

   上記のコードは、次のビューをレンダリングします。

   

   reversed 属性を使用すると、リストの順序を逆にすることができます。ブール値を受け取り、デフォルト値は false です。

   <!-- 順序付きリスト -->
   <ol reversed="true">
   <li>項目 1</li>
   <li>項目 2</li>
   <li>項目 3</li>
   <li>項目 4</li>
   </ol>

   このコードは、ブラウザで次の出力を生成します。

   

   2. 順序なしリスト

   順序なしリストを使用すると、順序が重要でない関連する項目をグループ化できます。デフォルトでは、ブラウザは各項目にラベルを付けるために箇条書きを使用します。

   新しい順序なしリストを作成するには、親要素として

   タグを使用し、各リスト項目に
   • タグを使用する必要があります。

     <ul>
     <li>項目 1</li>
     <li>項目 2</li>
     <li>項目 3</li>
     <li>項目 4</li>
     </ul>

     このコードは、次のビューをレンダリングします。

     

     順序なしリストのデフォルトの箇条書きスタイルは円です。以前は、type 属性を使用して順序なしリストの箇条書きスタイルを設定できました。ただし、順序なしリストの type 属性は現在廃止されています。順序なしリストのスタイル設定には、CSS list-style-type プロパティが推奨されます。

     <style>
     ul { list-style-type: square; }
     </style>

     上記のコードは、ビューを次のように更新します。

     

     CSS list-style-type プロパティを使用すると、円、カスタム画像、アイコン、記号など、さまざまな箇条書きスタイルを使用できます。リスト項目のレイアウトを変更する CSS を使用すると、順序なしリストを使用してナビゲーションバーを作成することもできます。

     ネストされたリスト

     ネストされたリストとは、別のリストの一部であるリスト要素のことです。順序付きリスト要素と順序なしリスト要素を組み合わせて、ネストされたリストを作成できます。これらの構造は、より複雑な階層を表すことができます。

     <H3>チキンパスタの作り方</H3>
     <ol>
     <li>パスタを茹でる。</li>
     <li>
     鶏胸肉に味付けをする。
     <ul>
     <li>塩こしょう</li>
     <li>パプリカ</li>
     <li>ガーリックパウダー</li>
     <li>イタリアンシーズニング</li>
     </ul>
     </li>
     <li>鍋にオリーブオイルを中火で熱する。</li>
     <li>鶏胸肉を鍋に加えて 5 分間調理する。</li>
     <li>生クリームとパルメザンチーズを空の鍋に加える。</li>
     <li>パスタとスライスした鶏肉をクリームソースに加える。</li>
     </ol>

     このコードは、次のビューをレンダリングします。

     

     3. 説明リスト

     説明リスト要素を使用すると、用語とその関連する詳細情報をリストを作成できます。

     タグを使用すると、新しい説明リストを作成できます。これは、

     （説明用語）と

     （説明の詳細）要素と一緒に使用する必要があります。

     <h3>人気のラップトップ</h3>
     <dl>
     <dt>MacBook Pro</dt>
     <dd>
     最大 22 時間のバッテリー寿命を提供し、
     高度なカメラと Touch ID を備えた Magic キーボードがあります。
     </dd>
     <dt>MSI GS76 Stealth</dt>
     <dd>
     超高速グラフィックスとカスタマイズされたキーを備えた強力なゲーミングラップトップ。
     </dd>
     </dl>

     上記のコードは、次のビューをレンダリングします。

     

     適切な HTML リストでコンテンツを整理する

     Web 開発プロジェクトで使用する HTML リストは、ユーザーに提示するコンテンツによって異なります。たとえば、食事の準備やタスクの完了などの手順を説明する連続的なリストを作成する場合は、順序付きリストが最良の選択肢です。

     しかし、一連の手順を必要としない関連情報をグループ化したい場合（チェックリストなど）、順序なしリストがより適切な選択肢となります。さらに、用語集やよくある質問のリストを作成する場合は、説明リストがより良い選択肢となります。