固定フッターメニューに通知件数を表示する方法【HTML/CSS/JavaScript・サンプルコード付き】

固定フッターメニューに通知件数を表示する方法

固定フッターメニューに通知件数を表示する方法を紹介します。本記事では、HTML、CSS、JavaScriptを使って、フッターメニューの通知アイコンへ未読件数を表示するサンプルを作成します。通知がない場合は件数を非表示にし、通知がある場合だけ件数を表示できるため、メール、チャット、SNS、ECサイトなど幅広いWebサイトで利用できるデザインです。

このサンプルコードでは、JavaScriptの変数へ通知件数を設定するだけで、通知バッジへ件数を表示できます。件数が0の場合はバッジを自動で非表示にし、1件以上ある場合だけ表示するため、実際のWebサイトへ組み込みやすい構成になっています。通知件数の取得方法は自由に変更できるため、APIやデータベース、PHPなどと組み合わせることも可能です。

固定フッターメニューは、ホーム・検索・お気に入り・通知・マイページなどの主要ページへ素早く移動できる便利なナビゲーションです。通知件数を表示することで、新着情報や未読件数をユーザーへ分かりやすく伝えられるため、実用的なUIとして多くのWebサービスで採用されています。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

notificationCountの値を変更すると、通知件数が切り替わります。0の場合はバッジを非表示にし、1以上の場合は通知アイコンの右上へ件数を表示します。

コードをコピーして使おう！

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

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>固定フッターメニューに通知件数を表示する方法</title>
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <div class="footer-menu-notification-badge_wrap">

    <h1 class="footer-menu-notification-badge_title">
      固定フッターメニューに通知件数を表示する方法
    </h1>

    <main class="footer-menu-notification-badge_content">

      <p>
        JavaScriptの通知件数を変更すると、通知アイコンの右上に件数を表示できます。
      </p>

    </main>

  </div>

  <nav class="footer-menu-notification-badge_nav">

    <a href="#" class="footer-menu-notification-badge_item">
      <span class="footer-menu-notification-badge_icon">
        <svg viewBox="0 0 24 24" fill="none">
          <path d="M3 10L12 3L21 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M6 10V20H18V10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </span>
      <span>ホーム</span>
    </a>

    <a href="#" class="footer-menu-notification-badge_item">
      <span class="footer-menu-notification-badge_icon">
        <svg viewBox="0 0 24 24" fill="none">
          <circle cx="11" cy="11" r="6" stroke="currentColor" stroke-width="2"></circle>
          <path d="M16 16L21 21" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
        </svg>
      </span>
      <span>検索</span>
    </a>

    <a href="#" class="footer-menu-notification-badge_item">
      <span class="footer-menu-notification-badge_icon">
        <svg viewBox="0 0 24 24" fill="none">
          <path d="M12 20L5 13C3.5 11.5 3.5 9 5 7.5C6.5 6 9 6 10.5 7.5L12 9L13.5 7.5C15 6 17.5 6 19 7.5C20.5 9 20.5 11.5 19 13L12 20Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"></path>
        </svg>
      </span>
      <span>お気に入り</span>
    </a>

    <a href="#" class="footer-menu-notification-badge_item">
      <span class="footer-menu-notification-badge_icon">
        <svg viewBox="0 0 24 24" fill="none">
          <path d="M7 17H17L16 15V10C16 7.8 14.2 6 12 6C9.8 6 8 7.8 8 10V15L7 17Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"></path>
          <path d="M10.5 19C10.8 19.6 11.3 20 12 20C12.7 20 13.2 19.6 13.5 19" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
        </svg>
        <span class="footer-menu-notification-badge_badge"></span>
      </span>
      <span>通知</span>
    </a>

    <a href="#" class="footer-menu-notification-badge_item">
      <span class="footer-menu-notification-badge_icon">
        <svg viewBox="0 0 24 24" fill="none">
          <circle cx="12" cy="8" r="3" stroke="currentColor" stroke-width="2"></circle>
          <path d="M6 20C6 16.7 8.7 14 12 14C15.3 14 18 16.7 18 20" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
        </svg>
      </span>
      <span>マイページ</span>
    </a>

  </nav>

  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0;
  font-family:sans-serif;
  background:#f8fafc;
}

/* 幅計算を統一 */
*{
  box-sizing:border-box;
}

/* コンテンツ */
.footer-menu-notification-badge_wrap{
  max-width:900px;
  margin:0 auto;
  padding:40px 20px 100px;
}

/* タイトル */
.footer-menu-notification-badge_title{
  margin-bottom:24px;
  text-align:center;
}

/* ダミーコンテンツ */
.footer-menu-notification-badge_content{
  min-height:800px;
}

/* 固定フッターメニュー */
.footer-menu-notification-badge_nav{
  position:fixed;
  left:0;
  bottom:0;
  width:100%;
  display:flex;
  justify-content:space-around;
  padding:10px 0;
  border-top:1px solid #d1d5db;
  background:#ffffff;
}

/* メニュー */
.footer-menu-notification-badge_item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  color:#2563eb;
  text-decoration:none;
  font-size:12px;
  font-weight:700;
}

/* アイコンとバッジの基準位置 */
.footer-menu-notification-badge_icon{
  position:relative;
  display:flex;
}

/* アイコン */
.footer-menu-notification-badge_item svg{
  width:24px;
  height:24px;
}

/* 通知件数 */
.footer-menu-notification-badge_badge{
  position:absolute;
  top:-8px;
  right:-10px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#ef4444;
  color:#ffffff;
  font-size:11px;
  line-height:18px;
  text-align:center;
  font-weight:700;
}

/* 通知件数が0のとき非表示 */
.footer-menu-notification-badge_badge.is-hidden{
  display:none;
}

// 通知件数を設定
// この数値を変更すると、バッジに表示される件数が変わる
// 例：0 → バッジ非表示
// 例：1 → 「1」を表示
// 例：5 → 「5」を表示
const notificationCount = 3;

// 通知バッジを取得
const notificationBadge = document.querySelector(".footer-menu-notification-badge_badge");

// 通知件数が1以上の場合はバッジを表示
if(notificationCount > 0){
  notificationBadge.textContent = notificationCount;
  notificationBadge.classList.remove("is-hidden");
}else{
  // 通知件数が0の場合はバッジを非表示
  notificationBadge.textContent = "";
  notificationBadge.classList.add("is-hidden");
}

ファイル構成と設置方法

このサンプルでは、HTML、CSS、JavaScriptを別ファイルで管理します。HTMLで固定フッターメニューと通知バッジの表示場所を作成し、CSSでデザインを整え、JavaScriptで通知件数に応じてバッジの表示・非表示を切り替えます。

sample/
├── index.html
├── style.css
└── script.js

3つのファイルを同じフォルダへ配置し、ブラウザで index.html を開いてください。通知件数は script.js 内の notificationCount の数値を変更することで切り替えられます。0の場合はバッジを非表示にし、1以上の場合は通知アイコンの右上に件数を表示します。