HTMLとCSSで横並びメニューを作成する方法

HTML CSS

HTMLとCSSで横並びメニューを作成する方法

横並びメニューをHTMLとCSSで作成する方法を示す例を以下に示します。
コードはHTMLとCSSを別ファイルに分けて記述しています。
HTMLのコードは index.html というファイルに、CSSのコードは styles.css というファイルに保存します。
クラス名やID名には test- というプレフィックスを使用しています。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>横並びメニューの例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <nav class="test-navbar">
    <ul class="test-menu">
      <li class="test-menu-item"><a href="#" class="test-menu-link">ホーム</a></li>
      <li class="test-menu-item"><a href="#" class="test-menu-link">サービス</a></li>
      <li class="test-menu-item"><a href="#" class="test-menu-link">お問い合わせ</a></li>
      <li class="test-menu-item"><a href="#" class="test-menu-link">会社概要</a></li>
    </ul>
  </nav>
</body>
</html>

styles.css

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.test-navbar {
  background-color: #333;
}

.test-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.test-menu-item {
  margin: 0;
}

.test-menu-link {
  display: block;
  padding: 14px 20px;
  color: #fff;
  text-decoration: none;
  text-align: center;
}

.test-menu-link:hover {
  background-color: #575757;
}

この例では、test-navbar クラスを持つ nav 要素がナビゲーションバーを定義しています。
その中の test-menu クラスを持つ ul 要素がリストのスタイルを設定し、test-menu-item クラスを持つ li 要素がメニュー項目を定義しています。
それぞれのメニュー項目は、test-menu-link クラスを持つ a 要素でリンクされており、CSSでスタイルが適用されています。

CSSのスタイルでは、display: flex を使用してリスト項目を横並びに配置し、test-menu-link クラスでリンクのスタイルを設定しています。
test-menu-link:hover でホバー時の背景色を変更しています。