🔍 ヘッダーナビゲーション動作確認ページ

対象サイト: public/plant-factory

更新日: 2025-12-27

✅ 実装済み項目

✓ 全12ページのヘッダー統一完了
✓ 「ブログ一覧」リンクの追加完了
✓ 「ニュース一覧」リンクの追加完了
✓ ハンバーガーメニューボタンの実装完了
✓ JavaScript動作コードの確認完了
✓ CSS レスポンシブ対応の確認完了

🔗 ページリンク一覧

以下のリンクをクリックして、各ページが正しく表示されるか確認してください。

メインページ（10ページ）

ブログ・ニュース

📱 モバイル表示テスト手順

方法1: ブラウザ開発者ツール（推奨）

上記のリンクからページを開く
F12 キーを押して開発者ツールを開く
Ctrl + Shift + M（Windows）または Cmd + Shift + M（Mac）でモバイルビューに切り替え
デバイスを選択: iPhone 12/13, Pixel 5, Galaxy S21 など
画面幅を768px以下に設定

方法2: ブラウザウィンドウのリサイズ

上記のリンクからページを開く
ブラウザウィンドウの横幅を狭くする（768px以下）
ハンバーガーメニュー（≡）ボタンが表示されることを確認

✓ 確認項目チェックリスト

デスクトップ表示（768px以上）

□ ハンバーガーメニューボタンが非表示になっている
□ ナビゲーションメニューが横並びで表示されている
□ 全12項目（ホーム〜ニュース一覧）が表示されている
□ 「ブログ一覧」リンクをクリックしてブログページに遷移できる
□ 「ニュース一覧」リンクをクリックしてニュースページに遷移できる

モバイル表示（768px以下）

□ ハンバーガーメニューボタン（≡）が表示されている
□ 初期状態でナビゲーションメニューが非表示になっている
□ ハンバーガーメニューをクリックするとメニューが展開される
□ メニューが縦並びで表示される
□ メニュー項目がタップしやすいサイズになっている
□ メニュー外をクリックすると自動的に閉じる
□ 「ブログ一覧」「ニュース一覧」リンクが正しく動作する

JavaScript動作確認

□ ハンバーガーメニューをクリックしてメニューが開閉する
□ メニュー外をクリックしてメニューが自動的に閉じる
□ コンソールエラーが発生しない（F12 → Console タブで確認）

リンク整合性

□ トップページ → ブログ一覧 → 正しく表示される
□ トップページ → ニュース一覧 → 正しく表示される
□ ブログページ → ホーム → トップページに戻る
□ ニュースページ → ホーム → トップページに戻る
□ 全ページから全ページへ遷移できる

🐛 トラブルシューティング

メニューが開閉しない場合

1. ブラウザのコンソール（F12 → Console）でエラーを確認
2. scripts.js が正しく読み込まれているか確認（Network タブ）
3. .menu-toggle と .nav-menu の要素が存在するか確認（Elements タブ）

スタイルが崩れる場合

1. styles.css が正しく読み込まれているか確認
2. ブラウザのキャッシュをクリアして再読み込み（Ctrl + F5）
3. CSS の @media クエリが有効か確認（Elements → Computed → Show All）

📄 関連ドキュメント

📊 実装サマリー

項目	詳細	ステータス
更新ページ数	12ページ（メイン10 + ブログ + ニュース）	完了
追加リンク	ブログ一覧、ニュース一覧	完了
モバイル対応	ハンバーガーメニュー実装（768px以下）	完了
JavaScript	メニュー開閉、外クリック検知	完了
アクセシビリティ	aria-label 属性設定	完了