【HTML/CSS コーディング練習】入門編:レシピサイト/トップページ

コーディング練習課題

課題内容
友達から、趣味の料理レシピを公開するためのサイトを作ってほしいと頼まれました。まずはトップページのコーディングを行います。
設定単価
コーディング1ページ:1万円
素材
学習用の素材をダウンロードする
※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています
デザインイメージ

▼PC表示

▼スマホ表示

コーディングポイント
フォント
下記の順で指定します。
Helvetica Neue, Arial, Hiragino Sans, Meiryo, sans-serif
コンテンツ幅
全幅表示です。
メインビジュアル
全幅表示で、高さはブラウザの高さに合わせます。
画像の横並び
3枚の画像を均等に配置して全幅で表示します。
高さは500px固定で、画面サイズに合わせて画像が拡大、縮小します。
フッター
SNSのリンクを横並びで中央に配置します。
レスポンシブ
ブレークポイントは834pxです。
スマホ表示は、3枚の画像を縦に並べます。

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

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

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

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

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

デモサイト

デモサイトはこちら

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

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

解答例(ソースコード)

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

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

ソースコードはこちら

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

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

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

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

デザインカンプ

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

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

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

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

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

ソースコード

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

ソースコードはこちら

デモサイト

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

デモサイトはこちら

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

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

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

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

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

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

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

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

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

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

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

【プレゼント特典】

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

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

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

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

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

    【アンケートフォーム】

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

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