メニューバーの配置、開いてるページと該当したメニュー文字色変更について

実現したいこと

・今開いているページと同じメニュー項目の文字色、画像を変える
・文字をメニューバーの中心に等間隔で配置したい
・文字を横並びにしたい、・を消したい

発生している問題・分からないこと

・コードに誤りがあるのか、他の何かが邪魔しているのか動作しない
・ list-style: none; justify-content: center;を使用しているが・が消えない、中央等間隔配置、横並びにならない

該当のソースコード

html
1<html>
2<head>
3  <meta charset="UTF-8">
4  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5  <title>メニュー</title>
6  <link rel="stylesheet" href="css/menu.css">
7</head>
8
9<body>
10<nav class="navbar">
11  <!-- 左側 TOP アイコン -->
12  <a href="index.html" class="logo">
13    <img id="top-logo" src="image/top1.png" alt="TOP">
14  </a>
15
16  <!-- ハンバーガーメニューのトグル -->
17  <input type="checkbox" id="menu-toggle" class="menu-toggle">
18  <label for="menu-toggle" class="menu-icon">&#9776;</label>
19
20  <!-- リンク部分 -->
21<div ckass="nav-links">
22  <ul>
23    <li><a class="nav-item"href="character.html">CHARACTER</a></li>
24    <li><a class="nav-item"href="movie.html">MOVIE</a></li>
25    <li><a class="nav-item"href="gallery.html">GALLERY</a></li>
26  </ul>
27</nav>
28</div>
29
30<script>
31document.addEventListener('DOMContentLoaded', () => {
32    // 現在のページのURLを取得
33    const currentUrl = window.location.href;
34    const logoImage = document.getElementById('top-logo');
35
36    // トップページの場合、ロゴ画像をtop2.pngに切り替える
37    if (currentUrl.endsWith('index.html') || currentUrl.endsWith('/')) {
38        logoImage.src = 'image/top2.png';
39    }
40
41    // ナビゲーションリンクにcurrentクラスを付与
42    document.querySelectorAll('.nav-item').forEach(link => {
43        if(link.href === currentUrl){
44            link.classList.add('current');
45        }
46    });
47});
48</script>
49</body>
50</html>
51

css
1/* ====== ナビゲーションバー全体 ====== */
2body {
3  margin: 0;
4  padding-top: 60px; /* navbar 高さ分 */
5}
6
7/* ====== Nikkyou Sans フォント読み込み ====== */
8@font-face {
9  font-family: 'NikkyouSans';
10  src: url('../fonts/NikkyouSans-mLKax.ttf') format('truetype');
11  font-weight: normal;
12  font-style: normal;
13}
14
15/* ====== ナビゲーションバー ====== */
16.navbar {
17  display: flex;
18  align-items: center;
19  justify-content: center; /* 真ん中寄せ */
20  background: #E6E6E6;
21  padding: 0 20px;
22  height: 60px;
23  position: fixed;
24  top: 0;
25  left: 0;
26  width: 100%;
27  z-index: 1000;
28}
29
30/* ====== TOPアイコン ====== */
31.logo {
32  position: absolute;
33  left: 20px;
34}
35.logo img {
36  height: 40px;
37  width: auto;
38  display: block;
39}
40
41/* ====== メニューリスト ====== */
42.nav-links {
43  list-style: none;
44  margin: 0;
45  padding: 0;
46  display: flex;
47  justify-content: center;
48  gap: 40px;
49  width: 100%; /* 真ん中寄せのために追加 */
50}
51
52/* ====== メニューリンク ====== */
53.nav-item {
54  font-family: 'NikkyouSans', sans-serif;
55  text-decoration: none;
56  color: #575757;          /* デフォルト色 */
57  font-weight: 700;
58  font-size: 16px;
59  letter-spacing: 2px;
60  transition: color 0.3s;
61}
62.nav-item:hover {
63  color: #3D9EBF;          /* ホバー時 */
64}
65
66/*-- 付与するcurrentクラスのスタイル --*/
67.nav-item.current {
68  color: #3D9EBF;
69}
70
71
72/* ====== ハンバーガーメニュー ====== */
73.menu-toggle {
74  display: none;
75}
76.menu-icon {
77  display: none;
78  font-size: 28px;
79  curso
80

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

javascriptやcssで今開いているページと同じメニュー項目の文字色、画像を変える方法を様々試した結果、メニューリストのズレが起き、自身でmagin:centerなど試したがどんどん形式が崩れて行ってしまった。

javascript、css参考先
https://lpeg.info/html/js_addclass.html

JS
1// JS
2window.addEventListener("DOMContentLoaded", () => {
3  const path = window.location.pathname; // 現在のページURL
4  if (path.includes("index.html")) {
5    document.getElementById("home").classList.add("active");
6  } else if (path.includes("about.html")) {
7    document.getElementById("about").classList.add("active");
8  } else if (path.includes("contact.html")) {
9    document.getElementById("contact").classList.add("active");
10  }
11});

JS
1document.querySelectorAll('.nav-item').forEach(link => {
2  if(link.pathname === window.location.pathname){
3    link.classList.add('current');
4    const img = link.querySelector('img');
5    if(img){
6      // 画像をアクティブ版に差し替え
7      img.src = img.src.replace('_gray.png', '_active.png');
8    }
9  }
10});

CSS
1.nav-item.character {
2  background: url("image/char_gray.png") no-repeat center top;
3}
4.nav-item.movie {
5  background: url("image/movie_gray.png") no-repeat center top;
6}
7
8/* currentが付いた時 */
9.nav-item.character.current {
10  background: url("image/char_active.png") no-repeat center top;
11}
12.nav-item.movie.current {
13  background: url("image/movie_active.png") no-repeat center top;
14}
15

補足

特になし

yambejp

2025/09/01 07:17

「menu about contact」なのか「charactor movie gallery」なのか明確にしてください

tst456

2025/09/01 08:28

画像は選択時の見本として作ったのもなので、実際の内容はcharactor movie galleryになります。

yambejp

2025/09/01 08:51

＞実際の内容はcharactor movie galleryになります。なるほど、ではHTMLを元に処理してよいのですね？それを前提に回答はしてあるので確認ください

tst456

2025/09/01 09:08

確認した所メニューの文字は中心に来ました。ありがとうございます。今は文字がメニューバーの中心で各単語の余白が無い状態です。

yambejp

2025/09/01 09:39

回答みて想定と違うところがあればご指摘ください

tst456

2025/09/01 12:05

・charactor movie galleryの単語同士に余白がない(liにmargin入れてみましたが反応なし) ・今開いているページと同じメニュー項目の文字色に色が付かない(index.htmlは未選択時文字色#E6E6E6 それ以外では黒文字で表示される。どのページを選んでもメニュー文字の色が変わらない) といった状態です。

tst456

2025/09/01 12:37

・charactor movie galleryの単語同士に余白がない(liにmargin入れてみましたが反応なし) ↑こちらについて自分のパソコンから確認した際は余白がなかったのですが、他の方のパソコンからでは余白の確認が取れましたメニューの文字については先程お伝えした通りです

yambejp

2025/09/02 00:03

コメントで補足をつけるのではなく回答の方を御覧ください

tst456

2025/09/02 04:02

回答みて想定と違うところをご回答したのですが、どのように回答したらよろしかったでしょうか？回答をもとに　htmlを修正後確認した結果をお送りいたしました。

yambejp

2025/09/02 04:34

回答にコメントしてください・・・ということです

行動規範の内容に同意します

回答2件

自己解決

スクリプト内容を変更したら解決しました。

css
1		.nav-links a.current { color: #3D9EBF; } 
2		.Hamburger-links a.current { color: #3D9EBF; }

<script>
  // まず fetch を使って、menu.html の中身を読み込む
  fetch("./menu.html")
    .then(res => res.text()) // 読み込んだファイルの内容をテキストとして取得
    .then(data => {
      // 取得したテキスト（menu.html の中身）を
      // このページの #menu という id の要素に入れる
      document.getElementById("menu").innerHTML = data;

      // ここからは「現在開いているページに応じてメニューをハイライト」する処理

      // location.pathname で今見ているページのパスを取得
      // 例: "C:/website/character1.html" → "character1.html" だけ取り出す
      const currentFile = location.pathname.split("/").pop();

      // 読み込んだ menu.html の中の .nav-item を全部取り出す
      document.querySelectorAll("#menu .nav-item").forEach(link => {

        // それぞれのリンクの href を取り出す
        // 例: href="character.html" → "character.html"
        const hrefFile = link.getAttribute("href").split("/").pop();

        // ".html" を消してベース名だけにする
        // 例: "character.html" → "character"
        const baseName = hrefFile.replace(".html", "");

        // 今見ているページ名がリンクのベース名で始まっているかチェック
        // 例: currentFile = "character1.html"
        //      baseName = "character"
        // → "character1.html".startsWith("character") → true
        if (currentFile.startsWith(baseName)) {
          // 条件に合ったリンクに "current" クラスを追加
          // CSSで色を変えたり装飾できる
          link.classList.add("current");
        }
      });
    });
</script>

投稿2025/09/05 02:04

tst456

総合スコア1

とりあえず

ckass="nav-links"

class="nav-links"

処理的にはulのpaddingを消したうえでjustify-contentはspace-aroundかspace-evenlyがよいかと

html
1<style>
2.nav-links ul{
3list-style:none;
4display:flex;
5padding:0;
6  justify-content:space-evenly;
7}
8</style>
9<div class="nav-links">
10  <ul>
11    <li><a class="nav-item" href="character.html">CHARACTER</a></li>
12    <li><a class="nav-item" href="movie.html">MOVIE</a></li>
13    <li><a class="nav-item" href="gallery.html">GALLERY</a></li>
14  </ul>
15</nav>
16</div>

あとは、ハンバーガーメニューがページ内リンクか外部リンクかによります。
HTMLの通り外部リンクだとすると自ページを判断して「active」クラスを付加するなどが楽かも

html
1
2<script>
3window.addEventListener('DOMContentLoaded', ()=>{
4  document.querySelectorAll('.nav-links .nav-item').forEach(x=>{
5    const reg=new RegExp(x.getAttribute('href').replace(/\./,'\\.'));
6    if(reg.test(location.href)) x.classList.add('active')
7  });
8});
9</script>
10<style>
11.nav-item{
12color:black;
13}
14.active{
15color:red;
16}
17.nav-links ul{
18list-style:none;
19display:flex;
20padding:0;
21  justify-content:space-evenly;
22}
23</style>
24<div class="nav-links">
25  <ul>
26    <li><a class="nav-item" href="character.html">CHARACTER</a></li>
27    <li><a class="nav-item" href="movie.html">MOVIE</a></li>
28    <li><a class="nav-item" href="gallery.html">GALLERY</a></li>
29  </ul>
30</nav>
31</div>