Case Study Case Study
Caresend
Detail
- 制作範囲
- 静的コーディング
- 制作期間
- 7日
- 使用言語
- HTML / CSS（Sass） / JavaScript
- 使用ツール・CMS
- Figma
- Basic認証
- ユーザーID：demo / パスワード：demo
Point
アンカーリンクのスムーススクロール実装
- 画面幅に応じて offset を切り替え、固定ヘッダー分を考慮した位置にスクロールすることで、見出しが隠れないように調整。
- jQuery("html, body").animate() を使い、指定した speed でクリック位置から目的のセクションまで自然にスクロール。
必須入力の検証で送信ボタンを制御するフォーム
- input[required] を対象に checkValidity() で入力状態を判定し、全てOKになった時だけ送信ボタンを有効化。
- 送信時に form.checkValidity() がOKなら「送信完了」を表示（alert＝簡易モーダル）し、フォームをリセットしてボタン状態も再評価。
スライダーを無限ループ＋レスポンシブ表示に設定
- loop: true により最後から最初へ戻る無限スライドにし、navigation（prev/next）で矢印クリック操作も可能。
- PCでは breakpoints で slidesPerView: 2 に切り替え、幅に応じて spaceBetween と slidesPerGroup: 2 を調整して2枚単位でスライドする。
Code
