HTMLでのドロップダウンメニューの作成 – HTMLで始めるホームページ作成

HTMLでのドロップダウンメニューの作成

ホームページを構築する際、ナビゲーションメニューは欠かせない要素の一つです。ドロップダウンメニューを使うことで、メニューを整理しやすく、ユーザーにとっても使いやすいレイアウトを提供できます。今回は、HTMLでシンプルなドロップダウンメニューを作成する方法をご紹介します。

基本的なHTML構造

まず、基本的なHTMLの構造を理解しましょう。ドロップダウンメニューはリスト形式で作成することが一般的です。<ul>と<li>タグを使ってメニューをリスト化します。


<ul>
  <li>メニュー1</li>
  <li>メニュー2
    <ul>
      <li>サブメニュー1</li>
      <li>サブメニュー2</li>
    </ul>
  </li>
  <li>メニュー3</li>
</ul>

スタイルの適用

次に、CSSを使ってドロップダウンメニューにスタイルを適用します。スタイルシートでリストの外観を整え、サブメニューを隠すことができます。これにより、ユーザーがメニュー項目にホバーしたとき、サブメニューが表示されるようになります。


ul {
  list-style-type: none;
}
ul li {
  position: relative;
}
ul li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}
ul li:hover ul {
  display: block;
}

実例

最後に、実際に動作するドロップダウンメニューの例を見てみましょう。以下のコードは、HTMLとCSSの全体をまとめたものです。


<!DOCTYPE html>
<html>
<head>
  <style>
    ul {
      list-style-type: none;
    }
    ul li {
      position: relative;
      display: inline-block;
    }
    ul li ul {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }
    ul li:hover ul {
      display: block;
    }
    ul li ul li {
      display: block;
    }
    ul li ul li a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    ul li ul li a:hover {
      background-color: #f1f1f1;
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="#" rel="nofollow" target="_blank" title="リンクのタイトル" aria-label="リンクのタイトル">メニュー1</a></li>
    <li><a href="#" rel="nofollow" target="_blank" title="リンクのタイトル" aria-label="リンクのタイトル">メニュー2</a>
      <ul>
        <li><a href="#" rel="nofollow" target="_blank" title="リンクのタイトル" aria-label="リンクのタイトル">サブメニュー1</a></li>
        <li><a href="#" rel="nofollow" target="_blank" title="リンクのタイトル" aria-label="リンクのタイトル">サブメニュー2</a></li>
      </ul>
    </li>
    <li><a href="#" rel="nofollow" target="_blank" title="リンクのタイトル" aria-label="リンクのタイトル">メニュー3</a></li>
  </ul>
</body>
</html>

このようにして、シンプルで使いやすいドロップダウンメニューを作成できます。さらに、さまざまなスタイルを追加して独自のデザインを作成することも可能です。ホームページのナビゲーションをより魅力的にするために、ぜひ試してみてください。

コメントを残す