HTMLの順序なしリストとは

HTMLにおける順序なしリスト（Unordered List）は、リスト項目の順序が特に重要でない場合に使用されます。例えば、買い物リストや項目の一覧などがこれに該当します。順序なしリストは <ul> タグで作成され、各リスト項目は <li>（List Item）タグで囲まれます。

順序なしリストの基本的な構文

<ul>
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
</ul>

この構造により、ブラウザはリストを点線のリストマーカーを持つブロックとして表示します。

順序なしリストの属性

順序なしリストにはいくつかの属性を追加できますが、HTML5ではスタイルを指定するためにCSSを使用することが推奨されています。古いHTMLバージョンでは、type 属性を使用してリストマーカーのスタイルを指定することができました。

順序なしリストのスタイリング

CSSを使用して順序なしリストの見た目をカスタマイズすることができます。例えば、リストマーカーのスタイルを変更したり、インデントを調整したりできます。

ul {
  list-style-type: square; /* リストマーカーを四角に変更 */
  margin-left: 20px; /* リストの左マージンを設定 */
  padding-left: 0; /* リストの左パディングを削除 */
}

li {
  color: blue; /* リスト項目のテキスト色を青に設定 */
}

順序なしリストの用途

順序なしリストは、ウェブページ上で情報を整理し、ユーザーに読みやすい形で提供するために広く使用されています。ナビゲーションメニュー、記事の要点、特徴の一覧など、さまざまなコンテキストで利用されます。

順序なしリストの入れ子

順序なしリストは入れ子（ネスト）することが可能です。サブリストを作成するために他の <ul> 要素を <li> 要素の中に含めることができます。

<ul>
  <li>リスト項目1
    <ul>
      <li>サブ項目1</li>
      <li>サブ項目2</li>
    </ul>
  </li>
  <li>リスト項目2</li>
</ul>

このように、順序なしリストを使って階層的な情報構造を表現することもできます。