順序なしリスト（ul）

順序なしリスト（unordered list）は、箇条書きを作成するために使用します。リストアイテムは <li> 要素で囲みます。

基本的な例

<ul>
    <li>リンゴ</li>
    <li>バナナ</li>
    <li>オレンジ</li>
</ul>

ブラウザで表示すると、次のようになります。

• リンゴ
• バナナ
• オレンジ

順序付きリスト（ol）

順序付きリスト（ordered list）は、番号付きリストを作成するために使用します。

基本的な例

<ol>
    <li>HTMLを学ぶ</li>
    <li>CSSを学ぶ</li>
    <li>JavaScriptを学ぶ</li>
</ol>

ブラウザで表示すると、次のようになります。

1. HTMLを学ぶ
2. CSSを学ぶ
3. JavaScriptを学ぶ

タイプ属性を使用

type 属性を使用すると、リストの番号の種類を変更できます。

<ol type="A">
    <li>Aの項目</li>
    <li>Bの項目</li>
    <li>Cの項目</li>
</ol>

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

1. Aの項目
2. Bの項目
3. Cの項目

定義リスト（dl）

定義リスト（definition list）は、用語とその説明を並べるのに適しています。

基本的な例

<dl>
    <dt>HTML</dt>
    <dd>ウェブページの構造を定義するマークアップ言語</dd>
    <dt>CSS</dt>
    <dd>ウェブページのデザインを担当するスタイルシート言語</dd>
</dl>

ブラウザで表示すると、次のようになります。

HTML

ウェブページの構造を定義するマークアップ言語

CSS

ウェブページのデザインを担当するスタイルシート言語

入れ子リスト

リストの中に別のリストを入れることもできます。

例

<ul>
    <li>フルーツ
        <ul>
            <li>リンゴ</li>
            <li>バナナ</li>
        </ul>
    </li>
    <li>野菜
        <ul>
            <li>ニンジン</li>
            <li>キャベツ</li>
        </ul>
    </li>
</ul>

ブラウザで表示すると、次のようになります。

• フルーツ
  • リンゴ
  • バナナ
• 野菜
  • ニンジン
  • キャベツ

リストのカスタマイズ

CSSを使ってリストのスタイルを変更できます。

CSSを適用した例

<style>
    ul {
        list-style-type: square;
    }
    ol {
        list-style-type: lower-roman;
    }
</style>

<ul>
    <li>四角のマーカー</li>
    <li>別のアイテム</li>
</ul>

<ol>
    <li>小文字ローマ数字</li>
    <li>2つ目の項目</li>
</ol>

このようにCSSを適用すると、リストのマーカーや番号の表示を変更できます。