【HTML+CSS練習】サンプルサイトで学ぶコーディング練習

最終更新日

当サイトは、サンプルサイトの制作を通してHTMLとCSSのコーディング練習ができる、Webサイト制作の学習に特化したサイトです。

対象者は、HTMLとCSSの基礎学習を終えた方です。

練習用のサンプルサイトは、入門編から上級編までスキルに応じて選択することができます。

【HTML+CSS】練習用サンプルサイト

HTML、CSSの練習用サンプルサイトの一覧は以下の通りです。

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

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

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

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

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

各レベルの特徴

入門編のサンプルサイト
HTMLとCSSの基礎学習を終えたばかりの方におすすめの、簡単なHTMLとCSSだけでコーディングできるサンプルサイトです。
初級編のサンプルサイト
入門編よりも使用するHTMLタグやCSSプロパティの種類が多く、より学習できる範囲が広がっています。
中級編のサンプルサイト
2カラムのレイアウトや少し複雑なHTMLやCSSを使用しています。また、JavaScript(jQuery)も少し使用しています。
上級編のサンプルサイト
JavaScript(jQuery)を多く使用しているので、JavaScriptの基礎学習を終えた方向けです。

【HTML+CSS】練習方法について

練習するサイトを選んだら、メニューページを参照してサンプルサイトのコーディングを開始します。
各サンプルサイトには、「レイアウト構成の解説」と「ソースコード」がついているので、コーディングに悩んだ際のヒントになります。

サンプルサイトの練習方法については、下記の2パターンがあります。

  • ①:デザインカンプをもとにコーディングする
  • ②:サンプルサイトをもとに模写コーディングする

①:デザインカンプをもとにコーディングする

各練習課題には、「デザインカンプ」と「コーディングポイント」を用意しているので、その情報をもとにコーディングしていきます。

デザインカンプをもとにコーディングをする場合の学習の流れ

②:サンプルサイトをもとに模写コーディングする

サンプルサイトを確認しながら、同じサイトをコーディングしていきます。

サンプルサイトをもとに模写コーディングをする場合の学習の流れ

【HTML+CSS】コーディングの手順について

デザインカンプをもとにコーディングを行う場合や、サンプルサイトをもとに模写コーディングを行う場合のHTMLのコーディング手順について、下記の記事で詳しく解説しています。

初めてサンプルサイトのコーディングを行う方は、参考にしてみてください。
最後にコーディング例も紹介しています。

コーディング練習課題一覧

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

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

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

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

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