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