Website 02
・・・
介護派遣会社
ランディングページ
デザインカンプをもとに
コーディングした課題作品です。
※Basic認証を設定しています。
01
Overview
制作概要
| 制作内容 | デザインカンプからのコーディング |
| 使用技術 | HTML / CSS / JavaScript / jQuery |
| 対応 | レスポンシブ対応 |
| 制作時間 | 約35時間 |
| 教材・課題 | しょーごログ「コーディング練習課題 中級」 |
02
Implementation
実装のポイント
01
Hamburger Menu
|
ハンバーガーメニュー
・jQueryを使用してメニューの開閉を実装
・メニュー内のリンク選択時にも自動で閉じる処理を実装
・画面幅に応じてPC用ナビゲーションとハンバーガーメニューを切り替え
①閉じている状態
②開いた状態
02
Slider
|
2種類のスライダー
・Slickを使用して2種類のスライダーを実装
・①実績紹介は自動再生、②導入事例は前後ボタンによる手動操作に設定
・画面幅に応じて表示枚数を切り替えるレスポンシブ対応
スライダー① 自動ループ再生
スライダー② 前後ボタンによる手動操作
03
Accordion
|
アコーディオン
・jQueryを使用してFAQの開閉機能を実装
・slideToggle()で回答部分をスライド表示・非表示
・toggleClass()で開閉状態を切り替え
①閉じている状態
②開いている状態
04
Form
|
Ajaxによるフォーム送信
・Ajaxを使用してGoogleフォームへデータを送信
・ページ遷移せずに送信結果を表示
・入力状態を監視し、必須項目が揃うまで送信ボタンを無効化
送信前
送信後
03
Responsive
レスポンシブ
ナビゲーションをハンバーガーメニューに切り替え、レイアウトやスライダーの表示枚数などを画面幅に合わせて調整しています。
PC
スマホ
04
What I learned
制作を通して学んだこと
●
jQueryによる実装
ハンバーガーメニューなど、ユーザー操作に応じて表示を切り替える方法を学びました。
●
スライダーのカスタマイズ
用途に合わせてSlickの設定を変更する方法を学びました。
●
Ajaxによる非同期通信
Googleフォームと連携し、ページを遷移せずに、フォームを送信する仕組みを学びました。
●
アコーディオンの実装
クリックイベントとクラス切替による開閉処理を学びました。