CSSナビゲーションの作り方と問題点、対処法と応用例【最新版】 | 初心者向けCSSナビゲーション入門

はじめに
●CSSナビゲーションの作り方
●CSSナビゲーションの応用例
●CSSナビゲーションの問題点と対処法
- ○レスポンシブデザインに対応しない
- ○セキュリティの問題
まとめ

はじめに

Webページを作成する上で、ナビゲーションバーは非常に重要な要素の一つです。

ユーザーがサイト内を簡単に移動できるようにするために、ナビゲーションバーは設置する必要があります。

CSSを使ってナビゲーションバーを作成する方法を、初心者向けに解説します。

●CSSナビゲーションの作り方

まずは、基本的なCSSナビゲーションの作り方を解説します。

次のサンプルコードを参考にしてください。

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

/* CSS */
nav {
  background-color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav ul {
  list-style: none;
  display: flex;
}

nav li {
  margin-right: 1rem;
}

nav a {
  color: white;
  text-decoration: none;
}

上記のサンプルコードでは、nav要素には背景色、flexboxを使用したレイアウト、ul要素にはリストを非表示に、li要素には余白を追加し、a要素にはテキストカラーと下線を非表示に設定しました。

これにより、シンプルなナビゲーションバーを作成することができます。

●CSSナビゲーションの応用例

次に、CSSナビゲーションの応用例を紹介します。

次のサンプルコードを参考にしてください。

<nav>
  <div class="logo">Logo</div>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a>
      <ul>
        <li><a href="#">Product 1</a></li>
        <li><a href="#">Product 2</a></li>
        <li><a href="#">Product 3</a></li>
      </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

/* CSS */
nav {
  background-color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.logo {
  color: white;
  font-size: 2rem;
  font-weight: bold;
}

nav ul {
  list-style: none;
  display: flex;
}

nav li {
  margin-right: 1rem;
  position: relative;
}

nav a {
  color: white;
  text-decoration: none;
  padding: 0.5rem;
  display: block;
}

nav ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #333;
  min-width: 200px;
  display: none;
}

nav ul li:hover > ul {
  display: block;
}

上記のサンプルコードでは、ナビゲーションバーの左側にロゴを表示し、リストの階層を追加して、ドロップダウンメニューを作成しています。

リストの階層を追加することで、ナビゲーションバーのメニューをより複雑なものにすることができます。

ドロップダウンメニューの表示は、親要素に:hoverを設定し、子要素にdisplay: blockを設定することで実現しています。

また、子要素の位置はposition: absoluteを設定することで、親要素からの位置を指定しています。

●CSSナビゲーションの問題点と対処法

CSSナビゲーションには、いくつかの問題点があります。

ここでは、代表的な問題点とその対処法について解説します。

○レスポンシブデザインに対応しない

CSSナビゲーションは、デスクトップ向けに作られており、モバイル端末などの小さい画面には対応していません。

解決策としては、メニューボタンをクリックするとドロップダウンメニューが表示されるようにすることが挙げられます。

<nav>
  <div class="logo">Logo</div>
  <input type="checkbox" id="menu">
  <label for="menu">&#9776;</label>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a>
      <ul>
        <li><a href="#">Product 1</a></li>
        <li><a href="#">Product 2</a></li>
        <li><a href="#">Product 3</a></li>
      </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

/* CSS */
nav {
  background-color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.logo {
  color: white;
  font-size: 2rem;
  font-weight: bold;
}

nav ul {
  list-style: none;
  display: none;
}

nav li {
  margin-right: 1rem;
  position: relative;
}

nav a {
  color: white;
  text-decoration: none;
  padding: 0.5rem;
  display: block;
}

nav ul ul {
  position: absolute;
  top: 0;
  left: 100%;
  background-color: #333;
  min-width: 200px;
  display: none;
}

nav ul li:hover > ul {
  display: block;
}

input[type="checkbox"] {
  display: none;
}

label[for="menu"] {
  color: white;
  font-size: 2rem;
  cursor: pointer;
  display: block;
  position: relative;
  z-index: 1;
}

label[for="menu"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
  display: none;
}

input[type="checkbox"]:checked + label[for="menu"]::before {
  display: block;
}

input[type="checkbox"]:checked + label[for="menu"] + ul {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #333;
}

上記のサンプルコードでは、メニューボタンをクリックするとドロップダウンメニューが表示されるようにしています。

メニューボタンは、input要素とlabel要素を使って実装しています。

また、ドロップダウンメニューの表示は、input要素の:checked状態に応じてCSSを適用することで実現しています。

○セキュリティの問題

CSSナビゲーションは、HTMLのリストを使って作られているため、ユーザーが不正な値を入力することにより、セキュリティの問題が発生する可能性があります。

解決策としては、サニタイズ処理を行うことが挙げられます。

次のサンプルコードを参考に、サニタイズ処理を実装します。

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

/* JavaScript */
const links = document.querySelectorAll("nav a");
links.forEach((link) => {
  link.addEventListener("click", (event) => {
    event.preventDefault();
    const url = link.getAttribute("href");
    const sanitizedUrl = sanitizeUrl(url);
    window.location.href = sanitizedUrl;
  });
});

function sanitizeUrl(url) {
  return url.replace(/[^a-zA-Z0-9]/g, "");
}

上記のサンプルコードでは、JavaScriptを使ってサニタイズ処理を実装しています。

a要素のクリックイベントをキャッチして、URLを取得してサニタイズ処理を行った後、window.location.hrefに設定することで、安全なURLにリダイレクトします。