【HTML/CSS コーディング練習】中級編：ストアサイト（インテリア）／グリッドレイアウト

練習課題レイアウト構成ソースコード

デモ

学習素材ダウンロード（※）

※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています。

コーディング練習課題
コーディングをはじめよう！
- ①「模写コーディング」に挑戦する
  - デモサイト
  - コーディングのヒント（レイアウト構成）
  - コーディング例（ソースコード）
  - 参考（模写コーディングの手順）
- ②「デザインカンプからのコーディング」に挑戦する
  - デザインカンプ
  - コーディングのヒント（レイアウト構成）
  - コーディング例（ソースコード、デモサイト）

コーディング練習課題

課題内容

南青山で家具やインテリアの企画、販売を行う会社から、製品を紹介するためのWebサイトを制作してほしいと依頼がありました。オリジナルの製品を一覧で見せられるよう、グリッドレイアウトでコーディングを行います。

設定単価

コーディング：15万円
・トップページ
・Productsページ
・Products詳細ページ（16ページ）
・Aboutページ
・Companyページ

素材

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

デザインイメージ

▼PC表示（トップ）

▼PC表示（Products）

▼PC表示（Products詳細）

▼PC表示（About）

▼PC表示（Company）

▼スマホ表示（トップ）

▼スマホ表示（Products）

▼スマホ表示（Products詳細）

▼スマホ表示（About）

▼スマホ表示（Company）

コーディング仕様

コンテンツ幅: 全体の最大幅は1360pxで横のパディングは40pxです。
About、Companyページの最大幅は600pxです。
商品詳細ページの最大幅は800pxです。
ハンバーガーメニュー: ハンバーガーメニューのデザインと動きについては、デモサイトを参照してください。
トップページ（index.html）: プロダクトの一覧は、グリッドレイアウトでPC時は4列、スマホ時は2列で表示します。
「View More」のリンクをクリックすると、Products一覧ページへ遷移します。
Productsページ（products.html）: 基本的にはトップページと同じですが、一覧下にページネーションをつけてページ遷移できるようにします。
Products詳細ページ（item1.html）: HTMLサイトの場合、各製品毎にページを作りますが、今回は中身の構成が同じなので1ページだけ制作します。（※WordPressサイトの場合、テンプレートファイルで共通化します。）
画像とテキストを横並びに配置させ、一番下にProductsページに戻るためのリンク「Back To Products」を設置します。
Companyページ（company.html）: Google Map を埋め込み、CSSのプロパティでグレースケールにします。
Contact: メニューの「CONTACT」リンクをクリックするとメールが起動します。
レスポンシブ: ブレークポイントは900pxです。