【完全理解】HTML ulタグの基本｜olとの違いやその使いどころ

（最終更新日：2023年6月）

✔以下の疑問をお持ちの方へ向けた記事です

「HTMLで順序なしリスト（ul）はどのように使用するのだろうか？」
「HTMLのulタグの書き方を学びたい」
「HTMLのulタグの具体的な使用例を見て理解したい」

✔この記事を読むことで得られる知識

HTMLでのulタグの基本的な書き方
ulタグの応用法
HTMLでのulタグを用いた具体的な使用例

この記事では、HTMLでのulタグの基本的な使い方から、その応用法まで、具体的な例を交えて詳細に説明します。

ネストされたリストの作成やスタイルの適用など、より実践的な内容も含めて紹介します。

ぜひ最後までお読みください。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

¥2,640 (2024/11/24 13:53:45時点 Amazon調べ-詳細)

ulタグの基本

こちらでは、HTMLにおける”ulタグ”の基本的な概念と使用法についてお伝えします。

ulタグの概念と役割
ulタグの基本的な記述形式

ulタグの概念と役割

ulタグはHTMLの一部で、「Unordered List」を表します。

順序を必要としないリストを作るために使用されるものです。

例えば、買い物リストやTODOリストなど、順番が重要でないアイテムのリストを作る際にulタグは役立ちます。

  <h1>買い物リスト</h1>
  <ul>
    <li>りんご</li>
    <li>バナナ</li>
    <li>牛乳</li>
    <li>パン</li>
  </ul>

  <h1>TODOリスト</h1>
  <ul>
    <li>洗濯する</li>
    <li>映画を見る</li>
    <li>友達に電話する</li>
    <li>本を読む</li>
  </ul>

ulタグの基本的な記述形式

ulタグの基本的な記述形式はシンプルです。

<ul>
  <li>要素1</li>
  <li>要素2</li>
</ul>

<ul>タグの中に、必要な分だけ<li>タグを入れましょう。

ulタグの属性とその利用

ulタグが持つ属性と、それらの利用方法について解説します。

これにより、より効果的なリスト作成の技術を身につけられるでしょう。

ulタグの主要な属性とその説明
さまざまなリストアイコン：disc、circle、square
実例：ulタグの属性を活用したサンプルデモ

ulタグの主要な属性とその説明

HTMLのulタグには、その表現力を高めるために、いくつかの属性が備わっています。

例えば”class”や”id”という属性は、CSSによるスタイリングやJavaScriptによる動的操作の対象とするためのもの。

属性を用いることで、一般的なリストから、よりカスタマイズされた、特定の目的に合わせたリストを作成できるのです。

さまざまなリストアイコン：disc、circle、square

ulタグで作られるリストのアイテムは、CSSを用いることでアイテムのマークを変更可能です。

デフォルトでは黒い丸（disc）でマークされ、変更できないと思っている方も多いでしょう。

例えば”list-style-type”プロパティを”circle”に設定すると、アイテムのマークが白丸になります。

同様に、”square”に設定すると四角です。

主なものは以下にまとめました。

none: リストアイテムのマーカーを表示しません。
disc: マーカーを白丸（デフォルト）で表示します。
circle: マーカーを白丸で表示します。
square: マーカーを四角で表示します。
decimal: マーカーを数字で表示します。
decimal-leading-zero: マーカーを0を含む数字で表示します（01, 02, 03…）。
lower-roman: マーカーを小文字のローマ数字で表示します。
upper-roman: マーカーを大文字のローマ数字で表示します。
lower-alpha: マーカーを小文字のアルファベットで表示します。
upper-alpha: マーカーを大文字のアルファベットで表示します。

CSSコードは以下のようになります。

ul.square-list {
  list-style-type: square;
}

実例：ulタグの属性を活用したサンプルデモ

さて、それではこれらの属性を活用したサンプルをご覧ください。

以下は、ulタグの”class”属性とCSSを用いてリストアイテムのマーカーを変更した例です。

ここでは、class名を”circle-list”とし、そのスタイルでリストアイテムのマーカーを白丸に変更しています。

<!DOCTYPE html>
<html>
<head>
  <title>Circle List Marker Example</title>
  <style>
    .circle-list {
      list-style-type: circle;
    }
  </style>
</head>
<body>
  <h1>Shopping List</h1>
  <ul class="circle-list">
    <li>Eggs</li>
    <li>Milk</li>
    <li>Bread</li>
    <li>Butter</li>
  </ul>
</body>
</html>

このように、ulタグの属性とCSSを組み合わせることで、リストの見た目を自由に変更することが可能です。

ulタグの活用方法

ulタグのさまざまな活用法をご覧ください。

具体的な場面を理解すれば、どこで使うのかのイメージがつきやすいです。

ネストされたリスト：ulタグの中にulタグ
ulとolのネストの実践
実際の例：シンプルなリストから入れ子のリストまで

ネストされたリスト：ulタグの中にulタグ

ulタグの中に別のulタグを記述することで、リストの中にさらにリストを作成することができます。

情報が階層的に構造化されている場合に便利です。

例えば、大きなカテゴリの中に複数の小さなサブカテゴリがある場合、ネストされたリストはその構造を表現するのに適しています。

<!DOCTYPE html>
<html>
<head>
  <title>Nested List Example</title>
</head>
<body>
  <h1>Categories</h1>
  <ul>
    <li>Fruits
      <ul>
        <li>Apple</li>
        <li>Banana</li>
        <li>Orange</li>
      </ul>
    </li>
    <li>Vegetables
      <ul>
        <li>Carrot</li>
        <li>Lettuce</li>
        <li>Tomato</li>
      </ul>
    </li>
    <li>Books
      <ul>
        <li>Fiction
          <ul>
            <li>Harry Potter</li>
            <li>The Lord of the Rings</li>
          </ul>
        </li>
        <li>Non-fiction
          <ul>
            <li>Biography</li>
            <li>History</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</body>
</html>

ulとolのネストの実践

ulタグだけでなく、olタグ（順序付きリスト）と組み合わせてネストすることも可能です。

これにより、一部のリストアイテムが順序を持つ複雑なリストを作成できます。

例えば、レシピの手順を表現する際に、大きなステップ（ul）とその中の小さなステップ（ol）を組み合わせて表現することが可能です。

<!DOCTYPE html>
<html>
<head>
  <title>Nested List Example</title>
</head>
<body>
  <h1>Recipe: Chocolate Cake</h1>
  <ul>
    <li>Mix the dry ingredients
      <ol>
        <li>Flour</li>
        <li>Sugar</li>
        <li>Cocoa powder</li>
        <li>Baking powder</li>
        <li>Salt</li>
      </ol>
    </li>
    <li>Combine the wet ingredients
      <ol>
        <li>Butter</li>
        <li>Milk</li>
        <li>Eggs</li>
        <li>Vanilla extract</li>
      </ol>
    </li>
    <li>Mix the dry and wet ingredients together</li>
    <li>Pour the batter into a cake pan</li>
    <li>Bake in the oven at 180°C for 30 minutes</li>
    <li>Cool the cake before serving</li>
  </ul>
</body>
</html>

実際の例：シンプルなリストから入れ子のリストまで

以下に、シンプルなリストからネストされたリスト、さらにulタグとolタグが混在するリストまでの例を示します。

ulタグがどのように柔軟にリスト作成に使えるのかを理解してください。

<!DOCTYPE html>
<html>
<head>
  <title>List Example</title>
</head>
<body>
  <h1>My List</h1>

  <!-- シンプルなリスト -->
  <h2>Simple List</h2>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>

  <!-- ネストされたリスト -->
  <h2>Nested List</h2>
  <ul>
    <li>Item 1</li>
    <li>Item 2
      <ul>
        <li>Subitem 2.1</li>
        <li>Subitem 2.2</li>
        <li>Subitem 2.3</li>
      </ul>
    </li>
    <li>Item 3</li>
  </ul>

  <!-- ulタグとolタグが混在するリスト -->
  <h2>Mixed List</h2>
  <ul>
    <li>Item 1</li>
    <li>Item 2
      <ol>
        <li>Subitem 2.1</li>
        <li>Subitem 2.2</li>
        <li>Subitem 2.3</li>
      </ol>
    </li>
    <li>Item 3
      <ul>
        <li>Subitem 3.1</li>
        <li>Subitem 3.2</li>
      </ul>
    </li>
  </ul>
</body>
</html>

ulタグとliタグの組み合わせ

ulタグとliタグの組み合わせについて解説します。

これら二つのタグは、リストを作成する際に手を組む重要なパートナーです。

liタグの役割とulとの関係
実践：ulとliタグで箇条書きリストを作成

liタグの役割とulとの関係

liタグは、ulタグと組み合わせて使用され、リストの各項目を表します。

liはリストアイテムの略で、その名の通り、リストの一項目です。

ulタグは、リスト全体を囲むコンテナであり、その中にliタグを記述することで項目を追加できます。

例えば買い物リストを作る際には、ulタグでリスト全体を作り、それぞれの買い物アイテムはliタグで表現します。

<!DOCTYPE html>
<html>
<head>
  <title>Shopping List</title>
</head>
<body>
  <h1>Shopping List</h1>

  <ul>
    <li>Bread</li>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Butter</li>
    <li>Apples</li>
  </ul>

</body>
</html>

実践：ulとliタグで箇条書きリストを作成

ulタグとliタグを使ってシンプルな箇条書きリストを作成してみましょう。

たとえばあなたが、朝食に食べる食べ物のリストを作る例です。

<ul>
  <li>パン</li>
  <li>卵</li>
  <li>フルーツ</li>
</ul>

ブラウザでは以下のように表示されます。

パン
卵
フルーツ

ulタグとliタグを組み合わせることで、情報を明瞭で読みやすくできるのです。

ulタグとCSSの組み合わせ

このセクションでは、ulタグとCSSを組み合わせて、より自由度の高いリストデザインに挑戦します。

CSSにより、リストの見た目を自在にコントロールできるです。

リストスタイルをカスタマイズする
CSSとulタグを組み合わせたレイアウト調整

リストスタイルをカスタマイズする

CSSを使うことで、ulタグのリストアイテムに対するスタイルをカスタマイズできます。

例えば、デフォルトのリストマーカーを消去したり、リストアイテムの間隔を調整したりが可能。

次の例では、リストマーカーを消去し、リストアイテム間の間隔を1.5emに設定しています。

ul {
  list-style-type: none;
  padding: 0;
}

li {
  padding: 1.5em 0;
}

このCSSを適用すると、リストマーカーが表示されず、リストアイテム間のスペースが広くなります。

CSSとulタグを組み合わせたレイアウト調整

また、CSSとulタグを組み合わせることで、リストのレイアウト自体を調整することも可能です。

たとえば以下のCSSコードでは、リストが水平方向に表示されます。

ul {
  list-style-type: none;
  display: flex;
}

li {
  margin-right: 1em;
}

リストアイテムが水平に並び、アイテム間には1emのマージンが追加されます。

ulタグの注意点とブラウザーの互換性

このセクションでは、ulタグの使用における注意点と、ブラウザ間の互換性について説明します。

ulタグの使用におけるメモと注意点
ブラウザ間でのulタグの互換性

ulタグの使用におけるメモと注意点

1.ulタグは順序を示すものではなく、その項目が等価であることを示すものです。

順序が重要な場合は、代わりに<ol>タグを使用してください。

2.ulタグの直接の子要素としてはliタグのみを含むべきで、他のタグを直接の子要素としては使わないようにしましょう。

例えば、以下のコードは間違った使い方です。

<ul>
  <h3>間違った使い方</h3>
  <li>項目1</li>
  <li>項目2</li>
</ul>

ブラウザ間でのulタグの互換性

ulタグは基本的なHTML要素であり、すべての主要なウェブブラウザで対応しています。

ただしブラウザによっては、以下が異なることも。

デフォルトのリストスタイル
マージン
パディング

そのため、CSSリセット（全てのブラウザで一貫したスタイルを適用するためのCSSルール）を使って、一貫性を保つことが一般的に推奨されています。

ulタグの要素一覧と仕様書

ulタグの要素一覧と仕様書を見ることで、より詳細な情報や最新のHTML仕様を得ることができます。

W3C（World Wide Web Consortium）のウェブサイトは、この情報を提供しています。

まとめ：ulタグの理解と活用

当記事を通じて、ulタグの基本的な概念から、より応用的な使い方までをご説明してきました。

ulタグはリスト表示のための基本的なHTML要素ですが、その活用方法は非常に多岐にわたります。

そして、CSSと組み合わせることで、さらに多彩な表示を実現することが可能です。

この知識を活かし、より質の高いウェブコンテンツ作りに役立ててください。