【HTML/CSS コーディング練習】初級編：ポートフォリオサイト／LP

目次

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

コーディング練習課題

課題内容

東京の西麻布を拠点に活動するフォトグラファーから、ポートフォリオ用のサイトを作ってほしいと依頼がありました。
プロフィール欄の他に、作品の紹介、近況の活動を知らせるニュース、コンタクトフォームが必要とのことです。

設定単価

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

素材

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

デザインイメージ

▼PC表示

▼スマホ表示

コーディング仕様

コンテンツ幅

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

メインビジュアル

全幅で高さは420px固定です。

About

テキストのみのエリアです。住所のブロックとプロフィールのブロックで分割されているのがポイントですが、特に決まりはないので自由にコーディングしてみてください。

Works

画像を横並びに配置します。
3つめの画像で折り返されるように、折り返し設定も忘れないようにしてください。
スマホ表示の際は縦1列に並びます。

News

日付とニュースタイトルを横並びにしてリストのように並べます。
スマホ表示の際は日付とタイトルが縦に並びます。

Contact

ラベルと入力フィールドを横並びに配置します。
送信ボタンはホバー時に色が反転します。
送信機能は必要ありません。

レスポンシブ

ブレークポイントは600pxです。

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

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

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

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

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

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

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