【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)
実際は、各製品毎にページを作りますが、中身は同じなので今回は1ページだけ制作します。
画像とテキストを横並びに配置させ、一番下にProductsページに戻るためのリンク「Back To Products」を設置します。
Companyページ(company.html)
Google Map を埋め込み、CSSのプロパティでグレースケールにします。
Contact
メニューの「CONTACT」リンクをクリックするとメールが起動します。
レスポンシブ
ブレークポイントは900pxです。

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

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

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

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

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

デモサイト

デモサイトはこちら

コーディングのヒント(レイアウト構成)

コーディングで悩んだ場合は、下記のレイアウト構成の組み立て方を参考にしてみてください。
サイト全体と各パーツのレイアウト構成について解説しています。

解答例(ソースコード)

コーディングが完了したら、下記の「ソースコード」を参考に、自分の作ったコードとサイトをチェックしてみてください。

解答の1例です。コーディングの仕方は1パターンだけではないので、あくまでも参考として自分のソースコードと比較しながらチェックしてみてください。

ソースコードはこちら

参考(模写コーディングの手順)

模写コーディングのやり方に迷った方は、こちらの模写コーディングの手順を参考にしてみてください。

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

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

デザインカンプ

▼XDデータ
XDデータをダウンロードする
※ファイルを開くには、Adobe XDのインストールが必要です。

ヒント(レイアウト構成)

コーディングで悩んだ場合は、下記のレイアウト構成の組み立て方を参考にしてみてください。
サイト全体と各パーツのレイアウト構成について解説しています。

解答例(ソースコード、デモサイト)

コーディングが完了したら、下記の「ソースコード」と「デモサイト」を参考に、自分の作ったコードとサイトをチェックしてみてください。

ソースコード

解答の1例です。コーディングの仕方は1パターンだけではないので、あくまでも参考として自分のソースコードと比較しながらチェックしてみてください。

ソースコードはこちら

デモサイト

デモサイトと自分で作成したサイトを比較して、デザインや動きなどをチェックしてみてください。

デモサイトはこちら

コーディング練習 課題一覧

【入門編】基礎学習を終えた後のウォーミングアップ用の練習サイト

【初級編】簡単なHTML、CSSでできるシンプルな練習サイト

【中級編】少し複雑なHTML、CSS、JavaScriptを使用した練習サイト

【上級編】難易度の高いHTML、CSS、JavaScriptを駆使した練習サイト

【番外編】Webサイト制作でよく使う技術を練習

リクエスト受付中
【プレゼント特典あり】

当サイトを利用いただき誠にありがとうございます。

皆様の学習がより良いものになるよう、日々サイトの改善に努めております。

利用してみて、「分かりづらい、もっとこうしたほうが良い」という点、「こんな学習内容があればいいのに」というリクエストをお送りください。

特典としまして、当サイトでは公開していない追加の学習コンテンツをご案内させいただきます。

【プレゼント特典】

【特別編】コーポレートサイト/サイドメニュータイプ

学習内容は以下の通りです。

  • ・デモサイト
  • ・レイアウト構成解説
  • ・ソースコード

下記、アンケートフォームでご入力いただいたメールアドレスへ、学習ページのURLをお送りさせていただきます。

※メールが届かない場合、メールアドレスの入力間違いか、迷惑メールへ振り分けられている可能性がありますのでご確認ください。

    【アンケートフォーム】

    ※学習に関するご質問につきましては、質問箱からお願いいたします。

    (※学習コンテンツのURL送付以外の目的で使用いたしません。)