【HTML/CSS コーディング練習】入門編：ブランドサイト（ジュエリー）／LP

目次

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

コーディング練習課題

課題内容

知り合いのデザイナーが立ち上げた、ジュエリーブランドの紹介ページを作ります。
ConceptとWorkを簡単にまとめた1枚のページです。

設定単価

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

素材

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

デザインイメージ

▼PC表示

▼スマホ表示

コーディング仕様

フォント

Google Fonts の「Crimson Text」を使用します。

コンテンツ幅

メインビジュアルとヘッダーメニューは90vw、コンテンツ部分は1000pxで設定します。メインビジュアルの高さは可変です。

グローバルナビゲーション

ConceptとWorkをクリックすると各コンテンツにジャンプするようページ内リンクを設定します。
Contactをクリックするとメーラーが起動して、件名に「お問い合わせ」と設定されている状態にします。

Concept、Work

画面幅を縮めた際に、画像とテキストエリアは縮小させます。

フッター

ロゴとコピーライトを横並びの両端で揃えます。

レスポンシブ

ブレークポイントは767pxです。
スマホ時は、Concept、Workの画像とテキストを縦に並べます。Workは画像、テキストの順で並ぶようにCSSで設定します。

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

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

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

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

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

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

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