第6回 リストとナビゲーションの作成 – ul, ol, li タグの使用方法 – HTML入門講座

はじめに

ウェブページで情報を整理してわかりやすく表示するために、リストとナビゲーションメニューは欠かせない要素です。リストはアイテムを順序立てて表示するのに適しており、ナビゲーションメニューはウェブサイト内のページを移動するためのガイドとして機能します。今回の講座では、HTMLでリストを作成する方法と、それを使ってナビゲーションメニューを作る方法を学びましょう。

リストの基本

HTMLには、リストを作成するために2つの基本的な要素があります：<ul>（順序なしリスト）と<ol>（順序付きリスト）です。それぞれのリスト内に、個々の項目を<li>タグで定義します。

順序なしリスト（<ul>）

順序なしリストは、箇条書きのリストを作成するために使用されます。各リスト項目には<li>タグを使います。

<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

このコードは、以下のように表示されます：

• 項目1
• 項目2
• 項目3

順序付きリスト（<ol>）

順序付きリストは、項目に番号を付けてリストを作成する場合に使用されます。こちらも同様に、<li>タグを使って各項目を定義します。

<ol>
  <li>最初の項目</li>
  <li>2番目の項目</li>
  <li>3番目の項目</li>
</ol>

このコードは、以下のように表示されます：

1. 最初の項目
2. 2番目の項目
3. 3番目の項目

入れ子リスト

リストの中にリストを作成する「入れ子リスト」を作ることもできます。入れ子リストを使うと、複雑な階層的な情報を整理することができます。

<ul>
  <li>項目1
    <ul>
      <li>サブ項目1</li>
      <li>サブ項目2</li>
    </ul>
  </li>
  <li>項目2</li>
</ul>

この例では、項目1の下にサブ項目が表示される、階層的なリストが作成されます。

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

ナビゲーションメニューは、ユーザーがウェブサイト内を移動するための案内役です。ナビゲーションメニューを作成するには、<ul>タグを使ってリスト形式にし、そのリスト項目をリンク（<a>タグ）にします。これは非常に一般的な方法で、シンプルなメニューから複雑なドロップダウンメニューまで、さまざまなナビゲーションが作成可能です。

基本的なナビゲーションメニュー

以下は、シンプルなナビゲーションメニューの例です：

<nav>
  <ul>
    <li><a href="index.html">ホーム</a></li>
    <li><a href="about.html">このサイトについて</a></li>
    <li><a href="contact.html">お問い合わせ</a></li>
  </ul>
</nav>

このコードでは、3つのリンクを含むシンプルなナビゲーションメニューが作成されています。「ホーム」「このサイトについて」「お問い合わせ」のリンクがそれぞれ設定されています。

水平ナビゲーションメニュー

デフォルトでは、<ul> タグを使ったリストは縦に並んで表示されますが、CSSを使って水平に配置することができます。以下は、CSSを使って水平ナビゲーションメニューを作成する例です。

<style>
nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 15px;
}
</style>

<nav>
  <ul>
    <li><a href="index.html">ホーム</a></li>
    <li><a href="about.html">このサイトについて</a></li>
    <li><a href="contact.html">お問い合わせ</a></li>
  </ul>
</nav>

このCSSでは、<ul>のリストスタイルを削除し、各リスト項目を横並び（inline）にしています。また、項目間に適度なスペースを確保しています。

ドロップダウンメニューの基本

ナビゲーションメニューの中には、サブメニューを持つ「ドロップダウンメニュー」もよく使われます。ドロップダウンメニューを作成するには、リストの中に入れ子リストを配置し、CSSでサブメニューを隠したり表示したりします。

<style>
nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    position: relative;
    display: inline-block;
    margin-right: 15px;
}

nav ul li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    padding: 0;
    list-style-type: none;
    border: 1px solid #ccc;
}

nav ul li:hover ul {
    display: block;
}
</style>

<nav>
  <ul>
    <li><a href="index.html">ホーム</a></li>
    <li><a href="services.html">サービス</a>
      <ul>
        <li><a href="webdesign.html">ウェブデザイン</a></li>
        <li><a href="seo.html">SEO</a></li>
      </ul>
    </li>
    <li><a href="contact.html">お問い合わせ</a></li>
  </ul>
</nav>

このコードでは、メインメニューの「サービス」にカーソルを合わせると、サブメニューが表示されるドロップダウンメニューが作成されます。CSSの:hover擬似クラスを使って、マウスオーバー時にサブメニューを表示するようにしています。

まとめ

今回は、リストを使った情報の整理方法と、それを利用してナビゲーションメニューを作成する方法を学びました。リストは、順序や階層を整理するために非常に便利なツールであり、ナビゲーションメニューとしてもウェブサイトの案内役として不可欠です。次回は、テーブルの作成方法について学び、データを効率的に表示する方法を見ていきます。