HTML・CSSを独学したいけれど、「何から始めればいい？」「スクールへ通わなくても身に付く？」と不安に感じていませんか。
HTML・CSSは、パソコンとブラウザがあれば独学できます。ただし、教材を見るだけではなく、コードを入力し、表示を確認し、小さなWebページを完成させることが大切です。
この記事では、2026年時点の学習環境を踏まえ、初心者が12週間で基礎から作品公開まで進む独学ロードマップを解説します。学習時間は1日30分〜2時間ほどを想定していますが、生活に合わせて期間を延ばしても問題ありません。
HTML・CSSは初心者でも独学できる
HTMLはWebページの内容と構造を作るマークアップ言語、CSSは色・余白・配置などを整えるスタイルシート言語です。書いたコードをブラウザですぐ確認できるため、変更と結果を結び付けながら学べます。
MDNのウェブ開発の学習には、未経験者向けの環境設定からHTML・CSSのコアモジュールまで、段階的な教材が用意されています。無料の一次情報を軸にできることも、独学しやすい理由です。
一方で、独学は順番を自分で決める必要があります。分からない項目をすべて調べ始めると進みにくいため、最初の目標を「レスポンシブな1ページを作って公開する」と具体的に決めましょう。
| 独学しやすい点 | つまずきやすい点 |
|---|---|
| ブラウザですぐ結果を確認できる | 学ぶ順番を決めにくい |
| 無料の公式教材が豊富にある | 教材を見るだけで満足しやすい |
| 小さなページから練習できる | エラーの原因を一人で探す場面がある |
| 自分の生活に合わせて進められる | 締め切りがなく継続しにくい |
HTML・CSSの役割や全体像がまだ曖昧な場合は、先に次の記事を確認してください。
独学を始める前に準備するもの
最初から多くのツールを入れる必要はありません。次の4つを準備すれば学習を始められます。
- パソコン
- コードエディタ
- 最新のWebブラウザ
- 学習用フォルダー
コードエディタは、コードの色分けや入力補助があるものを使うとミスに気付きやすくなります。MDNの2026年更新の環境設定でも、基本的なWeb開発にはコードエディタと最新ブラウザが必要だと案内されています。
最初のフォルダーには、index.htmlとstyle.cssを作ります。HTMLとCSSの具体的な書き方は次の記事で手順を確認できます。
HTML・CSS独学の12週間ロードマップ
12週間は目安です。1週間分を終えられないときは、次へ急がず同じ課題をもう一度作ってください。学習期間の短さより、何も見ずに小さなページを作れることが重要です。
最初の3週間：HTMLでページ構造を作る
最初は見た目を細かく整えず、文章や画像を正しい意味のHTML要素で組み立てます。
| 週 | 学ぶ内容 | 作るもの |
|---|---|---|
| 1週目 | HTML文書の基本構造、要素、タグ、属性 | 見出しと段落の自己紹介ページ |
| 2週目 | リンク、画像、リスト、相対パス | 画像とリンクを含むプロフィール |
| 3週目 | header、nav、main、section、footer | 意味のある構造を持つ1ページ |
見出しレベルは文章の階層に合わせます。見た目を大きくする目的でh1を増やさず、ページの主見出し、章、節という順番で使ってください。
画像には、画像が伝える内容をalt属性で設定します。装飾だけの画像は空のalt=""にするなど、HTMLを学ぶ段階からアクセシビリティも意識しましょう。
<main>
<article>
<h1>はじめてのWeb制作</h1>
<p>HTMLの意味を考えながらページを作ります。</p>
<img src="images/workspace.jpg" alt="ノートパソコンでWebページを制作している机">
</article>
</main>4〜6週目：CSSで見た目を整える
HTMLの基本構造を作れるようになったら、外部CSSを読み込み、色・文字・余白・枠線を変更します。
| 週 | 学ぶ内容 | 確認すること |
|---|---|---|
| 4週目 | セレクター、プロパティ、値、クラス | 狙った要素だけを変更できる |
| 5週目 | 色、フォント、行間、背景、境界線 | 文章が読みやすい配色と行間になっている |
| 6週目 | ボックスモデル、margin、padding、幅 | 余白の内側と外側を説明できる |
CSSを写したら、値を1つずつ変更します。たとえばpaddingを16pxから32pxに変え、どの余白が広がるかをブラウザで確認してください。
.card {
width: min(100%, 640px);
margin-inline: auto;
padding: 32px;
border: 1px solid #cbd5e1;
border-radius: 16px;
background: #ffffff;
}CSSはプロパティを暗記するより、「文字」「ボックス」「レイアウト」のどこを変更したいかを整理し、公式リファレンスで調べる習慣を付ける方が実践的です。
7〜9週目：レイアウトとレスポンシブ対応を学ぶ
次にFlexboxとGridを使い、横並びやカード一覧を作ります。positionで無理に配置する前に、1方向の並びはFlexbox、行と列を扱う一覧はGridを検討してください。
| 週 | 学ぶ内容 | 作るもの |
|---|---|---|
| 7週目 | Flexbox、配置、折り返し | ナビゲーションと横並びカード |
| 8週目 | Grid、可変幅、gap | 画面幅で列数が変わる一覧 |
| 9週目 | メディアクエリ、相対単位、画像の可変表示 | スマートフォンでも読めるページ |
.card-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
gap: 24px;
}
img {
max-width: 100%;
height: auto;
}ブラウザの幅を狭くし、横スクロール、文字のはみ出し、押しにくいリンクがないか確認します。見た目だけでなく、Tabキーでリンクやボタンへ移動でき、フォーカス位置が見えることもチェックしてください。
10〜12週目：1つの作品を完成させて公開する
最後の3週間は、新しい知識を増やすより、企画から公開までを一度通します。模写だけで終わらず、自分で文章と構成を考えたページを作りましょう。
| 週 | 作業 | 完成条件 |
|---|---|---|
| 10週目 | 目的、読者、掲載内容を決め、紙に構成を描く | 必要な見出しと素材が決まっている |
| 11週目 | HTMLとCSSで実装し、複数の画面幅で確認する | パソコンとスマートフォンで読める |
| 12週目 | 誤字、リンク、代替テキスト、キーボード操作を確認して公開する | URLを他の人へ共有できる |
最初の作品は、自己紹介、架空のカフェ、イベント案内、好きな本の紹介など、1ページで完結する題材が向いています。高度なアニメーションより、正しい構造と読みやすいレイアウトを優先してください。
独学を定着させる5段階の練習方法
教材を読む時間と同じくらい、コードを触る時間を確保します。次の5段階を小さく繰り返すと、知識を使える形に変えやすくなります。
- 教材で1つの構文を学ぶ
- サンプルを自分で入力する
- 値や内容を変更する
- ブラウザで結果を確認する
- 学んだことと失敗したことを短く記録する
コピー＆ペーストだけでは、括弧やセミコロンの役割に気付きにくくなります。最初の1回は自分で入力し、2回目は見本を閉じて同じ部品を作ってみてください。
練習問題を探している場合は、次の記事を利用できます。
独学教材の選び方
教材は1種類に絞る必要はありません。ただし、複数の入門教材を同時に最初から進めると、同じ説明を繰り返すだけになりやすいため、主教材を1つ決め、分からない箇所だけ別の資料で補います。
| 教材 | 向いている人 | 注意点 |
|---|---|---|
| 公式ドキュメント | 正確な仕様と現在の推奨方法を調べたい人 | 最初からすべて読まず、必要な項目を選ぶ |
| 対話型教材 | 画面の指示に沿って手を動かしたい人 | 教材内だけで終わらずローカルでも作る |
| 書籍 | 順序立てた説明を自分のペースで読みたい人 | 発行年と対応する仕様・画面を確認する |
| 動画 | 操作画面を見ながら進めたい人 | 視聴だけにせず同時にコードを書く |
2026年時点では、MDN Curriculumが新人フロントエンド開発者に必要なスキルを初心者向け・自分のペース・無料という形で整理しています。HTML、CSS、アクセシビリティ、レスポンシブデザインの抜け漏れを確認する目次として使えます。
独学でつまずいたときの解決手順
表示が想定どおりにならないときは、すぐにコード全体を書き直さず、原因を小さく切り分けます。
- ファイルを保存したか確認する
- ブラウザを再読み込みする
- エディタのエラー表示を見る
- HTMLの終了タグとCSSの波括弧を確認する
- CSSファイルのパスとクラス名を確認する
- 直前の変更を1つ戻して結果を見る
- エラーメッセージやプロパティ名を公式ドキュメントで調べる
質問するときは「目標の表示」「現在の表示」「関連するHTMLとCSS」「試したこと」をまとめます。画面全体のスクリーンショットだけでなく、再現に必要な短いコードを添えると原因を見つけやすくなります。
独学を続けるための工夫
毎日の最低ラインを小さくする
「毎日2時間」と決めるより、「エディタを開いて10分だけコードを書く」を最低ラインにすると、忙しい日も継続しやすくなります。時間がある日はそのまま続ければ十分です。
学習記録を残す
日付、触ったコード、分かったこと、次に試すことを3行ほど残します。「今日は進まなかった」と感じる日でも、解決したエラーを記録すると成長を確認できます。
完成前でも定期的に見せる
SNSや学習コミュニティを使う場合は、完成品だけでなく「今日はカードの横並びを作った」のように作業単位で共有します。ただし、反応を集めることより、コードを改善することを目的にしてください。
暗記より調べて使う練習をする
HTML要素やCSSプロパティをすべて暗記する必要はありません。頻繁に使う構文は制作中に自然と覚えます。調べたコードを貼るだけで終わらず、各行が何を変えるのか説明してから使いましょう。
独学中に避けたい進め方
- 複数の入門教材を最初から同時に進める
- 動画を見ただけで理解したと判断する
- コードを変更せず、そのまま写して終える
- HTML・CSSの基礎が曖昧なままフレームワークへ進む
- デザインを完全に再現できるまで公開しない
- エラーが出るたびにコード全体を作り直す
教材を終えることは中間目標です。最終的には、見本がない状態で構成を考え、必要な要素やプロパティを調べながらページを完成させることを目指します。
HTML・CSSの独学に関するよくある質問
HTML・CSSの独学には何か月かかりますか？
1日30分〜2時間ほど学習する場合、基礎から1ページの公開まで2〜4か月が一つの目安です。学習時間や目標によって変わるため、期間だけで判断せず、自力で作れる範囲を確認してください。
スマートフォンだけでも独学できますか？
教材の閲覧や短いコードの確認はできますが、複数ファイルの管理、ブラウザ開発者ツール、画面幅の検証まで行うにはパソコンが適しています。実際の制作を目標にするならパソコンを用意してください。
数学が苦手でも学べますか？
HTML・CSSの基礎では高度な数学は必要ありません。幅、割合、余白などの基本的な数値を扱いますが、ブラウザで結果を見ながら調整できます。
独学後はJavaScriptへ進むべきですか？
HTMLで意味のある構造を作り、CSSでレスポンシブなページを完成できたら、JavaScriptへ進むとよいでしょう。ただし、HTML・CSSを完璧に暗記してから進む必要はありません。制作しながら戻って調べてください。
HTML・CSSの独学は小さな完成を積み重ねよう
HTML・CSSは独学できます。環境を整え、HTMLの構造、CSSの見た目、レスポンシブなレイアウト、作品公開の順に進めると、学ぶ内容を整理しやすくなります。
教材を読むだけで終わらせず、入力、変更、確認、記録を繰り返してください。12週間で終わらなくても問題ありません。自分で作ったページが1つ完成すれば、次に調べるべき内容が具体的に見えてきます。