With Caféの完成サイトを見てみよう
このカリキュラムでは、ベーカリーカフェ「With Café」のWebサイトを作ります。
最初に完成サイトを見て、これから何を学ぶのかを確認しましょう。このLessonでは、まだコードを書きません。分からない言葉があっても問題ありません。
このLessonのゴール
- 完成サイトをPC表示とスマートフォン表示で確認できる
- ページを構成する主なパーツと操作できる場所を見つけられる
- HTML、CSS、JavaScriptの大まかな役割を説明できる
完成サイト
見本上部の「PC 1440px」「SP 375px」ボタンで、パソコン表示とスマートフォン表示を切り替えられます。両方の表示を確認してから、サイトを実際に操作してみましょう。
- 「PC 1440px」を選び、ページを一番下までスクロールする
- 「メニューを見る」を押す
- ヘッダーのリンクを押す
- 「SP 375px」へ切り替える
- スマートフォン表示でメニューボタンを押す
ページを上から確認しよう
完成サイトは、いくつかの大きなまとまりでできています。
| 場所 | 掲載している内容 |
|---|---|
| ヘッダー | ロゴとページ内を移動するナビゲーション |
| メインビジュアル | 店舗の第一印象を伝える写真、見出し、ボタン |
| 私たちについて | 店舗の考え方と3つの特徴 |
| 今日のおすすめ | 商品写真、商品名、価格、説明 |
| お知らせ | 日付とお知らせのタイトル |
| 店舗情報 | 住所、営業時間、地図へのリンク |
| フッター | ロゴ、ナビゲーション、著作権表示 |
ページ全体を一度に作るわけではありません。これらのまとまりを、Lessonごとに1つずつ追加していきます。
3つの技術の役割
このサイトの前半では、主にHTML、CSS、JavaScriptを使います。
HTML
見出し、文章、画像、リンクなど、ページの構造と意味を作ります。最初は装飾のない状態で、ページの内容を上から順番に組み立てます。
CSS
色、文字サイズ、余白、横並びなど、ページの見た目と配置を整えます。画面幅に合わせて表示を変えるレスポンシブ対応もCSSで行います。
JavaScript
クリックに反応してメニューを開くなど、ページの動きと操作を作ります。
このあとGSAPというライブラリも使い、スクロールに合わせた表示演出を追加します。
完成までの道のり
- 制作環境とフォルダを準備する
- HTMLでページの内容を作る
- CSSでデザインを整える
- スマートフォン表示に対応する
- JavaScriptでメニューを動かす
- GSAPで必要な演出を加える
- 表示と操作を確認して完成させる
実際に確かめてみよう
完成サイトの中から、次のものを1つずつ探してください。