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

目次

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

コーディング練習課題

課題内容

渋谷のWeb制作会社がコーポレートサイトを作るとのことでコーディングのお手伝いをします。事業内容や会社情報などを簡単にまとめたLPタイプのWebサイトです。

設定単価

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

素材

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

デザインイメージ

▼PC表示

▼スマホ表示

コーディング仕様

コンテンツ幅

メインビジュアルとAboutは全幅で他は1000pxです。

ヘッダー

右上の「お問い合わせ」ボタンは、スマホ表示の場合は非表示にします。

メインビジュアル

全幅で高さは画面下に合わせます。

各セクションのタイトル

英字タイトルと日本語タイトルで記述します。
英字タイトルは「letter-spacing」で文字の間隔を少し広くします。

News

ニュースエリアを3分割して、間に罫線を引きます。
日付はtimeタグを使用してみましょう。

About

全幅で表示します。
画像の高さは400px固定です。

Business

高さをずらした横並び配置です。
スマホ表示の画像の並び順を確認した上で、適切なコーディングを考えてみましょう。

Company

横幅は1000pxで、画像を上に重ねます。
画像の高さは400px固定です。

レスポンシブ

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

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

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

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

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

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

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

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