- Basic認証
- ユーザーID：demo / パスワード：demo
- 担当範囲
- 静的コーディング / Wordpress構築
- 制作期間
- 18日
- 使用言語
- HTML / CSS（Sass） / JavaScript / PHP / Wordpress
- デザインツール
- Figma
- ポイント
Point 1 スクロールで固定ヘッダーに切り替える実装
- 初期表示用ヘッダー（#js-header）と、スクロール後に表示する固定ヘッダー（#js-header-fixed）を別要素で用意。
- スクロール量に応じて表示／非表示を切り替え、ロゴも白→黒など状態に合わせて切り替え可能。
Point 2 PCのみ追従する目次（TOC）を自動生成し、現在位置をアクティブ表示
- 記事内の h2 を収集して目次を自動生成し、クリックすると該当見出しへスクロール移動。
- スクロール位置に応じてアクティブ項目をリアルタイム更新し、今読んでいるセクションを強調表示できる構成。
Point 3 スクロール位置に応じてアクティブ項目をリアルタイム更新し、今読んでいるセクションを強調表示できる構成。
- HTML の details / summary 要素を使用してアコーディオンUIを実装し、JavaScriptに依存しすぎないシンプルな構成を採用。
- 1つのアコーディオンが開かれた際に、他の details 要素は自動で閉じるよう制御し、同時に複数展開されない仕様。
全体イメージ
