Website 01
・・・
建設会社
コーポレートサイト
デザインカンプをもとに
コーディングした課題作品です。
※Basic認証を設定しています。
01
Overview
制作概要
| 制作内容 | デザインカンプからのコーディング |
| 使用技術 | HTML / CSS / JavaScript |
| 対応 | レスポンシブ対応 |
| 制作時間 | 約10日間 |
| 教材・課題 | しょーごログ「コーディング練習課題 中級Ex」 |
02
Implementation
実装のポイント
01
Slider
|
スライダー
・複数画像を自動で切り替えるスライダーを実装
・Slickを使用し、自動再生や表示枚数を設定
・画面幅に応じて表示枚数を切り替えるレスポンシブ対応
02
Modal Window
|
モーダルウィンドウ
・クリックで詳細を表示するモーダルを実装
・dialog要素を使用して開閉処理を実装
・できるだけスクロールせずに記事を読めるよう、表示領域を調整
①閉じている状態
②開いた状態
03
Scroll Animation
|
スクロールアニメーション
・JavaScriptのIntersection Observer APIを使用
・要素が画面内に入ったタイミングを検知
・クラスを付与してスクロールアニメーションを実装
04
Form
|
Googleフォームとの連携
・Googleフォームと連携して入力内容を送信
・hidden iframeを利用し、送信時のページ遷移を抑制
・送信完了後にThanksページへ遷移
①送信前のフォーム
②送信完了後のThanksページ
05
Loading
|
初回表示のローディング画面
・初回アクセス時のみローディング画面を表示
・学んだ仕組みを自身のポートフォリオにも応用
・ポートフォリオでは、CSSが他ページへ干渉する問題に対し、JavaScriptで適用範囲を制御
03
Responsive
レスポンシブ
縦型固定ナビゲーションを
ハンバーガーメニューに切り替え、
画面幅に合わせてレイアウトを調整しています。
PC
スマホ
04
What I learned
制作を通して学んだこと
●
レスポンシブ対応
確認を重ね、要素同士の位置関係を細かく調整する大切さを学びました。
●
JavaScriptの実装
縦型ナビゲーションの開閉や、モーダルウィンドウなど、複数の機能の実装を経験しました。
●
BEMによるCSS設計
BEMを意識し、意図しないコード干渉を避けられるようになってきました。
●
検証・問題解決
思いどおりに動作しないときは別の方法を調べて試し、コンソールを使った横スクロールの確認など、実装後の検証方法も学びました。