HTML リスト

❮ 前章へ 次章へ ❯

 HTML リストの例

順序なしリスト

  • Item
  • Item
  • Item
  • Item

順序付きリスト

  1. First item
  2. Second item
  3. Third item
  4. Fourth item

順序なし HTML リスト

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

リスト項目には、小さな黒丸のマークが付けられます。

<

例

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Try it Yourself ❯

順序なし HTML リスト - リスト項目マーカの選択

CSS list-style-type プロパティは、リスト項目マーカのスタイルを定義するために使用します：

値 説明
disc リスト項目マーカに黒丸を設定します（デフォルト）
circle リスト項目マーカに白丸を設定します
square リスト項目マーカに四角を設定します
none リスト項目をマークしません
<

例 - Disc

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Try it Yourself »
<

例 - Circle

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Try it Yourself »
<

例 - Square

<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Try it Yourself »
<

例 - None

<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Try it Yourself »

順序付き HTML リスト

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

リスト項目には、数字がマークされます。

例

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Try it Yourself ❯

順序付き HTML リスト - タイプ属性

マーカのスタイルを定義するため、type 属性を順序付きリストに加えることができます：

タイプ 説明
type="1" リスト項目を数字で番号付けします（デフォルト）
type="A" リスト項目を英大文字で番号付けします
type="a" リスト項目を英小文字で番号付けします
type="I" リスト項目を大文字のローマ数字で番号付けします
type="i" リスト項目を小文字のローマ数字で番号付けします

数字：

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Try it Yourself »

大文字：

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Try it Yourself »

小文字：

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Try it Yourself »

大文字のローマ数字：

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Try it Yourself »

小文字のローマ数字：

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Try it Yourself »

HTML 説明リスト

説明リストは、各用語の説明が付いた用語のリストです。

<dl> タグは、説明リストを定義します。

<dt> タグは、用語（名称）を定義し, <dd> タグは、データ（説明）を定義します。

HTML は、説明リストもサポートします。

説明リストは、各用語の説明を持つ用語のリストです。

<dl> タグは、説明リストを定義し、<dt> タグは、用語（名称）を定義して、 <dd> タグは、各用語の説明を定義します。

Example

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

Try it Yourself ❯

ネストした HTML リスト

リストはネスト（リスト内部のリスト）にすることができます.

Example

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Try it Yourself ❯

リスト項目には、新しいリストと画像やリンクなどの他の HTML 要素を含まることができます。

横並びのリスト

HTML リストは、CSS を使用することで、多くの異なったスタイルを設定することができます。

よく使われるのは、リストを横並びに表示するスタイルです：

例

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

li {
    float: left;
}

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

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

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>
Try it Yourself »

この章のまとめ

練習問題を自分でテストしてください！

Exercise 1 ❯  Exercise 2 ❯  Exercise 3 ❯  Exercise 4 ❯  Exercise 5 ❯  Exercise 6 ❯

HTML List タグ

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

❮ 前章へ 次章へ ❯