【HTML/CSS コーディング練習】中級編：ブログサイト／2カラム

目次

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

コーディング練習課題

課題内容

旅するブロガーから旅行記事を公開するためのブログサイトの制作依頼です。
最終的にはWordPressで制作を行いますが、まずはトップページのみHTMLでコーディングを行います。レイアウトはブログ定番の2カラムです。

設定単価

コーディング（トップページのみ）：5万円

素材

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

デザインイメージ

▼PC表示

▼スマホ表示

コーディング仕様

フォント

Google Fonts の「Noto Sans」と「Noto Sans JP」を使用します。

コンテンツ幅

コンテンツの最大幅は1200pxで横のパディングは16pxです。
グローバルナビゲーションとフッター背景だけ全幅にします。

ヘッダー

PC、スマホ時ともに固定します。
ロゴの下に全幅のグローバルナビゲーションを配置します。
グローバルナビゲーションのメニューは1200pxの中におさめます。

ピックアップエリア

ピックアップ記事3つを横並びに配置します。
リンクはホバー時に下線が消えます。

メインエリア、サイドバー

メインエリアとサイドバーを横並びに配置します。
それぞれのコンテンツの横幅は、レスポンシブ時に可変になるところがポイントです。
メインエリア、サイドバーともに記事の抜粋が多いので、articleタグを使う練習をしてみましょう。

フッター

About、Menu、Twitterの3つのブロックを横並びに配置します。
Twitterエリアには、Twitterの埋め込みを行います。

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

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

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

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

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

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

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