HTML&CSSで作るナビゲーション

はじめに

Webサイトの「ナビゲーション」は、ユーザーが迷わず目的のページにたどり着くための重要な要素です。この記事では、HTMLとCSSだけで作れるシンプルかつおしゃれなナビゲーションの基本と、ちょっとした工夫（Tips）を紹介します。初心者の方でも理解できるよう、サンプルコード付きで解説します。

ナビゲーションの基本

まずは、HTMLとCSSだけで実装できるベーシックなナビゲーションを作ってみましょう。

index.html

<nav>
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">サービス</a></li>
    <li><a href="#">お問い合わせ</a></li>
    <li><a href="#">会社概要</a></li>
  </ul>
</nav>

style.css

nav ul {
  list-style: none;
  display: flex;
  gap: 24px;
  padding: 0;
}
nav li a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

• ulでメニュー項目をリスト化
• flexで横並びに
• aタグでリンク化

おしゃれなナビゲーション

CSSを工夫することで、ナビゲーションを「おしゃれ」にすることができます。ここではホバーエフェクトやシンプルな下線アニメーション例を紹介します。

style.css

/* ここから */
nav li a {
  position: relative;
  padding: 4px 8px;
  transition: color 0.3s;
}

nav li a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 2px;
  background: #3498db;
  transform: scaleX(0);
  transition: transform 0.3s;
}

nav li a:hover {
  color: #3498db;
}

nav li a:hover::after {
  transform: scaleX(1);
}
/* ここまで追記 */

hoverすると上の画像のように変化します。

Tips

• レスポンシブ対応
  メディアクエリを使えば、スマホでも見やすいメニューにできます

• ハンバーガーメニュー
  JavaScriptを使わずCSSだけで簡易ハンバーガーメニューも可能です

• アイコン活用
  FontAwesomeやSVGでメニューにアイコンをつけると視認性UP

• アクセシビリティ
  aria-labelやnavタグで意味づけをすることでSEOにも効果あり

最後に

HTMLとCSSだけでも、工夫次第でおしゃれな使いやすいナビゲーションを作ることができます。この記事がナビゲーション作成の参考になれば幸いです。