- 担当範囲
- 静的コーディング / Wordpress構築
- 制作期間
- 30日
- 使用言語
- HTML / CSS(Sass) / JavaScript / PHP / Wordpress
- デザインツール
- Figma
- ポイント
Point 1 直感的に使えるドロップダウンメニュー
- 階層を整理したメニュー構造により、必要な情報へ迷わずアクセス可能。
- "jQueryのクリックイベントを用いて、スムーズに開閉する仕組みを実装。
Point 2 魅力を伝える “スライダー表現”
- 建築現場の雰囲気が伝わる写真を配置し、視覚的な印象を向上。
- "Swiper"を使用。"loop"や"autoplay"を活用して滑らかな切り替えを実装。
Point 3 トップへ戻るボタン(スクロールで表示/スムーススクロール対応)
- 300px以上スクロールした際、.c-to-top に js-show を付け外しして、opacity と visibility でフェード表示。
- クリックするとwindow.scrollTo({ top: 0, behavior: 'smooth' }) でスムーススクロール。