CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでナビゲーションバーの現在のページ（アクティブリンク）をスタイリングする方法

Webサイトのナビゲーションバーでは、ユーザーが今どのページを見ているのかをひと目でわかるように、現在表示中のリンク（アクティブなリンク）を目立たせるのが一般的です。CSSを使えば、この実装は非常にシンプルに行えます。

基本的な考え方は、現在のページに対応するリンクに対して active などのクラスを付与し、そのクラスに対して専用のスタイルを定義するというものです。背景色や文字色を変更することで、他のリンクと視覚的に区別できます。

実装例

以下のコードは、ナビゲーションバー内の「Company」というリンクに active クラスを付け、緑色の背景と白い文字で強調表示する例です。

<!DOCTYPE html>
<html>
<head>
<style>
  ul {
    list-style-type: none;
    margin: 5px;
    padding: 5px;
  }
  li a {
    display: block;
    width: 70px;
    background-color: #F0E7E7;
  }
  .active {
    background-color: #4CAF50;
    color: white;
  }
</style>
</head>
<body>
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#company" class="active">Company</a></li>
  <li><a href="#product">Product</a></li>
  <li><a href="#services">Services</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>
</body>
</html>

コードのポイント解説

1. リストのデフォルトスタイルをリセット

list-style-type: none; を指定することで、箇条書きの「・」マークを非表示にし、ナビゲーションバーらしい見た目にしています。また、margin と padding も調整して余白を整えています。

2. リンクをブロック要素に変更

display: block; を指定すると、リンク全体がクリック可能な領域になり、ユーザビリティが向上します。width で各メニュー項目の幅を揃えることで、見た目もすっきりします。

3. .activeクラスで現在のページを強調

.active セレクターに対して background-color: #4CAF50;（緑）と color: white;（白文字）を指定することで、現在のページである「Company」だけが明確に強調されます。

応用：動的にアクティブクラスを切り替えるには

静的なHTMLでは、各ページごとに手動で class="active" を記述しますが、JavaScriptを使えばクリックされたリンクに自動的にクラスを付与することもできます。

const links = document.querySelectorAll('ul li a');
links.forEach(link => {
  link.addEventListener('click', function() {
    links.forEach(l => l.classList.remove('active'));
    this.classList.add('active');
  });
});

また、PHPやテンプレートエンジンなどサーバーサイドでページを生成している場合は、現在のURLとリンク先を比較して自動的に active クラスを出力する方法もよく使われます。

このように、CSSの .active クラスを活用すれば、少ないコードで直感的に操作できるナビゲーションバーを実現できます。

  1. CSSだけで作る！ドロップダウンナビゲーションバーの実装方法

    CSSだけを使えば、JavaScriptに頼らずにドロップダウン式のナビゲーションバーを実装できます。ポイントは:hover疑似クラスとdisplayプロパティの切り替えです。ここでは、実際にそのまま動作するサンプルコードを紹介します。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> .menu-btn {  

  2. CSSで作る！スクロール時に画面上部へ固定されるナビゲーションバーの実装方法

    CSSでスクロール時に固定されるナビゲーションバーを作成する方法Webサイトでページをスクロールしても画面上部に固定され続けるナビゲーションバーは、メニューへのアクセス性を保ち、ユーザビリティを大きく向上させる定番のUIテクニックです。CSSのpositionプロパティとJavaScriptを組み合わせることで、誰でも簡単に実装できます。この記事では、スクロールするとナビゲーションバーが画面上部にピタッと固定される仕組みを、実際のコード例とともにわかりやすく解説します。positionプロパティの基本構文CSSにおけるpositionプロパティの基本構文は次のとおりです。セレクタ {