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

模写はできるけど、「これで実務に通用するのか不安…」と感じていませんか？

そんな方に向けて、実務で “通用する人としない人の違い” をまとめた無料メール講座を用意しました。

練習方法

コーディング練習は、「模写コーディング」と「デザインカンプからのコーディング」が行えます。

１. 模写コーディング

「デモサイト」を見ながら同じサイトを作るコーディング練習です。実際のサイトで動きが確認できるのでコーディング初級者におすすめです。

[練習方法]
①上の「デモ」ボタンをクリックしてデモサイトを確認します。
②デモサイトを見ながら同じサイトを作成します。
模写コーディングの詳しい手順については、「【コーディング例あり】模写コーディングのやり方【手順を解説】」を参考にしてみてください。

２. デザインカンプからのコーディング

「デザインデータ」と「コーディング仕様」をもとにサイトを作るコーディング練習です。実務と同じ条件でコーディングを行うのでより実践的です。

[練習方法]
①下の「課題内容」を確認してから「素材（画像）」をダウンロードします。
②「デザインデータ」と「コーディング仕様」を確認しながら、サイトを完成させます。

▼PC表示

▼スマホ表示

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

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

※ダウンロード版のファイルを開くには、ツールのアカウントまたはインストールが必要です。

フォント: Google Fonts の「Noto Sans」と「Noto Sans JP」を使用します。
コンテンツ幅: コンテンツの最大幅は1200pxで横のパディングは16pxです。
グローバルナビゲーションとフッター背景だけ全幅にします。
ヘッダー: PC、スマホ時ともに固定します。
ロゴの下に全幅のグローバルナビゲーションを配置します。
グローバルナビゲーションのメニューは1200pxの中におさめます。
ピックアップエリア: ピックアップ記事3つを横並びに配置します。
リンクはホバー時に下線が消えます。
メインエリア、サイドバー: メインエリアとサイドバーを横並びに配置します。
それぞれのコンテンツの横幅は、レスポンシブ時に可変になるところがポイントです。
メインエリア、サイドバーともに記事の抜粋が多いので、articleタグを使う練習をしてみましょう。
フッター: About、Menu、Twitterの3つのブロックを横並びに配置します。
Twitterエリアには、Twitterの埋め込みを行います。