HTML・CSSの基本を学んだのに、「見本がないと書けない」「次に何を作ればよいか分からない」と止まっていませんか。知識を制作力へ変えるには、教材を読み続けるだけでなく、小さなページを自分で完成させる練習が必要です。
最初から難しいサイトを模写する必要はありません。1つ学び、見本を入力し、次は見ずに作り、完成画面と比較して直す。この短いサイクルを繰り返すほうが、初心者はつまずいた場所を把握しやすくなります。
この記事では、2026年8月6日時点で利用できるHTML・CSS練習サイト、無料課題、教材の選び方、30日間の進め方、実際に作れるプロフィールカード課題まで紹介します。
HTML・CSSの練習は5段階で繰り返す
練習の基本は「学ぶ→入力する→見ずに作る→比較して直す→公開して確認する」の5段階です。1つの段階を完璧にしてから進むのではなく、20〜60分で終わる小さな範囲を一周させます。
| 段階 | 行うこと | 完了の目安 |
|---|---|---|
| 学ぶ | タグやCSSプロパティを1テーマだけ確認する | 役割を自分の言葉で1文にできる |
| 入力する | 見本を省略せず、自分のエディターで入力する | ブラウザに同じ結果が表示される |
| 見ずに作る | 見本を閉じ、同じ部品を作り直す | 調べながらでも最後まで完成する |
| 比較して直す | HTML構造、余白、幅、色、画面幅を確認する | 違いの原因を1つ以上説明できる |
| 公開する | 別の端末やURLでも表示を確認する | リンク・画像・スマホ表示が動く |
完成しなかった課題にも価値があります。「画像パスで30分迷った」「Flexboxの親要素を間違えた」のように原因を記録すると、次の練習で同じ場所を早く見つけられます。
練習を始める前に用意するもの
- パソコン
- Chrome、Firefox、Safari、Edgeなどのブラウザ
- Visual Studio Codeなどのコードエディター
- 練習用フォルダー
- 作業内容を記録するメモ
スマートフォンでも教材の閲覧はできますが、ファイル管理、開発者ツール、複数画面幅の確認まで行うならパソコンが適しています。まずデスクトップにhtml-css-practiceフォルダーを作り、その中へ練習ごとのフォルダーを分けてください。
html-css-practice/
├── 01-profile-card/
│ ├── index.html
│ ├── style.css
│ └── images/
├── 02-news-list/
└── 03-landing-page/エディターの準備やHTMLファイルの開き方から確認したい場合は、次の記事で初期設定とブラウザ表示の手順を説明しています。
HTML・CSSを練習できるサイトと教材
教材は「知識を説明してくれるもの」と「自分で完成させる課題」を組み合わせます。動画を何本も見る、同じ入門コースを何周もするだけでは、自力で構造を考える時間が不足しやすいからです。
| 教材 | 向いている人 | 主な練習 | 利用の目安 |
|---|---|---|---|
| MDN | 正確な基礎と仕様を確認したい人 | 解説、確認テスト、チャレンジ | 無料 |
| Progate | 環境構築前に手を動かしたい人 | ブラウザ上の演習、道場レッスン | 無料範囲・有料プランあり |
| ドットインストール | 短い動画で制作の流れを見たい人 | 動画、ミニクイズ、ブラウザ実行 | 無料範囲・有料プランあり |
| Codejump | 基礎後に模写へ進みたい人 | 難易度別のコーディング課題 | 無料課題あり |
| 書籍 | 順番に読み、手元へ残したい人 | 章ごとのサンプル制作 | 購入費用が必要 |
プラン、価格、無料で使える範囲は変更されることがあります。有料登録前には各サービスの公式ページで最新条件を確認してください。
MDNウェブ開発の学習
MDNウェブ開発の学習は、HTMLによる構造化、CSSの基本、レイアウト、アクセシビリティまで段階的に確認できる無料教材です。単元ごとの確認テストと、複数の知識を組み合わせるチャレンジも用意されています。
説明量が多いため、最初から全部を暗記しようとしないでください。今練習しているテーマだけ読み、Playgroundまたは自分のエディターでコードを変える使い方が向いています。
Progate
ProgateのHTML & CSS入門は、環境構築をせずにブラウザ上でコードを入力できます。2026年8月の公式ページでは、初級・中級・上級、Flexbox、仕様書から作る道場レッスンなどが案内されています。
初めてタグやCSSを書く人には始めやすい教材です。一方、入力補助のある画面だけに慣れると、空のファイルから作るときに止まりやすくなります。初級を終えたら、自分のフォルダーでも同じページを作り直してください。
ドットインストール
ドットインストールの「はじめてのWeb制作」では、短い動画を見ながらプロフィールサイトを作れます。HTMLの見出し・段落・画像から、CSSの枠線、余白、中央揃え、背景画像まで一連の流れを確認できます。
古い「はじめてのHTML」には旧版表示と最新版への案内が出ています。検索結果から旧版を開いた場合は、ページ内の新しいレッスンへ移動してください。
Codejump
CodejumpのHTML・CSS練習課題には、プロフィール、フォト、レシピ、ポートフォリオ、ストア、ブログなど難易度別の課題があります。完成デモと素材を見ながら、HTML構造とレスポンシブなレイアウトを考える練習に向いています。
最初は入門編の1カラムから始めてください。デモと1px単位で同じにすることより、意味のあるHTML、幅に応じて崩れないCSS、キーボードで使えるリンクやボタンを優先します。
WP-LOADの無料コーディング教材
基礎知識を実際の制作手順へつなげたい人向けに、当サイトでもHTML・CSSのコーディング教材を公開しています。同じドメイン内の記事なので、以下からそのまま進められます。
HTML・CSSの書籍
書籍は、学習順が決まっていて画面を切り替えずに読み返せる点が便利です。購入前に、サンプルデータの配布、レスポンシブ対応、Flexbox・Grid、出版年や版を確認してください。
初心者向け書籍の選び方と学び方は、次の記事でも解説しています。
初心者向け30日練習ロードマップ
1日30〜60分を目安にした30日間の例です。毎日できなくても問題ありません。日付ではなく、完成した課題を基準に次へ進みます。
最初の1週間：HTMLとCSSの基本を小さく試す
- 見出し、段落、リスト、リンクを使った自己紹介を書く
- 画像と代替テキストを追加する
- HTMLへ外部CSSを読み込む
- 文字色、背景色、文字サイズを変える
- marginとpaddingの違いを確認する
- borderとborder-radiusでカードを作る
- 見本を閉じて自己紹介ページを作り直す
この週は見た目の完成度より、HTMLファイルを保存し、ブラウザを更新し、間違いを自分で探す流れを覚えます。
2週目：よく使う部品を作る
- ナビゲーション
- 画像付きカード
- ニュース一覧
- ボタンとホバー・フォーカス状態
- お問い合わせフォーム
- Flexboxによる横並び
- Gridによるカード一覧
各部品を別ページへ作り、幅を狭めても横スクロールしないか確認します。完成したら、色、画像、文章、列数を変えてもう1パターン作ってください。
3週目：1ページをレスポンシブで完成させる
ヘッダー、メインビジュアル、紹介、カード一覧、問い合わせ、フッターを持つ1ページを作ります。最初にHTMLの見出し構造を決め、その後でCSSを追加してください。
- 画像に適切な
altを設定する - リンクとボタンをキーボードで操作する
- 文字色と背景色のコントラストを確認する
- 320px程度の狭い幅でも内容が欠けないか確認する
- 画像へ
max-width: 100%を設定する - 見出し順が
h1から不自然に飛んでいないか確認する
4週目：見ずに作り、公開して振り返る
3週目と似た構成を、見本を閉じて別テーマで作ります。思い出せない部分は調べて構いませんが、完成コードを丸ごと貼り付けず、「画像を中央にする」「カードを2列にする」のように小さな疑問へ分けます。
完成後は公開URLで確認し、READMEやメモへ「できたこと」「調べたこと」「次に直すこと」を3つずつ記録します。練習の成果は、学習時間より完成物と説明できる内容で判断してください。
練習課題：プロフィールカードを作る
ここからは、画像、見出し、文章、リンクを1枚にまとめたプロフィールカードを作ります。最初にHTMLだけを表示し、次にCSSで余白・色・角丸・幅を整えます。
HTMLで内容と構造を作る
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>プロフィールカード</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<article class="profile-card">
<img
class="profile-card__image"
src="images/mountain-lake.jpg"
alt="山に囲まれた湖と青空"
width="1200"
height="800"
>
<div class="profile-card__body">
<h1>休日の風景を紹介します</h1>
<p>散歩で見つけた景色を、写真と短い文章で記録しています。</p>
<a class="profile-card__link" href="#gallery">写真を見る</a>
</div>
</article>
</main>
</body>
</html>画像ファイルはimagesフォルダーへ置き、実際の内容が分かる代替テキストを書きます。articleはカード全体、内側のdivは文章とリンクをまとめる役割です。
CSSで見た目を整える
* {
box-sizing: border-box;
}
body {
margin: 0;
color: #172033;
background: #f3f6fb;
font-family: system-ui, sans-serif;
line-height: 1.7;
}
main {
min-height: 100vh;
display: grid;
place-items: center;
padding: 2rem 1rem;
}
.profile-card {
width: min(100%, 36rem);
overflow: hidden;
background: #ffffff;
border: 1px solid #d8e0ee;
border-radius: 1rem;
box-shadow: 0 1rem 2.5rem rgb(31 46 76 / 12%);
}
.profile-card__image {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
}
.profile-card__body {
padding: clamp(1.25rem, 4vw, 2rem);
}
.profile-card h1 {
margin: 0 0 0.75rem;
font-size: clamp(1.5rem, 5vw, 2rem);
line-height: 1.35;
}
.profile-card p {
margin: 0 0 1.5rem;
}
.profile-card__link {
display: inline-block;
padding: 0.75rem 1.25rem;
color: #ffffff;
background: #c2412d;
border-radius: 0.5rem;
font-weight: 700;
text-decoration: none;
}
.profile-card__link:hover {
background: #9f2f20;
}
.profile-card__link:focus-visible {
outline: 3px solid #1d4ed8;
outline-offset: 3px;
}width: min(100%, 36rem)により、広い画面ではカードを36remまで、狭い画面では利用できる幅まで縮めます。paddingとclamp()も画面幅に応じて変わるため、特別なメディアクエリがなくても基本のカードは収まります。
変更してもう1周練習する
- 画像と文章を自分の内容へ変更する
- 背景色とボタン色を読みやすい組み合わせへ変える
- カードへ日付やカテゴリーを追加する
- 同じカードを3枚並べる
- 広い画面では3列、狭い画面では1列へ切り替える
元コードをコピーしただけで終えず、何も見ずにもう一度作ってください。途中で調べたプロパティは、用途と一緒にメモします。
模写コーディングの正しい進め方
- 完成デザインをヘッダー、メイン、各セクション、フッターに分ける
- 見出し、文章、画像、リンクの意味を考えてHTMLを書く
- 大きな幅と配置からCSSを付ける
- 文字、色、余白、枠線の順に細部を整える
- スマートフォン幅を確認する
- 完成コードと比較し、違いの理由を調べる
公開中サイトの画像や文章をそのまま自分の作品として再公開しないでください。教材が配布する素材と利用条件を確認し、練習成果を掲載するときは、自分で用意した素材へ差し替えるか、教材側の掲載ルールに従います。
完成画面だけでなく、HTMLの意味、レスポンシブ対応、キーボード操作、画像の代替テキストも確認します。見た目が同じでも、リンクをdivのクリック処理だけで作るなど、利用しにくい実装は改善してください。
AIは答えではなくヒントに使う
AIへ完成ページを丸ごと作らせると、表示はできても自分で修正できない状態になりやすくなります。練習中は、まず自分でエラー箇所を絞ってから質問してください。
- 「答えを出さず、確認する順番を3つ教えてください」
- 「このCSSが効かない理由の候補を説明してください」
- 「このHTMLの見出し構造だけレビューしてください」
- 「キーボード操作とコントラストの問題を指摘してください」
提案されたコードは、そのまま信じずブラウザで動作を確かめます。分からない行は削除して変化を見たり、MDNなどのリファレンスで仕様を確認したりして、自分で説明できる状態にしてください。
練習記録で成長を確認する
| 記録する内容 | 例 |
|---|---|
| 作ったもの | プロフィールカード、ニュース一覧 |
| 使った技術 | Flexbox、Grid、メディアクエリ |
| つまずいた原因 | 画像パス、詳細度、親要素の幅 |
| 確認した画面幅 | 375px、768px、1280px |
| 次に直すこと | フォーカス表示、余白、見出し順 |
毎日続けた日数だけを成果にすると、体調や予定で途切れたときに再開しにくくなります。「カードを3種類作った」「見ずに1ページ完成した」のように、できるようになったことを記録しましょう。
独学全体の順番や学習期間を整理したい場合は、次の記事にロードマップをまとめています。
よくある質問
HTML・CSSは1日何時間練習すればよいですか？
初心者は1日30〜60分でも進められます。長時間見るだけより、短い時間でもコードを保存し、ブラウザで確認し、小さな課題を完成させることが重要です。
タグやプロパティを暗記する必要はありますか？
すべてを暗記する必要はありません。よく使うものは制作中に自然と覚えます。名前を忘れても、目的から検索し、リファレンスで正しい使い方を確認できれば問題ありません。
模写はいつから始めればよいですか？
見出し、段落、画像、リンクを書けて、CSSで色、余白、幅、Flexboxの基本を使えるようになったら、シンプルな1カラム課題から始められます。分からない箇所を調べることも練習の一部です。
無料教材だけでも習得できますか？
HTML・CSSの基礎と小規模なサイト制作は、無料教材でも学べます。有料教材は、順序、質問機能、レビュー、課題素材などへ価値を感じる場合に検討してください。
案件へ応募できる目安は何ですか？
見本なしで複数ページを作り、デザインカンプからレスポンシブ対応し、フォームやリンクを含めて表示確認できることが1つの目安です。いきなり本番案件で学ぶのではなく、仮想案件で納期・仕様・確認項目を経験してから進んでください。
小さな完成を繰り返してHTML・CSSを身につけよう
HTML・CSSの練習では、教材を1つ選び、20〜60分で終わる課題を作り、見本を閉じて再現し、違いを直す流れを繰り返します。基礎学習が終わったら、部品制作、1ページ、複数ページへ少しずつ範囲を広げてください。
今日の練習は、プロフィールカードのHTMLだけでも構いません。保存してブラウザへ表示し、次はCSSで1つ見た目を変える。その小さな完成が、自分でWebページを作れる力につながります。