リストタグ:順序付きリスト(ol,li)と順序なしリスト(ul,li)の作成

リストタグは、アイテムの集まりを整理して表示するために使用されます。
HTMLには、順序付きリスト(ordered list)と順序なしリスト(unordered list)の
2種類のリストタグがあります。
それぞれのリストは、リストアイテム(list items)を含むことができます。

順序付きリスト(<ol> タグ)

基本的な使い方

順序付きリストは、アイテムに自動的に番号を付けて表示します。
順序付きリストは、リストのアイテムが特定の順序で並んでいる場合に使用されます。

基本構造

<ol>
    <li>アイテム1</li>
    <li>アイテム2</li>
    <li>アイテム3</li>
</ol>

実践例

以下の例は、順序付きリストを使用して手順を示しています。

<!DOCTYPE html>
<html>
<head>
    <title>順序付きリストの例</title>
</head>
<body>
    <h1>順序付きリストの使用例</h1>
    <ol>
        <li>パソコンを起動する</li>
        <li>ブラウザを開く</li>
        <li>検索エンジンにアクセスする</li>
        <li>情報を検索する</li>
    </ol>
</body>
</html>

リストのタイプを変更

順序付きリストの番号のスタイルを変更するには、type 属性を使用します。
利用できる値は以下の通りです。

1:デフォルトのアラビア数字(1, 2, 3, …)

A:大文字のアルファベット(A, B, C, …)

a:小文字のアルファベット(a, b, c, …)

I:大文字のローマ数字(I, II, III, …)

i:小文字のローマ数字(i, ii, iii, …)

<ol type="A">
    <li>アイテム1</li>
    <li>アイテム2</li>
    <li>アイテム3</li>
</ol>

順序なしリスト(<ul> タグ)

順序なしリストは、アイテムに特定の順序がない場合に使用されます。
各アイテムにはデフォルトでビュレット(●)が付きます。

基本構造

<ul>
    <li>アイテム1</li>
    <li>アイテム2</li>
    <li>アイテム3</li>
</ul>

実践例

以下の例は、順序なしリストを使用して買い物リストを示しています。

<!DOCTYPE html>
<html>
<head>
    <title>順序なしリストの例</title>
</head>
<body>
    <h1>順序なしリストの使用例</h1>
    <ul>
        <li>牛乳</li>
        <li>パン</li>
        <li>卵</li>
        <li>チーズ</li>
    </ul>
</body>
</html>

リストのタイプを変更

順序なしリストのビュレットのスタイルを変更するには、
CSSの list-style-type プロパティを使用します。
利用できる値は以下の通りです。

disc:デフォルトのビュレット(●)

circle:空の円(○)

square:四角(■)

none:ビュレットなし

<!DOCTYPE html>
<html>
<head>
    <style>
        ul {
            list-style-type: square;
        }
    </style>
</head>
<body>
    <h1>カスタムビュレットの例</h1>
    <ul>
        <li>牛乳</li>
        <li>パン</li>
        <li>卵</li>
        <li>チーズ</li>
    </ul>
</body>
</html>

ネストされたリスト

リストはネストすることができ、
順序付きリストや順序なしリストの中にさらにリストを作成することができます。

ネストされたリストの例

以下の例は、順序付きリストの中に順序なしリストをネストしています。

<!DOCTYPE html>
<html>
<head>
    <title>ネストされたリストの例</title>
</head>
<body>
    <h1>ネストされたリストの使用例</h1>
    <ol>
        <li>第一章
            <ul>
                <li>導入</li>
                <li>背景</li>
            </ul>
        </li>
        <li>第二章
            <ul>
                <li>方法</li>
                <li>結果</li>
            </ul>
        </li>
        <li>第三章
            <ul>
                <li>考察</li>
                <li>結論</li>
            </ul>
        </li>
    </ol>
</body>
</html>

リストのスタイリング

リストの外観をCSSでカスタマイズすることで、見た目をより魅力的にすることができます。

カスタムスタイルの例

以下の例は、リストアイテムのカスタムスタイルを示しています。

<!DOCTYPE html>
<html>
<head>
    <style>
        ol.custom-counter {
            counter-reset: custom-counter;
        }
        ol.custom-counter li {
            list-style: none;
            counter-increment: custom-counter;
        }
        ol.custom-counter li::before {
            content: counter(custom-counter) ". ";
            font-weight: bold;
        }
        ul.custom-bullets {
            list-style-type: none;
        }
        ul.custom-bullets li::before {
            content: "★ ";
            color: red;
        }
    </style>
</head>
<body>
    <h1>カスタムリストスタイルの例</h1>
    <ol class="custom-counter">
        <li>アイテム1</li>
        <li>アイテム2</li>
        <li>アイテム3</li>
    </ol>
    <ul class="custom-bullets">
        <li>アイテムA</li>
        <li>アイテムB</li>
        <li>アイテムC</li>
    </ul>
</body>
</html>

まとめ

順序付きリスト(<ol> タグ)と順序なしリスト(<ul> タグ)は、
HTMLで情報を整理して表示するための基本的な要素です。
それぞれのリストタグは、リストアイテム(<li> タグ)を含み、
リストのタイプやスタイルをカスタマイズすることができます。
リストの適切な使用により、コンテンツの可読性と整然さを向上させることができます。