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

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

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

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

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

サンプルサイトの練習方法は、下記の2つからお選びいたただけます。

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

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

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

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

【HTML＋CSS】コーディングしてみよう！

それではさっそくコーディング練習を開始してみましょう！

はじめての方は、まずは入門編の練習課題からスタートするのがおすすめです。

入門編のサイトを何個か作ってみて慣れてきたら初級編、中級編と難易度をあげていってみてください。

そうすることで、挫折することなく楽しみながらコーディング練習を継続することができます。

一番最初に取り組む入門編のおすすめサイトは下記です。

【HTML/CSS コーディング練習】入門編：プロフィールサイト／LP

こちらのコーディング練習課題には、実際のコーディングの流れにしたがって解説している記事（「【前編】レイアウト構成の解説」と「【後編】コーディングの解説」）がありますので、模写やデザインカンプからのコーディングで手が止まってしまった場合は参考にしてみてください。

▼コーディング解説【前編】レイアウト構成の組み立て方を解説

▼コーディング解説【後編】コーディングのやり方を解説

以上となります。
それではコーディング練習頑張ってください！