ホームページコーディング：介護派遣サービス
OVERVIEW
現役エンジニアであるしょーごさんが提供しているコーディング演習課題として、架空の介護派遣サービスのホームページ（トップページのみ）を作成いたしました。実装機能やコーディングで工夫したポイントは以下をご確認ください。【制作期間：5日】
目次
1. サイトURLと認証パスワード
2. 使用しているアニメーション機能（Javascript / jQuery）
3. コーディングで工夫したポイント（HTML / CSS）
4.Webサイト全体画像（PC / スマホ）
1. サイトURLと認証パスワード
こちらから、サイトをご確認いただけます。
Basic認証をかけておりますので、ユーザーIDとパスワードをご入力ください。
ユーザーID：demo
パスワード：demo
2. 使用しているアニメーション機能（Javascript / jQuery）
◎ハンバーガーメニュー
タブレット〜スマホ幅で、ヘッダーのナビゲーションメニューを非表示にし、ハンバーガーメニューを表示します。
内部リンクのクリックで、自動的にメニューが閉じる仕様です。
◎固定ヘッダー
ヘッダーが追従します。
これにより、ユーザーが興味のあるページに遷移しやすくなります。
また、CTAボタン（資料請求）への誘導もしやすくなります。
◎Swiper
トップページの以下2箇所を、Swiperで実装しています。
①ファーストビュー直下
5枚の画像が自動で無限ループする仕様です。
②導入事例
左右の矢印をクリックすることで、PC幅では2スライドずつ、スマホ幅では1スライドずつ左右に動く仕様です。
◎アコーディオンリスト
よくある質問について、クリックでアコーディオンリストが開き、回答が表示される使用です。
3. コーディングで工夫したポイント（HTML / CSS）
◎レスポンシブ対応での配置調整
図形の大きさや位置を調整して、どの画面幅でも自然なデザインになるようにいたしました。
4.Webサイト全体画像（PC / スマホ）
左がPC、右がスマホ幅です。