2021.09.20 2021.09.22

【カレント表示】現在ページだけデザインを変える方法 6選【ナビ】

この記事は、最初の投稿から3年以上が経過しています。

最終更新から1156日が経過しています。

「ヘッダーやサイドバーのナビ(メニューリスト)で現在のページへのリンクだけデザインを変えたい」

こんな悩みにお答えします｡

じつは､静的HTMLサイトであれば､現在のページへのリンクだけデザインを変えるにはCSSだけでもできます｡

共通ヘッダー､共通サイドバーなどの場合でも､JavaScript､PHPを使うことで対応することができます｡

以下のようなデモをつくりました｡

2015年からWeb制作の仕事をはじめて､170件ほどのWebサイトを制作してきました｡

記事を読み終えると､いろいろな環境にあわせて､現在のページへのリンクだけデザインを変えることができます｡

目次

ナビの現在(current)のページへのリンクだけデザインを変える方法
1. 静的HTMLでプログラムを使わない
2. プログラムを使う
  1. JavaScript (jQuery)
  2. PHP
まとめ

ナビの現在(current)のページへのリンクだけデザインを変える方法

静的HTMLでプログラムを使わない

bodyとliタグに適切なclass名を設定しておくことで､CSSだけで使ってナビの現在(current)のページへのリンクだけデザインを変えることができます｡

liタグそれぞれにclass名をつける

liタグそれぞれにclass名をつける　(デモ)

bodyにページを特定するためのclassをつけます｡

<body class="index">
  <div>
    <ul class="nav-list">
      <li class="nav-index">
        <a href="./index.html">トップ</a>
      </li>
      <li class="nav-company">
        <a href="./company.html">会社概要</a>
      </li>
      <li class="nav-business">
        <a href="./business.html">事業紹介</a>
      </li>
      <li class="nav-news">
        <a href="./news.html">お知らせ</a>
      </li>
      <li class="nav-contact">
        <a href="./contact.html">お問い合わせ</a>
      </li>
    </ul>
  </div>
</body>

liタグそれぞれにリンクを特定するclass名をつけます｡
どんなclass名でも大丈夫ですが､リンク先のURL､ファイル名と一致するようなclass名がいいです｡

.index .nav-index>a,
.company .nav-company>a,
.business .nav-business>a,
.news .nav-news>a,
.contact .nav-contact>a {
  
  //ここに現在のページときだけのCSSを書きます

}

bodyにつけたclass名で現在のページが特定できるので､

body「.index」の中にある「.nav-index」直下の「a」にCSSが設定します｡

これをナビの数だけ書けばOKです｡

メリット

コーディング初心者で便利なCSSを知らなくても設定できる

デメリット

ナビの数が増えるのにあわせて､classも新たに設定しないといけない
CSSも多く設定しないといけない

liタグが何番目かで特定する

class名はつけず､cssのnth-childを使って何番目かで特定する　(デモ)

bodyにページを特定するためのclassをつけます｡

<body class="index">
  <div>
    <ul class="nav-list">
      <li>
        <a href="./index.html">トップ</a>
      </li>
      <li>
        <a href="./company.html">会社概要</a>
      </li>
      <li>
        <a href="./business.html">事業紹介</a>
      </li>
      <li>
        <a href="./news.html">お知らせ</a>
      </li>
      <li>
        <a href="./contact.html">お問い合わせ</a>
      </li>
    </ul>
  </div>
</body>

liタグにはclass名はなくても大丈夫です｡

.index .nav-list>li:nth-child(1)>a,
.company .nav-list>li:nth-child(2)>a,
.business .nav-list>li:nth-child(3)>a,
.news .nav-list>li:nth-child(4)>a,
.contact .nav-list>li:nth-child(5)>a {
  
  //ここに現在のページときだけのCSSを書きます

}

liタグの何番目かをCSSで指定すれば､liタグにclass名をつけることなく特定ができます｡

メリット

liタグにclassを設定する必要がない

デメリット

順番が変わったときにCSSも変更しないといけない
CSSも多く設定しないといけない

属性セレクターで特定する

class名はつけず､属性セレクターでhrefに含まれるパス(URL)で特定する　(デモ)

bodyにページを特定するためのclassをつけます｡

<body class="index">
  <div>
    <ul class="nav-list">
      <li>
        <a href="./index.html">トップ</a>
      </li>
      <li>
        <a href="./company.html">会社概要</a>
      </li>
      <li>
        <a href="./business.html">事業紹介</a>
      </li>
      <li>
        <a href="./news.html">お知らせ</a>
      </li>
      <li>
        <a href="./contact.html">お問い合わせ</a>
      </li>
    </ul>
  </div>
</body>

liタグにはclass名はなくても大丈夫です｡

.index a[href*=index],
.company a[href*=company],
.business a[href*=business],
.news a[href*=news],
.contact a[href*=contact] {
  
  //ここに現在のページときだけのCSSを書きます

}

aタグのhref属性をCSSで指定します｡

a[href*=●●●]でaタグのhref属性に指定の単語「●●●」が含まれるかで判定します｡
シンプルなサイト構成であれば､あいまいな「*」(含む)でいいですが､サイトが複雑で階層が深くなってきたら､状況に応じて「完全一致」「前方一致」「後方一致」などを使い分ける必要があります｡

属性セレクターは以下のページを参考にしてください｡

属性セレクター

メリット

liタグにclassを設定する必要がない

デメリット

階層が深いサイト構成になると､属性指定の仕方を検討する必要がある
CSSも多く設定しないといけない

特定のliタグにだけclassをつける

特定のliタグにだけclass「current」をつける　(デモ)

特定のliタグにだけclassをつける場合は､bodyにclassがなくても大丈夫です｡

<body>
  <div>
    <ul class="nav-list">
      <li class="current">
        <a href="./index.html">トップ</a>
      </li>
      <li>
        <a href="./company.html">会社概要</a>
      </li>
      <li>
        <a href="./business.html">事業紹介</a>
      </li>
      <li>
        <a href="./news.html">お知らせ</a>
      </li>
      <li>
        <a href="./contact.html">お問い合わせ</a>
      </li>
    </ul>
  </div>
</body>

liタグにclass="current"をページごとに付け替えるだけで現在のページが特定します｡

.nav-list>li.current>a {
  
  //ここに現在のページときだけのCSSを書きます

}

CSSは「.current」の直下のaタグだけあればOKです｡

メリット

CSSが少なくてすむ
ナビが増減しても､CSSを増減させる必要がない

デメリット

現在のclassをどこにつけるかを､自分で変える必要がある

プログラムを使う

PHPなどで共通ヘッダーなどにしている場合は､bodyやliタグをファイルごとに書き分けることができないので､プログラムを使ってページを特定していくことになります｡

CSSは「特定のliタグにだけclassをつける」の設定のままで､現在のページのURLとナビのリンクを比較し､一致したナビにclass="current"を追加しますします｡

別の方法でも対応することはできますが､この方法がいちばんシンプルで変更などにも対応しやすいです｡

JavaScript (jQuery)

JavaScript(jQuery)で特定のliタグにだけclass「current」をつける　(デモ)

まず､現在のページのURLを取得します｡

ナビのリンクをすべて取得し､現在のページのURLと比較します｡

一致したaタグの親のliタグにだけclass="current"を追加します｡

href = location.href;

var links = jQuery(".nav-list > li > a");

links.each(function (index, value) {
  if (value.href == href) {
    jQuery(".nav-list").children("li").eq(index).addClass("current");
  }
});

「jQueryを使うことができない」「jQueryを使いたくない」という場合はJavaScriptで以下のように書きます｡
やっていることはjQueryと同じです｡

href = location.href;

var links = document.querySelectorAll(".nav-list > li > a");

for (var i = 0; i < links.length; i++) {
  if (links[i].href == href) {
    document.querySelectorAll(".nav-list > li")[i].classList.add("current");
  }
}

もっと階層が深いサイト構成だったり､URLが複雑な場合は文字列を操作したり､「完全一致」ではなく､「含まれる」など判定していく必要があります｡

メリット

HTMLを編集する必要がない
ナビの増減に対応しやすい

デメリット

JavaScript (jQuery)の知識が必要

jQuery導入については､以下の記事にて解説しています｡

【WordPress】jQueryの導入手順（読み込み、使い方）【JavaScript】

「jQuery」のはじめかたについて知りたいですか？この記事では「jQuery」の使い方（読み込み、書き方、チェック方法）について解説しています。あわせて、WordPressでの使い方についても解説します。ぜひご覧ください。

PHP

PHPで特定のliタグにだけclass「current」をつける　(デモ)

現在のページのURLを取得します｡

liタグそれぞれにif文でURLとリンクを比較し､一致したaタグの親のliタグにだけclass="current"を追加します｡

<?php
  $url = (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
?>
  <ul class="nav-list">
    <li <?php if( strpos($url,'index') !== false){ echo 'class="current"'; } ?>>
      <a href="./index.php">トップ</a>
    </li>
    <li <?php if( strpos($url,'company') !== false){ echo 'class="current"'; } ?>>
      <a href="./company.php">会社概要</a>
    </li>
    <li <?php if( strpos($url,'business') !== false){ echo 'class="current"'; } ?>>
      <a href="./business.php">事業紹介</a>
    </li>
    <li <?php if( strpos($url,'news') !== false){ echo 'class="current"'; } ?>>
      <a href="./news.php">お知らせ</a>
    </li>
    <li <?php if( strpos($url,'contact') !== false){ echo 'class="current"'; } ?>>
      <a href="./contact.php">お問い合わせ</a>
    </li>
  </ul>

上の方法でもいいのですが､HTMLタグの中にif文があってわかりにくいのと､同じ処理を何度も書くのが面倒で数が増えたときに管理しずらいです｡

以下のように配列にしておくことで､if文を何度も書く必要がなくなり､数が増減したり変更があった場合でも配列を修正するだけで対応できます｡

<?php
  $url = (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];

  $navs = [
    "index" => "トップ",
    "company" => "会社概要",
    "business" => "事業紹介",
    "news" => "お知らせ",
    "contact" => "お問い合わせ",
  ];
?>
<?php
  if( $navs ){
?>
  <ul class="nav-list">
<?php
    foreach( $navs as $key => $val ){
      $current = "";
      if( strpos($url,$key) !== false){
        $current = 'class="current"';
      }
?>
    <li <?php echo $current; ?>>
      <a href="./<?php echo $key; ?>.php"><?php echo $val; ?></a>
    </li>
<?php
    }
?>
  </ul>
<?php
  }
?>

メリット