ブログページのヘッダーとサイドバーの境界線が重複する問題

[okash1n]

問題の説明

ブログページにおいて、サイドバーの境界線がヘッダー領域を突き抜けて表示される視覚的な不具合が発生しています。

現在の状態

• サイドバーの左側の境界線がヘッダーエリアまで伸びている
• ヘッダーの下部境界線とサイドバーの境界線が視覚的に混在している
• ヘッダーが独立したコンポーネントとして明確に分離されていない

期待される動作

1. ヘッダーの独立性: ヘッダーは全ページにおいて独立したコンポーネントとして扱われるべき
2. サイドバーの境界: サイドバーの境界線はヘッダーの下から開始されるべき
3. 明確な階層: ヘッダー > サイドバーという明確な視覚的階層が必要

影響範囲

• /blog/ 以下のページ
• サイドバーが表示されるすべてのページで同様の問題が発生する可能性

技術的な原因（推測）

VitePressのデフォルトレイアウトにおいて：

• ヘッダー（.VPNavBar）のz-indexまたはレイアウト設定が不適切
• サイドバー（.VPSidebar）の境界線がヘッダーを考慮していない
• docs/.vitepress/theme/custom.css でヘッダーのカスタマイズはされているが、サイドバーとの相互作用が考慮されていない

修正の方向性

1. ヘッダーに適切なz-indexを設定
2. サイドバーの上部マージン/パディングを調整
3. サイドバーの境界線の開始位置をヘッダーの高さ分下げる

再現手順

1. https://isms-guide.com/blog/ にアクセス
2. ヘッダーとサイドバーの境界線の重なりを確認

参考

関連ファイル：

• docs/.vitepress/theme/custom.css (ヘッダーのカスタマイズ)
• docs/.vitepress/theme/Layout.vue (レイアウト定義)
• docs/.vitepress/config.mts (サイドバー設定)

実装タスク

• Phase 0: 現状のスタイル確認（agent-browserで確認）
• Phase 1: ヘッダーのz-index設定（30に設定）
• Phase 2: サイドバーの位置調整（ヘッダーの高さ分オフセット）
• Phase 3: ヘッダーの下部境界線追加
• 全ページでの動作確認（/blog/, /requirements/, /controls/, /）
• 変更をコミット

[okash1n]

修正完了

PR #99 にて修正を実装しました。

修正内容

1. ヘッダーのz-index設定: 30に設定してサイドバーより上位に配置
2. 背景色の明示的な設定: スクロール時の透過問題を解消
3. サイドバーの位置調整: ヘッダーの高さ分オフセット
4. 境界線の最適化: コンテンツ幅に合わせた配置で太さ不一致を解消

検証済み

• デスクトップ (1920x1080) - ライト/ダークモード ✓
• タブレット (768x1024) ✓
• モバイル (375x667) ✓
• 全ページで動作確認済み ✓

詳細は PR #99 をご確認ください。