CSS設計の方針
- 命名: BEMに準拠（
.l-header,.c-button,.u-spなど） - レスポンシブ: 768pxブレークでPC/SP切替
- ユーティリティ: .u-pc, .u-spでテキストの改行を制御
- ファイル構成: foundation/layout/component/utility に分割
- 変数管理: カラー・フォント・ブレークポイントをSass変数化
JavaScriptで実装した機能
- ドロワーメニュー: ハンバーガーとドロワーの連動
- スムーズスクロール: jQuery animateでページ内リンクに対応
- スライダー: About（自動スクロール）、Spot（ナビゲーション付き）
- アコーディオン: GSAPで高さアニメーション
- モーダル: dialogで実装し背景をクリックで閉じる
- ページトップ: スクロール表示切替（300px閾値）
- フォーム: 送信シミュレーションとバリデーション
スライダー（Swiper.js）
Aboutは自動スクロール、Spotはナビゲーション付き。PC/SPでスライド枚数を調整。画像の自動ループを実装。
アコーディオン（GSAP）
HTMLの<details>でマークアップ。GSAPで高さとopacityをアニメーション。is-openedで状態管理。
モーダル（dialog）
showModal()/close()で開閉、オーバーレイクリックで閉じる。HTML dialog要素を採用し、JS依存を最小化。
スムーズスクロール
jQueryでページ内リンクに対応。ヘッダー高をouterHeight()で取得し、20pxオフセットを適用。
このコーディングで特に工夫した点
- レトロテーマに合わせた猫をテーマにした装飾要素をcalc()を用いて相対位置・相対サイズで配置
- セマンティックHTMLで構造化、適切なARIA属性を付与
- Sass変数でカラー・フォントを一元管理
- ブレークポイントを変数化し、メディアクエリを統一
- Swiper.jsとGSAPで実装を簡素化
このコーディングでの学び
- GSAPでアコーディオンの高さをアニメーション
- HTML標準の<dialog>でモーダルを実装
- アクセシビリティ対応でaria-labelledbyを付与
- レスポンシブ画像の<picture>でPC/SP出し分け
- 変数・mixinによるSassの保守性向上
- スクロール量でのページトップボタンの表示切替