【HTML/CSS コーディング練習】中級編：ストアサイト（カフェ）／LP

目次

• コーディング練習課題
  • 課題内容
  • 設定単価
  • 素材
  • デザインイメージ
  • コーディング仕様
• コーディングをはじめよう！
  • ①「模写コーディング」に挑戦する
    • デモサイト
    • コーディングのヒント（レイアウト構成）
    • コーディング例（ソースコード）
    • 参考（模写コーディングの手順）
  • ②「デザインカンプからのコーディング」に挑戦する
    • デザインカンプ
    • コーディングのヒント（レイアウト構成）
    • コーディング例（ソースコード、デモサイト）

コーディング練習課題

課題内容

恵比寿のカフェ COFFEE から、お店のWebサイトを制作してほしいと依頼がありました。
メニュー、コーヒーの説明、お店の地図を掲載します。
メインビジュアルや背景イメージからお店の雰囲気が伝わるように工夫します。

設定単価

コーディング1ページ：5万円

素材

学習用の素材をダウンロードする
※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています

デザインイメージ

▼PC表示

▼スマホ表示

コーディング仕様

フォント

下記の順で指定します。
Helvetica Neue、Arial、Hiragino Sans、Hiragino Kaku Gothic ProN、Meiryo、sans-serif

コンテンツ幅

コンテンツの最大幅は1000pxで横のパディングは16pxです。
メインビジュアルだけ全幅にします。

メインビジュアル

全画面表示です。
高さはブラウザの高さにあわせて可変です。
右上にグローバルナビゲーションと中央にロゴを配置します。
メニューとロゴには少し影ができるようにシャドウをかけています。

背景画像

MENU、ABOUT、LOCATIONの背景画像は、PC時のみ固定のパララックスで実装します。

ABOUT

ボタンはホバー時に枠線で囲みます。CSSだけで表現していますが、少し難しいので分からなければデモサイトを参考にしてみてください。
ボタンのホバーについては、沢山の種類があるのでこの機会に色々調べて試してみてください。

LOCATION

Googleの地図を埋め込んでいます。
埋め込んだ後に、グレー表示になるようCSSを設定します。

コーディングをはじめよう！

コーディング練習は、下記の2つからお選びいただけます。

• ①模写コーディング：デモサイトを見ながら同じサイトを作る
• ②デザインカンプからのコーディング：デザインデータをもとにサイトを作る

①「模写コーディング」に挑戦する

デモサイトをもとに、模写コーディングに挑戦してみましょう！

②「デザインカンプからのコーディング」に挑戦する

デザインカンプからのコーディングに挑戦してみましょう！