07 ホームページ基礎講座　HTML 箇条書き　ul > li ol > li

2020年4月3日2025年4月13日

今回は、Webサイトの中で使う箇条書き要素について、HTMLのマークアップとCSSの練習を行います。箇条書き要素は、Webサイトでは多くの場所で目次として扱われ、グローバルナビゲーションと呼ばれる重要な場所で使われたりします。

HTMLコードを入力しよう

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>エコロジーと環境問題 [Computer Technology Groups]</title>
</head>

<body>
    <article>
        <!-- エコロジーについて -->
        <section>
            <h1>ECOLOGY【エコロジー】</h1>
            <p>
                Computer Technology Groupsでは、グループをあげてエコロジー／環境問題に取り組んでいます。
                成果や実績を地域に還元することもポリシーとしています。
            </p>
        </section>

        <!-- 商品のラインナップ -->
        <section>
            <h1>商品のラインナップ</h1>
            <p>
                紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。
                リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。
            </p>
        </section>

        <!-- リサイクル商品 -->
        <section>
            <h1>リサイクル商品</h1>
            <ul>
                <li>ノートやメモ帳などの紙製品</li>
                <li>ペットボトル</li>
                <li>布製品</li>
                <li>ダンボール／梱包材</li>
                <li>木工製品／割り箸・爪楊枝など</li>
                <li>コンピューター基盤／電子機器</li>
            </ul>
        </section>

        <!-- 省エネ商品の使い方 -->
        <section>
            <h1>省エネ商品の使い方</h1>
            <ol>
                <li>消費電力を計測する機器を設置</li>
                <li>電源を自動的にオフにするキットの用意</li>
                <li>水量を調節する蛇口セットの準備</li>
                <li>家庭用省エネ10点セット</li>
            </ol>
        </section>
    </article>

    <footer>
        <p><small>Copyright © Computer Technology Groups All rights reserved.</small></p>
    </footer>
</body>

</html>

箇条書きの<ul> <li>要素　 <ol><li>要素

<ul>（順不同リスト）と<ol>（順序付きリスト）は、どちらもリストを作成するためのHTMLタグですが、その使い方と意味が異なります。<ul>要素は通常の箇条書きに使われる場合も多々ありますが、ホームページ内では目次・ナビゲーション内・カテゴリー一覧・アーカイブ一覧などにも使われるので、使用頻度は高い要素となっています。

`<ul>`: 順不同リスト

<ul>は、「順不同リスト」とも呼ばれるリストを作成するために使用します。このリストは、項目の順番が特に重要でない場合に使用します。リスト内の項目は、順番に意味があるわけではなく、単に関連する項目が列挙される形です。

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

ブラウザでは、<ul>タグ内のリストアイテムが丸い点（ディスク）として表示されます。

順不同リストのネスト

リストは、入れ子にすることもできます。これは、リストの項目内にさらに別のリストを作ることで、階層的なリストを表現することができます。

<ul>
    <li>フルーツ
        <ul>
            <li>リンゴ</li>
            <li>バナナ</li>
            <li>オレンジ</li>
        </ul>
    </li>
    <li>野菜
        <ul>
            <li>にんじん</li>
            <li>キャベツ</li>
        </ul>
    </li>
</ul>

`<ol>`: 順序付きリスト

<ol>は、「順序付きリスト」と呼ばれるリストを作成するために使用します。このリストでは、項目の順番が重要な場合に使います。例えば、手順やランキングのように、リスト項目の順番に意味がある時に使用します。

<ol>
    <li>お湯を沸かす</li>
    <li>コーヒーを入れる</li>
    <li>ミルクを加える</li>
</ol>

ブラウザでは、<ol>タグ内のリストアイテムが番号付きで表示されます。デフォルトでは、1から始まる番号が付けられ、順番通りにリスト項目が表示されます。

CSSを追加して整えよう

HTMLファイルのtitle要素の下にstyle要素を追加し、下記の画面プレビューと同じような雰囲気になるようなCSSを追加してみましょう。

完成見本

HTML/CSSのコード例

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>エコロジーと環境問題 [Computer Technology Groups]</title>
    <style>
        body {
            background-color: #ffffe0;
            font-size: 100%;
            line-height: 1.8;
        }

        article {
            width: 600px;
            border: 1px solid #000000;
            padding: 1em;
            margin: 0 auto;
        }

        section h1 {
            border: 1px solid #999;
            padding: 0.5rem;
            text-align: center;
            /*白の80%透明の記述*/
            background-color: #fff;
        }

        ul {
            list-style: disc;
        }

        ol {
            list-style: upper-roman;
        }

        .center {
            text-align: center;
        }
    </style>

</head>

<body>
    <article>
        <!-- エコロジーについて -->
        <section>
            <h1>ECOLOGY【エコロジー】</h1>
            <p>
                Computer Technology Groupsでは、グループをあげてエコロジー／環境問題に取り組んでいます。
                成果や実績を地域に還元することもポリシーとしています。
            </p>
        </section>

        <!-- 商品のラインナップ -->
        <section>
            <h1>商品のラインナップ</h1>
            <p>
                紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。
                リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。
            </p>
        </section>

        <!-- リサイクル商品 -->
        <section>
            <h1>リサイクル商品</h1>
            <ul>
                <li>ノートやメモ帳などの紙製品</li>
                <li>ペットボトル</li>
                <li>布製品</li>
                <li>ダンボール／梱包材</li>
                <li>木工製品／割り箸・爪楊枝など</li>
                <li>コンピューター基盤／電子機器</li>
            </ul>
        </section>

        <!-- 省エネ商品の使い方 -->
        <section>
            <h1>省エネ商品の使い方</h1>
            <ol>
                <li>消費電力を計測する機器を設置</li>
                <li>電源を自動的にオフにするキットの用意</li>
                <li>水量を調節する蛇口セットの準備</li>
                <li>家庭用省エネ10点セット</li>
            </ol>
        </section>
    </article>

    <footer>
        <p class="center"><small>Copyright © Computer Technology Groups All rights reserved.</small></p>
    </footer>
</body>

</html>

`<ul>`に関するプロパティ

list-style-type: disc;
順不同リスト（<ul>）の各リスト項目の前に表示されるマーカーを「ディスク（丸い点）」に設定します。このプロパティはリストの外観を変更するために使用されます。
- disc: デフォルトのスタイルで、丸い点がリスト項目の前に表示されます。
- 他の値:
  - circle: 空の丸い点
  - square: 四角い点
margin-left: 20px;
リスト全体を左に20pxずらして、リスト項目のインデントを追加しています。これにより、リストの内容が他の要素（例えば本文）から少し右に寄ります。

`<ol>`に関するプロパティ

list-style-type: upper-roman;
順序付きリスト（<ol>）の項目にローマ数字（大文字）を表示します。
- upper-roman: 項目の番号が大文字のローマ数字で表示されます（例: I, II, III）。
- 他の値:
  - decimal: 通常の数字（1, 2, 3）
  - lower-alpha: 小文字アルファベット（a, b, c）
  - lower-roman: 小文字ローマ数字（i, ii, iii）
margin-left: 20px;
リスト全体を左に20pxずらして、リスト項目にインデントを追加しています。<ul>と同様に、これによりリストが他の要素から右に寄ります。