【6日でできるHTML入門】リストの作成と活用

　ホームページで項目を箇条書きしたり、メニューを構築したりするときに活躍するのが「リスト」タグです。HTMLには順序なしリスト（<ul>）、順序付きリスト（<ol>）、およびそれらの入れ子構造を作るしくみが用意されており、CSSでマーカーやインデントを自在にカスタマイズできます。ここでは、リストの基本から応用まで、豊富なサンプルとともに解説します。

１．リストの基本

素材のダウンロード

以下のリンクから画像素材をダウンロードできます。

creating-using-listsダウンロード
coffee.png

1.1. 順序なしリスト <ul> と <li>

用途：箇条書きで並べたい項目をまとめる。

構文：

<ul>
  <li>項目A</li>
  <li>項目B</li>
  <li>項目C</li>
</ul>

出力例：

• 項目A
• 項目B
• 項目C

ファイル名： lesson25-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>📝 箇条書きリスト</title>
</head>
<body>
  <h1>📝 今日のやること</h1>
  <ul>
    <li>メールチェック</li>
    <li>ミーティング</li>
    <li>レポート作成</li>
    <li>コードレビュー</li>
  </ul>
</body>
</html>

ブラウザの出力例

1.2. 順序付きリスト <ol> と <li>

用途：手順やランキングなど、番号を付けて並べたいときに使う。

構文：

<ol>
  <li>ステップ1</li>
  <li>ステップ2</li>
  <li>ステップ3</li>
</ol>

出力例：

1. ステップ1
2. ステップ2
3. ステップ3

ファイル名： lesson25-2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🔢 手順リスト</title>
</head>
<body>
  <h1>🔢 アプリのインストール手順</h1>
  <ol>
    <li>公式サイトを開く</li>
    <li>ダウンロードボタンをクリック</li>
    <li>インストーラーを実行</li>
    <li>セットアップ完了</li>
  </ol>
</body>
</html>

ブラウザの出力例

1.3. リストの階層化（入れ子）

<li> 内にさらに <ul> や <ol> を入れることで、階層構造のリストを作成できる。

例： <ol> <li>準備 <ul> <li>資料収集</li> <li>環境構築</li> </ul> </li> <li>実行</li> <li>報告</li> </ol>

<ol>
  <li>準備
    <ul>
      <li>資料収集</li>
      <li>環境構築</li>
    </ul>
  </li>
  <li>実行</li>
  <li>報告</li>
</ol>

出力イメージ：

1. 準備
 ・ 資料収集
 ・ 環境構築
2. 実行
3. 報告

ファイル名： lesson25-3.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>📑 階層化リスト</title>
</head>
<body>
  <h1>📑 プロジェクトの流れ</h1>
  <ol>
    <li>設計
      <ul>
        <li>要件定義</li>
        <li>デザイン</li>
      </ul>
    </li>
    <li>開発</li>
    <li>テスト</li>
    <li>リリース</li>
  </ol>
</body>
</html>

ブラウザの出力例

２．リストのカスタマイズ

2.1. マーカーの種類指定 list-style-type

  • CSSでリストマーカー（箇条書き記号や番号）の種類を変更できる。
  • 主な値:
値マーカー表示例
none（マーカーなし）
disc●（黒丸）（ulの初期値）
circle○（白丸）
square■（四角）
decimal1, 2, 3, …（olの初期値）
decimal-leading-zero01, 02, 03, …
lower-romani, ii, iii, iv, …
upper-romanI, II, III, IV, …
lower-alphaa, b, c, d, …
upper-alphaA, B, C, D, …
lower-greekα, β, γ, δ, …

ファイル名： lesson25-4.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🔘 マーカーの変更</title>
  <style>
    ul.custom { list-style-type:circle; }
    ol.custom { list-style-type:upper-roman; }
  </style>
</head>
<body>
  <h1>🔘 マーカーカスタム例</h1>
  <ul class="custom">
    <li>項目A</li>
    <li>項目B</li>
    <li>項目C</li>
  </ul>
  <ol class="custom">
    <li>第一段階</li>
    <li>第二段階</li>
    <li>第三段階</li>
  </ol>
</body>
</html>

ブラウザの出力例

2.2. マーカーに画像を使う list-style-image

自作アイコンをリストマーカーとして設定できる。

指定例：

ul.icon-list {
  list-style-image: url("icon-dot.png");
}

ファイル名： lesson25-5.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🖼️ 画像マーカー</title>
  <style>
    ul.icon-list {
      list-style-image: url("coffee.png");
    }
  </style>
</head>
<body>
  <h1>🖼️ コーヒーメニュー</h1>
  <ul class="icon-list">
    <li>ホットコーヒー</li>
    <li>アイスコーヒー</li>
    <li>カプチーノ</li>
    <li>エスプレッソ</li>
  </ul>
</body>
</html>

ブラウザの出力例

2.3. リストを使ったナビゲーション

メニューをリスト化し、floatやdisplay:inline-blockで横並びにしてよく使われる。

ファイル名： lesson25-6.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🔗 ナビゲーションメニュー</title>
  <style>
    ul.nav{
      list-style:none;
      padding:0;
    }
    ul.nav li{
      display:inline-block;
      margin-right:15px;
    }
    ul.nav a{
      text-decoration:none;
      color:#0066CC;
    }
    ul.nav a:hover{
      color:#CC0000;
    }
  </style>
</head>
<body>
  <h1>🔗 サイトメニュー</h1>
  <ul class="nav">
    <li><a href="home.html">ホーム</a></li>
    <li><a href="about.html">当社について</a></li>
    <li><a href="services.html">サービス</a></li>
    <li><a href="contact.html">お問い合わせ</a></li>
  </ul>
</body>
</html>

ファイル名： home.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🏠 Home</title>
  <style>
    body { font-family: sans-serif; margin: 20px; }
    ul.nav {
      list-style: none;
      padding: 0;
      margin-bottom: 20px;
      background-color: #f0f0f0;
    }
    ul.nav li {
      display: inline-block;
      margin-right: 15px;
    }
    ul.nav a {
      text-decoration: none;
      color: #0066CC;
      padding: 8px 12px;
      display: inline-block;
    }
    ul.nav a:hover {
      background-color: #0066CC;
      color: #FFFFFF;
    }
  </style>
</head>
<body>
  <h1>🏠 Home</h1>
  <ul class="nav">
    <li><a href="home.html">ホーム</a></li>
    <li><a href="about.html">当社について</a></li>
    <li><a href="services.html">サービス</a></li>
    <li><a href="contact.html">お問い合わせ</a></li>
  </ul>

  <p>ようこそ当社のウェブサイトへ！こちらはトップページです。最新情報やおすすめコンテンツをご覧いただけます。</p>
</body>
</html>

ファイル名： about.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ℹ️ About</title>
  <style>
    body { font-family: sans-serif; margin: 20px; }
    ul.nav {
      list-style: none;
      padding: 0;
      margin-bottom: 20px;
      background-color: #f0f0f0;
    }
    ul.nav li {
      display: inline-block;
      margin-right: 15px;
    }
    ul.nav a {
      text-decoration: none;
      color: #0066CC;
      padding: 8px 12px;
      display: inline-block;
    }
    ul.nav a:hover {
      background-color: #0066CC;
      color: #FFFFFF;
    }
  </style>
</head>
<body>
  <h1>ℹ️ 当社について</h1>
  <ul class="nav">
    <li><a href="home.html">ホーム</a></li>
    <li><a href="about.html">当社について</a></li>
    <li><a href="services.html">サービス</a></li>
    <li><a href="contact.html">お問い合わせ</a></li>
  </ul>

  <p>当社は1990年創業のITソリューションプロバイダーです。<br>
     システム開発から運用サポートまで一貫したサービスを提供しています。</p>
</body>
</html>

ファイル名： services.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>💼 Services</title>
  <style>
    body { font-family: sans-serif; margin: 20px; }
    ul.nav {
      list-style: none;
      padding: 0;
      margin-bottom: 20px;
      background-color: #f0f0f0;
    }
    ul.nav li {
      display: inline-block;
      margin-right: 15px;
    }
    ul.nav a {
      text-decoration: none;
      color: #0066CC;
      padding: 8px 12px;
      display: inline-block;
    }
    ul.nav a:hover {
      background-color: #0066CC;
      color: #FFFFFF;
    }
    ul.services {
      margin-top: 10px;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h1>💼 サービス</h1>
  <ul class="nav">
    <li><a href="home.html">ホーム</a></li>
    <li><a href="about.html">当社について</a></li>
    <li><a href="services.html">サービス</a></li>
    <li><a href="contact.html">お問い合わせ</a></li>
  </ul>

  <h2>提供サービス一覧</h2>
  <ul class="services">
    <li>Webシステム開発</li>
    <li>モバイルアプリ開発</li>
    <li>クラウドインテグレーション</li>
    <li>運用・保守サポート</li>
  </ul>
</body>
</html>

ファイル名： contact.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>✉️ Contact</title>
  <style>
    body { font-family: sans-serif; margin: 20px; }
    ul.nav {
      list-style: none;
      padding: 0;
      margin-bottom: 20px;
      background-color: #f0f0f0;
    }
    ul.nav li {
      display: inline-block;
      margin-right: 15px;
    }
    ul.nav a {
      text-decoration: none;
      color: #0066CC;
      padding: 8px 12px;
      display: inline-block;
    }
    ul.nav a:hover {
      background-color: #0066CC;
      color: #FFFFFF;
    }
    form {
      margin-top: 10px;
      max-width: 400px;
    }
    label {
      display: block;
      margin-top: 10px;
    }
    input, textarea {
      width: 100%;
      padding: 6px;
      box-sizing: border-box;
    }
    button {
      margin-top: 10px;
      padding: 8px 16px;
    }
  </style>
</head>
<body>
  <h1>✉️ お問い合わせ</h1>
  <ul class="nav">
    <li><a href="home.html">ホーム</a></li>
    <li><a href="about.html">当社について</a></li>
    <li><a href="services.html">サービス</a></li>
    <li><a href="contact.html">お問い合わせ</a></li>
  </ul>

  <form action="#" method="post">
    <label for="name">お名前</label>
    <input type="text" id="name" name="name" placeholder="山田 太郎">

    <label for="email">メールアドレス</label>
    <input type="email" id="email" name="email" placeholder="taro@example.com">

    <label for="message">お問い合わせ内容</label>
    <textarea id="message" name="message" rows="5"></textarea>

    <button type="submit">送信する</button>
  </form>
</body>
</html>

ブラウザの出力例

まとめ

  • <ul>/<ol> でリストを作成し、<li> で各項目を定義。
  • CSS の list-style-type/list-style-image でマーカーを自在にカスタマイズ。
  • リストの階層化やナビゲーションメニューへの応用でレイアウトの幅が広がる。

各種プロパティの使い方をマスターして、わかりやすく美しい箇条書き・メニューを実装しましょう。