サイト名称変更のお知らせ

【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つからお選びいただけます。

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

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

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

デモサイト

デモサイトはこちら

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

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

コーディング例(ソースコード)

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

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

ソースコードはこちら

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

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

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

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

Adobe XD デザインカンプ

WEB版
ダウンロード版
※ダウンロード版のファイルを開くには、Adobe XDのインストールが必要です。
※画像はグレー画像に置き換えています。

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

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

コーディング例(ソースコード、デモサイト)

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

ソースコード

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

ソースコードはこちら

デモサイト

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

デモサイトはこちら

関連記事

コーディング練習一覧

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

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

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

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

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