ulタグの使い方【HTMLリファレンス】

2024-06-012024-07-23

この記事では、HTMLのulタグについて学びます。

ulタグは、順序なしリストを作成するためのタグで、買い物リストやナビゲーションメニューなど、さまざまな用途に使われます。

基本的な使い方から具体的な使用例、スタイリング方法、応用例まで、初心者でもわかりやすく解説します。

これを読めば、ulタグを使ってリストを作成し、カスタマイズする方法がわかるようになります。

目次から探す

ulタグとは

ulタグの基本概要

ulタグは、HTMLで使用されるタグの一つで、「unordered list(順序なしリスト)」を作成するために使用されます。

順序なしリストは、項目の順序が特に重要でないリストを表現する際に利用されます。

例えば、買い物リストやタスクリストなどが該当します。

ulタグの用途

ulタグは、以下のような用途で使用されます。

買い物リスト: 食材や日用品のリストを作成する際に使用します。
タスクリスト: 完了すべきタスクのリストを作成する際に使用します。
ナビゲーションメニュー: ウェブサイトのメニューを作成する際に使用します。
その他のリスト: 順序が重要でない情報をリスト化する際に使用します。

ulタグの基本構文

ulタグの基本的な書き方

ulタグの基本的な書き方は以下の通りです。

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

この例では、ulタグの中に複数のliタグ(リストアイテム)が含まれています。

liタグは、リストの各項目を表します。

liタグとの関係

ulタグとliタグは密接な関係にあります。

ulタグはリスト全体を囲むタグであり、liタグはその中の各項目を表します。

以下に、ulタグとliタグの関係を示す例を示します。

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

この例では、ulタグがリスト全体を囲み、その中に3つのliタグが含まれています。

それぞれのliタグがリストの項目を表しています。

実行結果は以下のようになります。

リンゴ
バナナ
オレンジ

このように、ulタグとliタグを組み合わせることで、順序なしリストを簡単に作成することができます。

ulタグの具体的な使用例

シンプルなリストの作成

ulタグを使ってシンプルなリストを作成する方法を見てみましょう。

以下の例では、果物のリストを作成しています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>シンプルなリストの例</title>
</head>
<body>
    <ul>
        <li>りんご</li>
        <li>バナナ</li>
        <li>オレンジ</li>
    </ul>
</body>
</html>

このコードをブラウザで表示すると、以下のようなリストが表示されます。

りんご
バナナ
オレンジ

ulタグはリスト全体を囲み、liタグは各リストアイテムを表します。

このように、ulタグとliタグを組み合わせることで、簡単にリストを作成することができます。

ネストされたリストの作成

次に、ネストされたリストを作成する方法を見てみましょう。

ネストされたリストは、リストの中にさらにリストを含めることができる構造です。

以下の例では、果物の種類をさらに細かく分類しています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ネストされたリストの例</title>
</head>
<body>
    <ul>
        <li>果物
            <ul>
                <li>りんご</li>
                <li>バナナ</li>
                <li>オレンジ</li>
            </ul>
        </li>
        <li>野菜
            <ul>
                <li>にんじん</li>
                <li>じゃがいも</li>
                <li>トマト</li>
            </ul>
        </li>
    </ul>
</body>
</html>

このコードをブラウザで表示すると、以下のようなネストされたリストが表示されます。

果物
- りんご
- バナナ
- オレンジ
野菜
- にんじん
- じゃがいも
- トマト

このように、liタグの中にさらにulタグを入れることで、ネストされたリストを作成することができます。

リストアイテムにリンクを含める

リストアイテムにリンクを含めることも可能です。

以下の例では、各果物の名前にリンクを追加しています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>リンクを含むリストの例</title>
</head>
<body>
    <ul>
        <li><a href="https://example.com/apple">りんご</a></li>
        <li><a href="https://example.com/banana">バナナ</a></li>
        <li><a href="https://example.com/orange">オレンジ</a></li>
    </ul>
</body>
</html>

このコードをブラウザで表示すると、以下のようなリストが表示されます。

このように、liタグの中にaタグを入れることで、リストアイテムにリンクを追加することができます。

リンクをクリックすると、指定したURLに移動します。

これらの具体的な使用例を通じて、ulタグの基本的な使い方を理解することができました。

次に、ulタグのスタイリング方法について見ていきましょう。

ulタグのスタイリング

HTMLのulタグは、デフォルトのスタイルがブラウザによって提供されますが、CSSを使ってカスタマイズすることができます。

ここでは、デフォルトのスタイルと、CSSを使ったカスタマイズ方法について詳しく解説します。

デフォルトのスタイル

ulタグを使用すると、ブラウザは自動的にリストアイテムにマーカー(通常は黒い丸)を付け、リスト全体にインデントを適用します。

以下は、デフォルトのulタグの例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>デフォルトのulタグ</title>
</head>
<body>
    <ul>
        <li>アイテム1</li>
        <li>アイテム2</li>
        <li>アイテム3</li>
    </ul>
</body>
</html>

このコードをブラウザで表示すると、以下のように見えます。

アイテム1
アイテム2
アイテム3

CSSを使ったカスタマイズ

CSSを使うことで、ulタグのスタイルを自由にカスタマイズすることができます。

以下では、リストマーカーの変更、リストのインデント調整、リストアイテムのカスタマイズについて説明します。

リストマーカーの変更

リストマーカーは、list-style-typeプロパティを使って変更できます。

例えば、デフォルトの黒い丸を四角や数字に変更することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>リストマーカーの変更</title>
    <style>
        ul {
            list-style-type: square; /* 四角のマーカーに変更 */
        }
    </style>
</head>
<body>
    <ul>
        <li>アイテム1</li>
        <li>アイテム2</li>
        <li>アイテム3</li>
    </ul>
</body>
</html>

このコードをブラウザで表示すると、以下のように見えます。

他にも、list-style-typeプロパティには以下のような値があります。

値	説明
disc	黒い丸(デフォルト)
circle	白い丸
square	四角
decimal	数字
none	マーカーなし

リストのインデント調整

リストのインデントは、paddingやmarginプロパティを使って調整できます。

以下は、リストのインデントを変更する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>リストのインデント調整</title>
    <style>
        ul {
            padding-left: 20px; /* インデントを20pxに設定 */
        }
    </style>
</head>
<body>
    <ul>
        <li>アイテム1</li>
        <li>アイテム2</li>
        <li>アイテム3</li>
    </ul>
</body>
</html>

このコードをブラウザで表示すると、リスト全体が左から20pxの位置にインデントされます。

リストアイテムのカスタマイズ

リストアイテム自体もCSSを使ってカスタマイズできます。

例えば、リストアイテムの色やフォントサイズを変更することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>リストアイテムのカスタマイズ</title>
    <style>
        ul {
            list-style-type: disc; /* デフォルトの黒い丸 */
        }
        li {
            color: blue; /* テキストの色を青に変更 */
            font-size: 18px; /* フォントサイズを18pxに設定 */
        }
    </style>
</head>
<body>
    <ul>
        <li>アイテム1</li>
        <li>アイテム2</li>
        <li>アイテム3</li>
    </ul>
</body>
</html>

このコードをブラウザで表示すると、リストアイテムのテキストが青色になり、フォントサイズが18pxに設定されます。

アイテム1
アイテム2
アイテム3

以上が、ulタグのスタイリングに関する基本的な方法です。

CSSを使うことで、リストの見た目を自由にカスタマイズすることができますので、ぜひ試してみてください。

ulタグの応用例

ulタグは単なるリストの作成だけでなく、さまざまな応用が可能です。

ここでは、ナビゲーションメニュー、フォームのステップ表示、タスクリストの作成といった具体的な応用例を紹介します。

ナビゲーションメニューの作成

ナビゲーションメニューは、ウェブサイトの各ページへのリンクを提供する重要な要素です。

ulタグを使って簡単にナビゲーションメニューを作成することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ナビゲーションメニューの例</title>
    <style>
        /* ナビゲーションメニューのスタイル */
        nav ul {
            list-style-type: none; /* デフォルトのリストマーカーを削除 */
            padding: 0;
        }
        nav li {
            display: inline; /* リストアイテムを横並びに */
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#home">ホーム</a></li>
            <li><a href="#about">会社概要</a></li>
            <li><a href="#services">サービス</a></li>
            <li><a href="#contact">お問い合わせ</a></li>
        </ul>
    </nav>
</body>
</html>

この例では、ulタグとliタグを使ってナビゲーションメニューを作成し、CSSでスタイルを調整しています。

リストアイテムを横並びにするために、liタグに対してdisplay: inlineを指定しています。

フォームのステップ表示

フォームのステップ表示は、ユーザーが複数のステップを経て情報を入力する際に役立ちます。

ulタグを使ってステップを視覚的に表示することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>フォームのステップ表示の例</title>
    <style>
        /* ステップ表示のスタイル */
        .steps {
            list-style-type: none; /* デフォルトのリストマーカーを削除 */
            padding: 0;
            display: flex;
            justify-content: space-between;
        }
        .steps li {
            width: 30%;
            text-align: center;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .steps .active {
            background-color: #4CAF50;
            color: white;
        }
    </style>
</head>
<body>
    <ul class="steps">
        <li class="active">ステップ1</li>
        <li>ステップ2</li>
        <li>ステップ3</li>
    </ul>
</body>
</html>

この例では、ulタグとliタグを使ってフォームのステップ表示を作成し、CSSでスタイルを調整しています。

現在のステップを示すために、activeクラスを使用しています。

タスクリストの作成

タスクリストは、やるべきことをリストアップする際に便利です。

ulタグを使ってタスクリストを作成し、チェックボックスを追加することで、タスクの完了状況を管理できます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タスクリストの例</title>
    <style>
        /* タスクリストのスタイル */
        .task-list {
            list-style-type: none; /* デフォルトのリストマーカーを削除 */
            padding: 0;
        }
        .task-list li {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <ul class="task-list">
        <li><input type="checkbox"> タスク1</li>
        <li><input type="checkbox"> タスク2</li>
        <li><input type="checkbox"> タスク3</li>
    </ul>
</body>
</html>