完成見本と仕様を確認しよう
ここからは、これまでに学んだHTML、CSS、JavaScriptを組み合わせて、With Caféの1ページサイトを制作します。
基礎Lessonのように、完成コードを上から順番に写す課題ではありません。完成見本と仕様を確認し、自分で考えてコードを書きます。迷ったときに確認できる手順とヒントも用意しています。
このLessonのゴール
- 完成見本をPC幅とスマートフォン幅で確認できる
- 必要なセクションと機能を書き出せる
- 完成条件を確認してから制作を始められる
完成見本
見本上部の「PC 1440px」「SP 375px」ボタンで表示を切り替えられます。それぞれ上から下まで確認し、並び方、文字サイズ、ナビゲーションがどう変わるか書き出してください。
制作するセクション
- ヘッダー
- メインビジュアル
- 私たちについて
- 今日のおすすめ
- お知らせ
- 店舗情報
- お問い合わせ
- フッター
実装する機能
- ナビゲーションからページ内の各セクションへ移動できる
- スマートフォンではメニューボタンからナビゲーションを開閉できる
- メニュー画像が縦横比を保って表示される
- 画面幅に応じてカードと店舗情報の並び方が変わる
- スクロールするとコンテンツがフェードインする
- 動きを減らすOS設定にも対応する
デザイン仕様
| 項目 | 値 |
|---|---|
| メインカラー | #ff7f50 |
| 文字色 | #292722 |
| 補助文字色 | #6f6a61 |
| 背景色 | #f8f4ec |
| 補助カラー | #7b8d78 |
| コンテンツ最大幅 | 1120px |
| レスポンシブ切り替え | 800px以下 |
数値を暗記する必要はありません。実務では、デザイン資料から必要な値を確認しながら実装します。
