HTML Living Standard/ul

ul 要素

<ul> 要素は、順序のないリスト（unordered list）を表すために使用されます。リスト内の各項目は <li> 要素で定義されます。

基本構造

以下は、<ul> 要素の基本的な使用例です：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Unordered List Example</title>
  </head>
  <body>
    <ul>
      <li>リンゴ</li>
      <li>バナナ</li>
      <li>オレンジ</li>
    </ul>
  </body>
</html>

この例では、<ul> 要素によって順序のないリストが作成され、各項目は <li> 要素で定義されています。

主な特徴

順序が不要な情報や選択肢のリストを表す際に使用します。
ブラウザのデフォルトでは、リスト項目の前に箇条書き（●）が表示されます。
視覚的なスタイルはCSSでカスタマイズできます。

属性

<ul> 要素にはグローバル属性が使用できますが、リスト特有の属性はありません。スタイリングやカスタマイズは主にCSSを使用して行います。

CSSを使用したカスタマイズ

<ul> 要素は、CSSでリストのマーカーやスタイルを変更することができます。

リストマーカーの変更

list-style-type プロパティを使用して、マーカーの種類を変更できます。

<ul style="list-style-type: square;">
  <li>リンゴ</li>
  <li>バナナ</li>
  <li>オレンジ</li>
</ul>

サポートされる値の例：

disc（● - デフォルト）
circle（○）
square（■）
none（マーカーなし）

リストのインデントの変更

margin や padding を調整することで、リストのインデントを変更できます。

<ul style="padding-left: 20px;">
  <li>リンゴ</li>
  <li>バナナ</li>
  <li>オレンジ</li>
</ul>

カスタムマーカー

カスタム画像をマーカーとして設定するには、list-style-image プロパティを使用します。

<ul style="list-style-image: url('marker.png');">
  <li>リンゴ</li>
  <li>バナナ</li>
  <li>オレンジ</li>
</ul>

ネストされたリスト

リストはネスト（入れ子）構造を持つことができます。ネストされたリストは、外側のリスト内にさらに <ul> または <ol> を配置することで作成されます。

<ul>
  <li>フルーツ
    <ul>
      <li>リンゴ</li>
      <li>バナナ</li>
      <li>オレンジ</li>
    </ul>
  </li>
  <li>野菜
    <ul>
      <li>キャベツ</li>
      <li>人参</li>
      <li>ジャガイモ</li>
    </ul>
  </li>
</ul>

使用例

シンプルなリスト

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

カスタムマーカーを使用したリスト

<ul style="list-style-type: circle;">
  <li>夏</li>
  <li>秋</li>
  <li>冬</li>
</ul>

入れ子構造

<ul>
  <li>動物
    <ul>
      <li>猫</li>
      <li>犬</li>
    </ul>
  </li>
  <li>鳥
    <ul>
      <li>スズメ</li>
      <li>カラス</li>
    </ul>
  </li>
</ul>

注意点

意味論的な使用:
順序の必要ない情報には <ul> を、順序が重要な情報には <ol> を使用してください。
アクセシビリティ:
リストの内容がスクリーンリーダーでも適切に読み上げられるよう、リストを正しく構造化してください。
スタイリングの制御:
デフォルトのブラウザスタイルは予期しない結果を生む場合があるため、CSSで明示的にスタイルを定義することを検討してください。

練習問題

練習1: <ul> を使用して、好きな果物のリストを作成してください。
練習2: ネストされたリストを使用して、「果物」と「野菜」のカテゴリを含むリストを作成してください。
練習3: CSSを使って、リストのマーカーを「■」に変更し、カスタムスタイルを適用してください。