フロントエンド案件修行 給食ぱん屋編(制限時間：8時間)
製作ファイル
↓スマホサイズでご覧ください。
案件の概要
-
- 架空パン屋さんのサイト制作(SP版のみ)
-
- 店長は給食のパンが好きすぎて店長になった
-
- 元教師の経験を活かし、パン屋のコンセプトは「給食」
工夫したポイント
共通
-
- iPhone SEを基準に単位をvwにして他のスマートフォンでも対応
-
- 各セクションタイトルの左右に、画像を疑似要素で表示
-
- クラス名は、CSS設計方法論のBEMを参考
メインビジュアル
-
- メインビジュアルはswiperを使用してパンの画像をスライドショーで表示
-
- メインビジュアルのパン画像をホバーするとアニメーションで少し拡大
商品紹介セクション
-
- 3種類のパンをリストにし、スクロールしたら左右から出現するアニメーションを実装
お知らせセクション
-
- dl要素で実装
-
- 最新のお知らせはspan要素で「NEW」の文字を追加
-
- 幅を狭めて見やすく実装
店舗情報セクション
-
- table要素で実装
-
- 幅を狭めて見やすく実装
実装しようと思ったが間に合わなかったアイデア
-
- ヘッダーにハンバーガーメニューを実装
-
- お問い合わせセクションのフォームに、必須入力チェックをjQueryで実装
