HTMLとCSSを勉強したいものの、「教材が多くて選べない」「動画を見ても自分でコードを書けない」と悩んでいませんか。学習方法を増やしすぎると、Webページを完成させる前に教材を探すことが目的になってしまいます。
初心者におすすめの勉強方法は、小さく学ぶ→自分で入力する→値を変える→ブラウザで確認する→結果を説明するという流れの反復です。HTMLとCSSを別々に暗記せず、1つのページで交互に使います。
この記事では、HTML・CSSを勉強する順番、4週間の学習例、毎日の進め方、教材の選び方、手を動かす練習方法を初心者向けに解説します。
HTML・CSSは学習と実践を短く繰り返して勉強する
教材のサンプルを表示できたところで終わらず、色、文章、余白、要素の順番を1つ変えてください。「どのコードを変えたら、どこが変わったか」を言葉にすると、コピーしただけの状態から理解へ進めます。
- タグやプロパティを1つ学ぶ
- サンプルコードを自分で入力する
- 文章やCSSの値を1つ変更する
- 保存してブラウザを再読み込みする
- 変わった箇所と理由を学習記録へ残す
HTML・CSSの全体像や公開までの学習順序を先に確認したい場合は、次の記事を読んでから学習計画を作ると迷いにくくなります。
勉強を始める前に目標と環境を決める
最初に作る1ページを決める
「HTMLとCSSを覚える」では、学習の終わりを判断しにくくなります。最初の目標を「自己紹介ページをパソコンとスマートフォンで表示する」のように、完成画面で確認できる形へ変えてください。
- 見出し、文章、画像、リンクを表示する
- CSSで文字色、背景色、余白を変える
- 複数の項目をFlexboxまたはGridで配置する
- スマートフォンでは1列で表示する
- 画像の代替テキストやリンクの文言を確認する
最初から大規模なサイトを目標にすると、デザイン、文章、画像選び、サーバーなど、HTML・CSS以外の作業が増えます。1ページを完成させてから、ページ数や機能を増やしましょう。
エディタとブラウザを用意する
パソコンへコード向けのテキストエディタを用意し、作業用フォルダーの中へindex.htmlとstyle.cssを作ります。表示確認には普段使っているWebブラウザを利用できます。
エディタの入力補助やコードの色分けを使うと、タグの閉じ忘れやスペルミスに気付きやすくなります。選び方と基本操作は次の記事で確認してください。
HTML・CSSを勉強する4週間の進め方
次の計画は、週ごとに学ぶ内容を整理するための一例です。使える時間や経験によって進み方は変わるため、1週間で終わらない場合は日程を延ばしてください。
HTMLで文章の構造を作る
最初はHTML文書の基本構造と、見出し、段落、リンク、画像、リストを学びます。見た目を整える前に、内容の意味に合うタグでページを組み立てます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学習記録</title>
</head>
<body>
<main>
<h1>HTML・CSSの学習記録</h1>
<p>作ったページと学んだことを紹介します。</p>
</main>
</body>
</html>コードを入力したら保存し、ブラウザで開きます。見出しと文章が表示されたら、文章を書き換えたりリストを追加したりして変化を確認してください。
CSSで色・文字・余白を整える
HTMLの内容を表示できたら、外部CSSファイルを読み込みます。セレクター、プロパティ、値というCSSの基本構文を学び、色と余白を1つずつ追加します。
<link rel="stylesheet" href="style.css">body {
margin: 0;
color: #1f2937;
background-color: #f0fdf4;
font-family: sans-serif;
}
main {
width: min(100% - 32px, 720px);
margin: 40px auto;
padding: 32px;
background-color: #ffffff;
}まず変更前の表示を確認し、次にCSSを追加して再読み込みします。背景色を別の値へ変え、どの指定がページ全体とmain要素へ反映されているかを見比べましょう。
Flexbox・Gridとレスポンシブ対応を試す
ボックスモデルと余白を扱えるようになったら、複数の要素を並べます。FlexboxまたはGridのどちらかから始め、パソコンでは複数列、スマートフォンでは1列へ変更します。
.cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
@media (max-width: 640px) {
.cards {
grid-template-columns: 1fr;
}
}ブラウザの幅を狭め、カードが1列へ変わることを確認します。文字や画像がはみ出す場合は、固定幅を使っている箇所や画像の幅を調べてください。
1ページを完成させて振り返る
最後に、自己紹介、店舗案内、好きなものの紹介など、内容を考えやすいテーマで1ページを完成させます。教材の文章と画像をそのまま使わず、自分の内容へ置き換えてください。
- ページの目的が見出しから分かるか
- 見出しの階層が途中で飛んでいないか
- 画像に内容を伝える代替テキストがあるか
- リンクの文言から移動先を判断できるか
- キーボード操作時のフォーカスが見えるか
- パソコンとスマートフォンで読めるか
制作テーマが決まらない場合は、次の記事の練習課題を利用できます。
毎日の勉強時間を決める方法
長時間の学習日をたまに作るより、次に何をするか決めた短い学習を続ける方が再開しやすくなります。1回60分を使える場合は、次のように分けられます。
| 目安 | 行うこと |
|---|---|
| 10分 | 前回のコードを開き、表示と学習記録を確認する |
| 15分 | タグやプロパティを1つ学ぶ |
| 25分 | 自分で入力し、文章や値を変えて表示する |
| 10分 | 分かったこと、詰まった点、次回の作業を記録する |
60分を確保できない日は、前回のコードを開いて1か所だけ変更しても構いません。学習を終える前に「次は画像を追加する」のように具体的な作業を1つ残すと、次回すぐに始められます。
HTML・CSS教材の選び方
教材は、メインで進めるものを1つ選び、分からない箇所を公式資料で調べる形にします。同じ入門範囲を複数の教材で繰り返すだけでは、制作へ進みにくくなります。
| 教材 | 向いている学び方 | 注意点 |
|---|---|---|
| ブラウザ上の学習サービス | 環境を用意する前にコードを試したい | 終わったらローカルファイルでも再現する |
| 入門書 | 1冊の順番に沿って体系的に学びたい | 出版年とサンプルの対応環境を確認する |
| 動画 | エディタやブラウザの操作を見たい | 視聴だけで終わらず同時に入力する |
| 公式ドキュメント | 要素やプロパティの正確な意味を調べたい | 最初から全ページを読む必要はない |
無料で体系的に学べる資料として、MDNのウェブ開発の学習には初心者向けの入門モジュールと練習課題があります。HTMLとCSSの個別機能を調べる辞書としても利用できます。
web.devにもLearn HTMLとLearn CSSがあります。英語の資料を使う場合は、ブラウザの翻訳機能を利用しながらサンプルを自分のファイルで試してください。
コードを写した後に必ず変更する
写経は、タグや波括弧の入力に慣れるために役立ちます。ただし、表示できただけでは、各コードの役割を理解したか判断できません。
変更前の状態を確認する
<a href="about.html">プロフィールを見る</a>この状態では、ブラウザ標準のリンクとして表示されます。先に画面を確認し、スクリーンショットやメモで変更前を残してください。
クラスとCSSを追加する
<a class="button" href="about.html">プロフィールを見る</a>.button {
display: inline-block;
padding: 12px 20px;
color: #ffffff;
background-color: #166534;
border-radius: 8px;
text-decoration: none;
}
.button:focus-visible {
outline: 3px solid #facc15;
outline-offset: 3px;
}追加後はリンクがボタンのように表示され、キーボードで選択したときはフォーカスの枠が見えます。背景色や余白を変え、どのプロパティがどこへ影響するかを確認してください。
模写とオリジナル制作を使い分ける
既存サイトのレイアウトを観察して再現する模写は、余白や配置の練習になります。最初はヘッダーだけ、カードだけのように範囲を区切り、完成画面からHTML構造とCSSを考えます。
他者の文章、画像、ロゴ、コードを許可なくコピーして公開してはいけません。模写は学習用のローカル環境で行い、実績として公開する場合は利用条件を確認します。
模写で配置を練習したら、自己紹介や店舗案内など、自分で文章と構成を考えたページを作ります。デザインを一から考えるのが難しい場合は、紙へ大まかな配置を描いてからHTMLを組み立ててください。
表示されないときの調べ方
コードが反映されないときは、複数の変更を一度に加えず、最後に編集した箇所から確認します。
- ファイルを保存したか確認する
- ブラウザを再読み込みする
- HTMLとCSSのファイル名・保存場所を確認する
- タグ、引用符、波括弧、セミコロンの抜けを探す
- ブラウザの開発者ツールで適用中のCSSを確認する
- 直前の変更を一度戻し、原因を1つに絞る
エラーメッセージや現象を検索するときは、「CSS 効かない」だけでなく、対象のプロパティ、想定した表示、実際の表示を含めます。解決後は原因と直したコードを残すと、同じ問題へ対応しやすくなります。
HTML・CSSの次に学ぶ内容
HTMLとCSSで1ページを完成させ、レスポンシブ表示まで確認できたら、目的に合わせて次の技術へ進みます。
- Git・GitHub：変更履歴と制作物を管理する
- JavaScript：クリックや入力に応じて表示を変える
- WordPress：管理画面から更新できるサイトを作る
- アクセシビリティ：多様な操作・閲覧環境へ対応する
- Webパフォーマンス：画像やコードを見直して表示を速くする
以前はHTML・CSSの直後にjQueryから学ぶ教材も多くありましたが、現在はまずJavaScriptの基本構文とDOM操作を理解し、必要な案件や既存コードに応じてjQueryを学ぶ順番が分かりやすいでしょう。
HTML・CSSの勉強方法によくある疑問
HTMLを全部覚えてからCSSへ進みますか？
すべてのHTML要素を覚える必要はありません。基本構造とよく使うタグで内容を作ったら、そのページへCSSを追加します。制作しながら必要な要素やプロパティを調べてください。
本と動画はどちらがよいですか？
文章を読みながら自分の速度で進めたい場合は本、画面操作を見たい場合は動画が向いています。形式よりも、サンプルを自分で入力し、変更して確認する時間を取れる教材を選びましょう。
毎日勉強しないと身に付きませんか？
毎日できなくても学習は進められます。再開時に迷わないよう、作業ファイル、分かったこと、次に行う作業を記録してください。無理な計画より、継続できる回数と時間を決めることが大切です。
どこまでできれば基礎を学んだと判断できますか？
期間ではなく、自分で1ページを完成できるかで確認します。見出し、文章、画像、リンクをHTMLで組み、CSSで色・余白・配置を整え、スマートフォンでも読める状態にできれば、次の制作へ進む目安になります。
まとめ
HTML・CSSの勉強では、教材を読むだけでなく、学んだ直後にコードを入力し、値を変えてブラウザで確認します。HTMLの構造、CSSの装飾、レイアウトとレスポンシブ対応の順に進め、最後に1ページを完成させてください。
教材はメインを1つに絞り、分からない機能を公式資料で調べます。学習記録へ「変えたコード」「表示の変化」「次に行うこと」を残し、小さな実践を継続しましょう。