選択中のメニューに下線が付くヘッダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>選択中のメニューに下線が付くヘッダー</title>

  <!-- CSSファイル -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- ヘッダー -->
  <header class="active-menu-header_header">

    <div class="active-menu-header_inner">

      <!-- サイト名 -->
      <div class="active-menu-header_logo">
        Sample Site
      </div>

      <!-- メインメニュー -->
      <nav class="active-menu-header_nav" aria-label="メインメニュー">

        <!-- 初期状態で選択中のメニュー -->
        <button class="active-menu-header_link is-active" type="button">
          ホーム
        </button>

        <button class="active-menu-header_link" type="button">
          サービス
        </button>

        <button class="active-menu-header_link" type="button">
          会社概要
        </button>

        <button class="active-menu-header_link" type="button">
          お問い合わせ
        </button>

      </nav>

    </div>

  </header>

  <!-- ページ内容 -->
  <main class="active-menu-header_content">

    <!-- ページタイトル -->
    <p class="active-menu-header_content-title">
      選択中のメニューに下線が付くヘッダー
    </p>

    <!-- 説明文 -->
    <p class="active-menu-header_content-text">
      メニューをクリックすると、選択中の項目へ下線が移動します。
    </p>

  </main>

  <!-- JavaScriptファイル -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  background:#f3f4f6; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; /* ページ全体で使用するフォント */
}

/* ヘッダー */
.active-menu-header_header{
  width:100%; /* 画面幅いっぱいに表示 */
  padding:28px 40px; /* 上下28px・左右40px。値を大きくするとヘッダーの余白が広がる */
  border-bottom:1px solid #e5e7eb; /* ヘッダー下の1pxの境界線 */
  background:#ffffff; /* ヘッダーの背景色 */
  box-shadow:0 4px 18px rgba(15,23,42,.05); /* 4pxは影の縦位置、18pxはぼかし。値を大きくすると影が広がる */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* ヘッダー内部 */
.active-menu-header_inner{
  display:flex; /* サイト名とメニューを横並びにする */
  align-items:center; /* 上下中央へ揃える */
  justify-content:space-between; /* サイト名を左、メニューを右へ配置 */
  gap:40px; /* サイト名とメニューの間隔。値を大きくすると間隔が広がる */
  width:100%; /* 利用できる横幅いっぱいに表示 */
  max-width:1200px; /* 最大横幅。値を大きくするとヘッダー内容が横に広がる */
  margin:0 auto; /* 左右中央へ配置 */
}

/* サイト名 */
.active-menu-header_logo{
  flex:0 0 auto; /* サイト名の横幅を内容に合わせる */
  color:#111827; /* サイト名の文字色 */
  font-size:20px; /* 文字サイズ。値を大きくするとサイト名が大きくなる */
  font-weight:700; /* サイト名を太字にする */
  line-height:1.4; /* 行間。値を大きくすると行間が広がる */
}

/* メインメニュー */
.active-menu-header_nav{
  display:flex; /* メニューを横並びにする */
  align-items:center; /* 上下中央へ揃える */
  gap:8px 24px; /* 縦8px・横24pxの間隔。値を大きくするとリンク同士の間隔が広がる */
  margin-left:auto; /* メニューを右側へ配置 */
}

/* メニューボタン */
.active-menu-header_link{
  position:relative; /* 下線を配置する基準にする */
  display:block; /* ボタンをブロック要素として扱う */
  padding:12px 0; /* 上下12pxの余白。値を大きくするとメニューの高さが広がる */
  border:0; /* ボタン標準の枠線を削除 */
  background:transparent; /* ボタンの背景を透明にする */
  color:#374151; /* 通常時の文字色 */
  font:inherit; /* ページ全体と同じフォントを使用 */
  font-size:14px; /* 文字サイズ。値を大きくするとメニュー文字が大きくなる */
  font-weight:600; /* メニュー文字の太さ */
  line-height:1.5; /* 行間。値を大きくすると行間が広がる */
  cursor:pointer; /* マウスポインターを指の形にする */
}

/* メニュー下線 */
.active-menu-header_link::after{
  content:""; /* 下線用の疑似要素を作成 */
  position:absolute; /* メニューボタン内へ下線を配置 */
  right:0; /* 下線を右端まで広げる */
  bottom:0; /* 下線をメニューの下端へ配置 */
  left:0; /* 下線を左端まで広げる */
  height:3px; /* 下線の太さ。値を大きくすると線が太くなる */
  border-radius:3px; /* 下線の角丸。値を大きくすると丸みが強くなる */
  background:#2563eb; /* 下線の色 */
  transform:scaleX(0); /* 通常時は横幅を0にして下線を非表示 */
  transform-origin:center; /* 下線を中央から広げる */
  transition:transform .3s ease; /* 0.3秒で下線を切り替える。値を大きくすると遅く、小さくすると速くなる */
}

/* 選択中のメニュー */
.active-menu-header_link.is-active{
  color:#2563eb; /* 選択中の文字色 */
}

/* 選択中のメニュー下線 */
.active-menu-header_link.is-active::after{
  transform:scaleX(1); /* 横幅を100%へ広げて下線を表示 */
}

/* ページ内容 */
.active-menu-header_content{
  padding:80px 24px; /* 上下80px・左右24px。値を大きくするとページ内容の余白が広がる */
  text-align:center; /* ページ内容を中央揃えにする */
}

/* ページタイトル */
.active-menu-header_content-title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  color:#111827; /* ページタイトルの文字色 */
  font-size:28px; /* 文字サイズ。値を大きくするとタイトルが大きくなる */
  font-weight:700; /* ページタイトルを太字にする */
  line-height:1.4; /* 行間。値を大きくすると行間が広がる */
}

/* 説明文 */
.active-menu-header_content-text{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  color:#6b7280; /* 説明文の文字色 */
  font-size:15px; /* 文字サイズ。値を大きくすると文字が大きくなる */
  line-height:1.8; /* 行間。値を大きくすると行間が広がる */
}

/* 画面幅768px以下 */
@media (max-width:768px){

  /* ヘッダー */
  .active-menu-header_header{
    padding:24px 20px; /* 上下24px・左右20pxへ変更して画面端との余白を小さくする */
  }

  /* ヘッダー内部 */
  .active-menu-header_inner{
    flex-direction:column; /* サイト名とメニューを縦方向へ配置 */
    align-items:flex-start; /* 左揃えにする */
    gap:24px; /* サイト名とメニューの間隔。値を大きくすると間隔が広がる */
  }

  /* メインメニュー */
  .active-menu-header_nav{
    flex-wrap:wrap; /* 横幅が足りない場合は次の行へ折り返す */
    gap:12px 20px; /* 縦12px・横20pxの間隔。値を大きくするとメニュー同士の間隔が広がる */
    margin-left:0; /* 右寄せを解除 */
  }

}

/* すべてのメニューボタンを取得 */
const activeMenuHeaderLinks =
  document.querySelectorAll('.active-menu-header_link');

/* 各メニューボタンへクリック処理を設定 */
activeMenuHeaderLinks.forEach(function(activeMenuHeaderLink){

  /* メニューをクリックしたときの処理 */
  activeMenuHeaderLink.addEventListener('click', function(){

    /* すべてのメニューから選択状態を解除 */
    activeMenuHeaderLinks.forEach(function(activeMenuHeaderItem){
      activeMenuHeaderItem.classList.remove('is-active');
    });

    /* クリックしたメニューを選択状態にする */
    activeMenuHeaderLink.classList.add('is-active');

  });

});