レスポンシブデザインに対応したグローバルナビゲーション

レスポンシブデザインに対応したグローバルナビゲーションとは、画面サイズやデバイスの種類に応じて柔軟に形を変えるナビゲーションメニューのことです。
大きなディスプレイでは横並びのメニューとして表示され、ユーザーが一目で全体構造を把握できるように設計されます。
一方でスマートフォンやタブレットのような小さな画面では、ハンバーガーメニューやドロワー形式に切り替わり、限られたスペースでも操作できるよう工夫しますよね。
こうした仕組みによって、同じサイトをどの環境から閲覧しても一貫した操作性が保たれ、ユーザーは迷うことなく目的のページへアクセスできます。
レスポンシブ対応のグローバルナビゲーションは、現代のWebにおいて必須の要素といえるでしょう。

…と、ここまでは教科書的な一般論なんですけど。
当サイトの場合、グローバルナビゲーションはそのままスマホでも小さめに表示されるようにしてあり、ハンバーガーメニューやドロワー形式のメニューは別途用意してあります。
1つのサイトに複数のカテゴリーがあるので、常にメインのサイトマップが目につくようにしてあるのです。

グローバルナビゲーションを作るためのhtml

普通のHTMLですから、特に難しいことはないです。

<nav class="den_nav">
  <ul>
    <li><a href="https://feinatelier.org/"><img src="/pcimg/fein_fish_green.webp" alt="このサイトのシンボルマーク" class="feinhome"></a></li>
    <li><a href="/" class="animated-link">ホーム</a></li>
    <li><a href="/another-eden/anaden_sitemap.html" class="animated-link">アナザーエデン</a></li>
    <li><a href="/fish/fish_sitemap.html" class="animated-link">アウトドアのエリア</a></li>
    <li><a href="/contents/site_create.html" class="animated-link">個人サイト制作</a></li>
    <li><a href="/contents/protect.html" class="animated-link">AI学習を防ぐ工夫</a></li>
    <li><a href="/contents/rss.html" class="animated-link">更新のお知らせ</a></li>
  </ul>
</nav>

唯一言えることがあるとすれば、あんまりグローバルナビゲーションに多くの項目を付けないようにしていますね。
当サイトであれば、カテゴリー分けされたサイトマップ＋α程度。
その他はすべて他のメニューに委ねています。

グローバルナビゲーションを作るためのCSS

このCSSは「グローバルナビゲーション（上部メニュー）」の見た目と動きを作るためのものです。
主にリンクの下線アニメーション、半透明のナビ背景、ロゴのホバー効果、リストの横並びを実現しています。

基本の役割としては、次のような感じでしょうかね。

• .animated-link：
  リンクの基本スタイル。 position: relativeで疑似要素を位置決めできるようにしています。
• .animated-link::after：
  リンクの下に伸びるアンダーラインを疑似要素で作成。
• content: ""でHTMLを増やさず装飾を追加しています。
  疑似要素は要素の前後に仮想的な要素を挿入できる仕組みです。

各ルールについて、ちょっと説明してみましょう。

リンクの見た目とアニメーション

.animated-link は文字色や太さ、色変化のトランジションを設定。transition: color 0.3sで色が滑らかに変わります。

.animated-link::after は絶対配置で要素の下に高さ2pxの線を作り、初期幅を0%にしておきます。ホバー時に幅を100%にすることで左から右へ伸びる下線アニメになります。

ナビ全体の背景と表示アニメ

.den_nav は半透明のグラデーション背景とバックドロップブラー（backdrop-filter）で背景をぼかす。角丸とパディングで見た目を整えています。

初期状態はopacity: 0とtranslateY(-20px)で隠れており、.visibleを付けるとフェードインして下からスッと出る動きになります。

ロゴとリスト

.feinhome はロゴ画像のサイズとホバー時の拡大・影（drop-shadow）を設定。

.den_nav ul はdisplay: flexで横並びにし、flex-wrap: wrapで狭い画面では折り返します。リストの余白はliで調整。

疑似要素で装飾を追加するとHTMLを汚さずに表現できるんですよね。
transitionとtransformで自然なアニメーションを作るようにしてます。
ただ、backdrop-filterで背景をぼかす時にはブラウザの対応状況だけ確認したほうが良いかも。
そろそろコードに移りますか。

グローバルナビゲーションを構成するheader.css

/* ★グローバルナビゲーションを構成する */
.animated-link {
 position: relative;
 color: #e3f2fd;
 font-weight: 500;
 text-decoration: none;
 transition: color 0.3s ease;
}

.animated-link:hover {
 color: #ffffff;
}

.animated-link::after {
 content: "";
 position: absolute;
 left: 0;
 bottom: -3px;
 width: 0%;
 height: 2px;
 background: linear-gradient(to right, #42a5f5, #80d8ff);
 transition: width 0.3s ease;
}

.animated-link:hover::after {
 width: 100%;
}

.den_nav {
 background: linear-gradient(to bottom, rgba(173, 216, 230, 0.5), rgba(173, 216, 230, 0));
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 padding: 12px 20px;
 border-radius: 20px;

 opacity: 0;
 transform: translateY(-20px);
 transition: opacity 0.8s ease, transform 0.8s ease;
}

.den_nav.visible {
 opacity: 1;
 transform: translateY(0);
}

.feinhome {
 width: 45px;
 transition: transform 0.3s ease, filter 0.3s ease;
}

.feinhome:hover {
 transform: scale(1.1);
 filter: drop-shadow(0 0 6px rgba(128, 216, 255, 0.6));
}

.den_nav ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 display: flex;
 flex-wrap: wrap;
}

.den_nav ul li {
 margin-right: 20px;
 margin-bottom: 10px;
}

.den_nav ul li a {
 color: #1A73E8;
}

.den_nav ul li a:hover {
 color: #0078D4;
}

グローバルナビゲーションのリンク装飾

.animated-link {
  position: relative;
  color: #e3f2fd;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s ease;
}

position

親要素としての位置基準を作ります。後で使う「::after」の線を、この要素を基準に配置できます。

color

文字色を薄い水色にします。優しく見える初期色です。

font-weight

文字の太さをやや太めにします。見出しリンクとして少し強調されます。

text-decoration

デフォルトの下線を消します。代わりに擬似要素で線を作ります。

transition

文字色が変わるときのアニメ時間と動き方を指定します。0.3秒でなめらかに変わります。

.animated-link:hover {
  color: #ffffff;
}

hover時のcolor

マウスを乗せると白に変わります。コントラストが上がり、アクティブ感が出ます。

.animated-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0%;
  height: 2px;
  background: linear-gradient(to right, #42a5f5, #80d8ff);
  transition: width 0.3s ease;
}

content

空の内容で擬似要素を作ります。線の箱を用意するイメージです。

position

擬似要素をこのリンクの中で絶対配置します。親のrelativeが基準になります。

left

左端に揃えます。線の開始位置です。

bottom

テキストの少し下に配置します。-3pxで文字の下から少し離します。

width

初期幅を0%にします。最初は線が見えません。

height

線の太さを2pxにします。細めの下線です。

background

右方向に向かうグラデーションの色です。青からライトブルーへ変化します。

transition

幅が変わるときのアニメ設定です。0.3秒でスッと伸びます。

.animated-link:hover::after {
  width: 100%;
}

hover時のwidth

マウスを乗せると線が左から右へ100%まで伸びます。ホバーの気持ちよさを演出します。

グローバルナビ本体の見た目と表示アニメ

.den_nav {
  background: linear-gradient(to bottom, rgba(173, 216, 230, 0.5), rgba(173, 216, 230, 0));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 12px 20px;
  border-radius: 20px;

  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

background

上から下に薄い水色の透明グラデーション。ガラス風の柔らかい背景になります。

backdrop-filter

背景全体を12pxぼかします。半透明のガラス効果です。

-webkit-backdrop-filter

SafariなどWebKit用の互換指定です。同じぼかしを効かせます。

padding

内側の余白を上下12px、左右20pxにします。中身が詰まり過ぎないようにします。

border-radius

角を20px丸めます。やさしい印象のカード形状です。

opacity

初期は透明にします。後でクラス切り替えでフェードインします。

transform

初期位置を上に20pxずらします。出現時に下へスライドさせます。

transition

透明度と位置の変化を0.8秒でなめらかにします。フェード＋スライドのアニメを統合します。

.den_nav.visible {
  opacity: 1;
  transform: translateY(0);
}

visible時のopacity

完全に表示します。0から1へフェードインします。

visible時のtransform

縦位置を元に戻します。上からふわっと降りてくる感じになります。

ホームアイコン（お魚マーク）のホバー演出

.feinhome {
  width: 45px;
  transition: transform 0.3s ease, filter 0.3s ease;
}

width

画像やアイコンの幅を45pxに固定します。ナビに収まりやすいサイズです。

transition

拡大と影の変化を0.3秒で同期させます。反応が自然になります。

.feinhome:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 6px rgba(128, 216, 255, 0.6));
}

transform

マウス乗せで1.1倍に拡大します。クリックしたくなる視覚的誘導です。

filter

明るい水色の発光風ドロップシャドウを付けます。存在感を軽く強調します。

ナビ内のリストレイアウト

.den_nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

list-style-type

デフォルトの黒点などの箇条書き記号を消します。ナビに不要な装飾を外します。

margin

外側余白をゼロにします。親との空き調整をCSSで統一します。

padding

内側余白もゼロにします。行頭のずれをなくします。

display

フレックスボックスで横並びのレイアウトにします。ナビ項目を並べやすくします。

flex-wrap

横幅が狭いときは折り返します。スマホでのレイアウト崩れを防ぎます。

.den_nav ul li {
  margin-right: 20px;
  margin-bottom: 10px;
}

margin-right

項目同士の横の間隔を20px空けます。詰まりを防ぎます。

margin-bottom

折り返したときの縦の間隔を10px確保します。複数段でも読みやすくします。

ナビのリンク色とホバー

.den_nav ul li a {
  color: #1A73E8;
}

color

通常時のリンク色を鮮やかなブルーにします。ブランド感や可読性を両立します。

.den_nav ul li a:hover {
  color: #0078D4;
}

hover時のcolor

少し深いブルーに切り替えます。ホバーで状態変化を明確に伝えます。

次はブログ用のCSSを掲載しますが、これは単に色を変えただけで、他の機能的な部分は全て同じですよ。

ブログ用のグローバルナビゲーションを構成するheader.css

/* ★ブログ用のグローバルナビゲーションを構成する */
.animated-link_blog {
 position: relative;
 color: #1A73E8;
 font-weight: 500;
 text-decoration: none;
 transition: color 0.3s ease;
 font-size: 0.95em;
}

.animated-link_blog:hover {
 color: #0d47a1;
}

.animated-link_blog::after {
 content: "";
 position: absolute;
 left: 0;
 bottom: -3px;
 width: 0%;
 height: 2px;
 background: linear-gradient(to right, #42a5f5, #80d8ff);
 transition: width 0.3s ease;
}

.animated-link_blog:hover::after {
 width: 100%;
}

.den_nav_blog {
 background: linear-gradient(to bottom,
   rgba(255, 165, 0, 0.15),
   rgba(255, 165, 0, 0));
 backdrop-filter: blur(14px);
 -webkit-backdrop-filter: blur(14px);
 border-radius: 20px;
 padding: 12px 20px;

 opacity: 0;
 transform: translateY(-20px);
 transition: opacity 0.8s ease, transform 0.8s ease;
}

.den_nav_blog.visible {
 opacity: 1;
 transform: translateY(0);
}

.feinhome {
 width: 45px;
 transition: transform 0.3s ease, filter 0.3s ease;
}

.feinhome:hover {
 transform: scale(1.1);
 filter: drop-shadow(0 0 6px rgba(66, 133, 244, 0.5));
}

.den_nav_blog ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 display: flex;
 flex-wrap: wrap;
}

.den_nav_blog ul li {
 margin-right: 20px;
 margin-bottom: 10px;
}

.den_nav_blog ul li a {
 color: #1A73E8;
}

.den_nav_blog ul li a:hover {
 color: #0d47a1;
}

次はJavaScriptの解説ですが、グローバルナビゲーションのものは大したことやってないから、そんなに長くはならないです。

グローバルナビゲーションを作るためのJavaScript

このスクリプトが何をしているかというと、まずはナビが画面に見えたら visible クラスを付け、見えなくなったら外しています。
IntersectionObserver が「画面との交差」をイベントのように教えてくれるようになってる。
フェードイン・スライドインなどのCSS演出を、見えるタイミングで発火させているわけですね。
さっそくスクリプトを見ていきましょう。

グローバルナビゲーションを目立たせるmenu.js

// グローバルナビゲーションの動き
document.addEventListener("DOMContentLoaded", () => {
const nav = document.querySelector(".den_nav");

const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
nav.classList.add("visible");
} else {
nav.classList.remove("visible");
}
});
});

observer.observe(nav);
});
    

DOM の準備ができたら実行

イベント登録

document.addEventListener("DOMContentLoaded", () => {

ページのHTMLが読み込まれて、要素が使える状態になったタイミングで、中の処理を実行します。画像などの読み込み完了は待たず、HTMLだけ準備されたら動きます。

ターゲット要素を取得

要素取得

const nav = document.querySelector(".den_nav");

クラス名 den_nav の要素（グローバルナビ）をページから1つ探して取得します。見つかった要素を nav という変数に入れます。

交差監視（IntersectionObserver）を作成

オブザーバー作成

const observer = new IntersectionObserver(entries => {

画面（ビューポート）と対象要素が「交差しているか」を監視する仕組みを作ります。交差状況が変わるたびに、後ろの関数が呼ばれます。

コールバック引数

entries => {

監視結果の配列 entries が渡されます。配列の中には、監視中の各要素の状態（見えているかなど）が入っています。

監視結果を1つずつ処理

ループ

entries.forEach(entry => {

監視対象（ここでは nav）ごとの状態を1件ずつ取り出して処理します。

可視判定

if (entry.isIntersecting) {

対象要素が画面内に入っている（交差している＝見えている）かを判定します。見えていれば true です。

表示用クラス付与

nav.classList.add("visible");

画面に見えているとき、ナビ要素に visible というクラスを付けます。CSS側でこのクラスにアニメーションや不透明度変更などを設定しておくと「見えたときの動き」が実現できます。

クラス除去

} else { nav.classList.remove("visible"); }

画面から外れた（見えていない）ときは、visible クラスを外します。これで「隠れているときの状態」に戻せます。

コールバック終了

});

1件の監視結果処理を終えます。

オブザーバー作成終了

});

IntersectionObserver の設定を終えます。

監視を開始

監視開始

observer.observe(nav);

先ほど取得したナビ要素 nav を監視対象として登録します。これで、ナビが画面に入る／出るたびに上の判定とクラス付けが動きます。

DOMContentLoaded の関数終了

終了括弧

});

「DOMが読み込まれたら実行する」関数の終わりです。ここまでの処理が、ページ読み込み直後にセットされます。

他に何かあるかなー…
一応補足としてお話しするなら、次のようなポイントがあるかも。

CSSが鍵

visible クラスに対して、例として opacity: 1; transform: translateY(0); transition: .3s; などのスタイルを用意すると、見えた瞬間にふわっと表示できます。初期状態（den_nav）側では opacity: 0; transform: translateY(-8px); のようにしておくと、切り替えがわかりやすいです。

安全対策

.den_nav が存在しない場合は observer.observe(nav); でエラーになります。初心者向けには、if (!nav) return; を要素取得直後に入れると安心です。

細かい設定

IntersectionObserver はしきい値やルート余白も設定できます（例: new IntersectionObserver(cb, { threshold: 0.5 }) で半分見えたら発火）。動きのタイミングを調整したいときに便利です。

次はブログ用のJavaScriptですが、これはden_nav_blogの部分が違うだけで、カラーの異なるCSSに合わせているだけです。

ブログ用のグローバルナビゲーションを目立たせるmenu.js

// ブログ用グローバルナビゲーションの動き
document.addEventListener("DOMContentLoaded", () => {
const nav = document.querySelector(".den_nav_blog");

const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
nav.classList.add("visible");
} else {
nav.classList.remove("visible");
}
});
});

observer.observe(nav);
});
    

このようにして、当サイトのグローバルナビゲーションはCSSとJavaScriptが連携して動いているわけです。
一口にグローバルナビゲーションといってもいろんなデザインパターンや動きがあると思うから、以前に使っていたコードも残しておきますね。