HTML 速習チュートリアル

HTML リスト

HTML リスト (HTML Lists)

HTMLリストを使用すると、関連する項目の集合をリスト形式でグループ化できます。

1. 順序なし HTML リスト (Unordered HTML List)

順序なしリストは、<ul> タグで始まります。各リスト項目は <li> タグで始まります。

デフォルトでは、リスト項目は黒丸（ビュレット）で表示されます。

<ul>
  <li>コーヒー</li>
  <li>紅茶</li>
  <li>牛乳</li>
</ul>

2. 順序付き HTML リスト (Ordered HTML List)

順序付きリストは、<ol> タグで始まります。各リスト項目は <li> タグで始まります。

デフォルトでは、リスト項目は数字で表示されます。

<ol>
  <li>コーヒー</li>
  <li>紅茶</li>
  <li>牛乳</li>
</ol>

3. HTML 説明リスト (HTML Description Lists)

HTMLは説明リスト（Description Lists）もサポートしています。これは、用語とそれぞれの説明を並べたリストです。

<dl> タグがリストを定義し、<dt> タグが用語（名前）を定義し、<dd> タグがそれぞれの用語を説明します。

<dl>
  <dt>コーヒー</dt>
  <dd>- 黒くて熱い飲み物</dd>
  <dt>牛乳</dt>
  <dd>- 白くて冷たい飲み物</dd>
</dl>

4. HTML リストと CSS (HTML List Tags and CSS)

CSSの list-style-type プロパティを使用すると、リスト項目のマーカーのスタイルを定義できます。

4.1 順序なしリストのマーカー

以下の値が一般的です。

  • disc - デフォルト。黒丸（●）を設定します。
  • circle - 白丸（○）を設定します。
  • square - 黒い四角（■）を設定します。
  • none - マーカーを表示しません。
<ul style="list-style-type:square;">
  <li>コーヒー</li>
  <li>紅茶</li>
  <li>牛乳</li>
</ul>

4.2 順序付きリストのタイプ

<ol> タグの type 属性を使用して、番号の種類を変更できます。

  • type="1" - デフォルト。数字（1, 2, 3...）
  • type="A" - 大文字のアルファベット（A, B, C...）
  • type="a" - 小文字のアルファベット（a, b, c...）
  • type="I" - 大文字のローマ数字（I, II, III...）
  • type="i" - 小文字のローマ数字（i, ii, iii...）

5. ネストされた HTML リスト (Nested HTML Lists)

リストはネスト（入れ子）にすることができます（リストの中に別のリストを含める）。

<ul>
  <li>コーヒー</li>
  <li>紅茶
    <ul>
      <li>ブラックティー</li>
      <li>グリーンティー</li>
    </ul>
  </li>
  <li>牛乳</li>
</ul>
[!NOTE]
リスト項目（<li>）の中には、新しいリストや、テキスト、画像、リンクなどの他のHTML要素を含めることができます。

6. リストのカウント制御 (Control List Counting)

デフォルトでは、順序付きリストは1からカウントを開始します。特定の数字から開始したい場合は、start 属性を使用します。

<ol start="50">
  <li>コーヒー</li>
  <li>紅茶</li>
  <li>牛乳</li>
</ol>

7. 水平リストの作成 (Horizontal List with CSS)

CSSを使用することで、HTMLリストを水平に並べて表示できます。これは、ナビゲーションメニューを作成する際によく使われる手法です。

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">ホーム</a></li>
  <li><a href="#news">ニュース</a></li>
  <li><a href="#contact">お問い合わせ</a></li>
  <li><a href="#about">概要</a></li>
</ul>

</body>
</html>

8. まとめ

タグ説明
<ul>順序なしリストを定義します。
<ol>順序付きリストを定義します。
<li>リスト項目を定義します。
<dl>説明リストを定義します。
<dt>説明リスト内の用語を定義します。
<dd>説明リスト内の用語の説明を定義します。

Webサイトの構造を設計する際、単なる箇条書きだけでなく、ナビゲーションや情報の定義にこれらのタグを正しく使い分けることが、SEOやアクセシビリティの向上に直結します。