プログラミング独学ロードマップ【HTML/CSS/レスポンシブ編】2026年版。無料と有料の教材、検証ツール、AIの使い方まで

PR｜この記事にはアフィリエイト広告（A8.net）が含まれます。

Web制作を独学で始めようとして、「HTMLとCSSはどの教材で覚えればいいのか」「無料で試せる範囲はどこまでか」「AIにコードを書かせてしまっていいのか」で止まってしまう人は多いと思います。教材の数が2020年よりずっと増えたぶん、最初の一歩を選ぶのが難しくなりました。

この記事は、最終的にWordPressでサイトを作ることを目標にした独学ロードマップの第1回です。エディタを入れる、学習のコツを決める、AIを先生役にする、検証ツールを使えるようにする、HTML/CSSの基礎を通す、レスポンシブまで進む。この6つを順番に進めると、パソコンとスマートフォンの両方で崩れないページを自分で書けるところまで来られます。

この記事は2020年1月に公開したロードマップを、2026年9月22日に全面的に書き直したものです。教材の料金と無料の範囲、リンク先の有無は公式ページを開いて確かめました。情報確認日：2026年9月22日。筆者はWeb制作の仕事をしながら個人でもWordPressでサイトを作っていて、ここに書く順番は自分が実際に通った順番です。

まず全体像：6つのステップで何ができるようになる？

1. テキストエディタを入れる（Visual Studio Code）
2. 学習のコツを先に決める（手を動かす・暗記しない・基礎を周回しない）
3. AIを「先生役」として使う準備をする
4. 検証ツール（Chrome DevTools）を使えるようにする
5. HTMLとCSSの基礎を教材で通す
6. レスポンシブとFlexbox・CSS Gridまで進む（この回のゴール）

2020年版と骨格は変えていません。変えたのは、3番のAIの使い方を足したこと、教材の料金と無料の範囲を2026年9月の内容に直したこと、レイアウトの説明にCSS Gridを加えたことです。1から順に進めてください。5番と6番だけを先にやると、書いたコードが思ったとおりに表示されない理由を自分で調べられず、手が止まります。

1. テキストエディタを入れる【Visual Studio Code】

コードを書くソフトを「テキストエディタ」といいます。種類はいくつもありますが、最初はMicrosoftのVisual Studio Code（VS Code）を選んで問題ありません。公式サイトの説明では無料・オープンソースのコードエディタで、Windows・macOS・Linux向けの配布があります（2026年9月22日に公式サイトで確認）。

初心者がVS Codeを選ぶ理由は、次の4つがそろっているからです。

• 動作が軽い。古めのパソコンでも書きながら待たされにくいです。
• タグやプロパティの候補が出る（自動補完）。綴りの打ち間違いが減ります。
• HTML・CSS以外の言語でもそのまま使えるので、あとでPHPやJavaScriptに進んでも入れ替えが不要です。
• コードが役割ごとに色分けされるので、閉じタグの抜けに気づきやすいです。

入れた直後に覚えると効くのがEmmetという入力補助です。VS Codeに最初から入っていて、次のように書いてTabキーを押すと、リストの骨組みが一度に出てきます。

ul>li*3

拡張機能は最初から入れ込まないでください。何が標準の動きで何が拡張機能の動きなのか分からなくなります。困ったことが出てきてから、その困りごとを解決する拡張機能を1つずつ足すほうが迷いません。

2. 学習のコツを先に決める【ここで挫折が減る】

教材に入る前に、進め方を3つ決めてしまいます。これは2020年版から変えていません。6年たっても、独学が止まる理由はほとんど同じところにあります。

暗記しなくてよい代わりに、「なぜこのコードでこう表示されるのか」は毎回いちど言葉にしてください。理由を飛ばして進むと、教材を離れた瞬間に手が止まります。逆にいえば、理由を説明できる状態になっていれば、プロパティ名を忘れても調べ直せます。

この心構えについては、デイトラの動画が短くまとまっています。教材を選ぶ前に見ておくと、「何を勉強しないか」を決めやすくなります。

3. AIを「先生役」にする【2026年に足したステップ】

2020年にこの記事を書いたときは、詰まったら検索するしかありませんでした。今はChatGPTやClaudeに質問できます。ただし、AIに「このページを作って」と頼んで出てきたコードを貼るだけの進め方をすると、教材を終えても自分では1行も書けません。使うのは、コードを書かせる道具としてではなく、分からないところを聞く相手としてです。

順番を守る：自分で書く → 詰まったら聞く → 自分で直す

1. 教材のとおりに、まず自分でコードを書きます。ここをAIに任せると、あとの段階が全部意味を失います。
2. 思ったとおりに表示されないときだけ、自分のHTMLとCSSを貼って理由を聞きます。
3. 返ってきた説明を読んで、修正は自分の手で打ち込みます。返ってきたコードをそのまま貼り替えないでください。
4. 直ったら、自分の書いたコードをAIに説明させて、自分の理解と食い違っていないか確かめます。

2と4で使う聞き方を書いておきます。そのまま貼って使えます。

【詰まったとき】
次のHTMLとCSSで、.card を横並びにしたいのに縦に並んでしまいます。
効いていない理由を、初心者向けに順を追って説明してください。
修正後のコード全体は出さず、どこを直せばよいかだけ教えてください。

（ここに自分のHTMLとCSSを貼る）

【書いたコードを確かめたいとき】
次のCSSが何をしているか、1行ずつ日本語で説明してください。
私は「画面が狭いときだけ縦並びにする」つもりで書きました。
そのつもりどおりになっているか、なっていない点があれば指摘してください。

（ここに自分のCSSを貼る）

「修正後のコード全体は出さないで」と書き添えるのがコツです。これを入れないと完成形のコードが返ってきて、つい貼り替えてしまいます。自分で直す作業が残るように、質問の側で制限をかけておきます。

エディタの中で使うAIは、教材が終わってからでよい

VS Codeの中でコードを提案してくれるGitHub Copilotや、ターミナルで動くClaude Codeのような道具もあります。便利ですが、入門の段階から常にオンにしておくと、自分で書いたのか提案を受け入れたのか分からなくなります。この回の教材を終えてから触るのがちょうどいい順番だと筆者は考えています。それぞれどんな道具なのかは、GitHub Copilotの使い方をまとめた記事とClaude Codeの解説記事を読んでいただくと、無料で使える範囲や料金まで分かります。

なお、Web制作と並行して生成AIの使い方そのものも体系的に学びたい人は、生成AIスクールの比較記事を読んでいただくと、スクールごとの料金と学べる範囲が分かります。

4. 検証ツール（Chrome DevTools）を使えるようにする

作ったページをブラウザで確かめるときに使うのが「検証ツール（デベロッパーツール）」です。Google Chromeに最初から入っていて、画面上の要素がどのHTMLでできているか、どのCSSが当たっているかを表示できます。ここを先に覚えるかどうかで、このあとの学習速度がかなり変わります。CSSが効かない理由を自分の目で確かめられるようになるからです。

全体の雰囲気は、とだこうきさんの動画で掴めます。

操作の細かいところは、Googleが出している日本語の公式ドキュメントが確実です。次の3ページだけ押さえておけば、この回の学習では足ります。

• Chrome DevTools 公式ドキュメント（日本語）：全体の入り口です。
• CSSを表示・変更する：どのCSSが当たっているかを見て、その場で値を書き換えて試せます。
• Device Modeでモバイル端末をシミュレートする：画面幅を変えた表示を確かめられます。6番のレスポンシブで使います。公式の説明にあるとおり、これは実機での確認ではなく概算のシミュレーションなので、最後は自分のスマートフォンでも開いてください。

日本語の入門としては、Progateの検証ツール（デベロッパーモード）の使い方も2026年9月22日時点で公開されています。手順の画面つきで読みたい場合はこちらから入ってもかまいません。

ここで、3番のAIの使い方と組み合わせます。検証ツールで「当たっているはずのCSSに取り消し線が入っている」ところまで自分で見つけて、その画面の情報を添えて質問すると、答えの精度が上がります。「効かない」とだけ聞くより、「このセレクタのbackground-colorが打ち消されている」と言えるほうが早く解決します。

5. HTMLとCSSの基礎を教材で通す【ここからコードを書く】

教材は本・動画・Webサービスと種類がありますが、この回では2つのサービスを組み合わせます。ドットインストールとProgateです。2020年版でも同じ2つを挙げていて、2026年9月22日時点でも両方とも運営が続いています。

2つ使う理由は、弱点が逆だからです。Progateはブラウザの中だけで進むので、自分のパソコンにファイルを置いて書く感覚が身につきません。ドットインストールは自分のパソコンで実際に書きますが、1本3分前後の動画なので「なぜそうするか」の説明は薄めです。両方やると、この穴がふさがります。

料金と無料で使える範囲（2026年9月22日に公式ページで確認）

2020年版には「Progateは月980円」と書いていました。現在の月額プランは1,490円（税込）で、990円は年額プランを月に割った金額です。数字が変わっているので、申し込む前に自分で料金ページを開いて確かめてください。

お金をかけずに始めたい場合は、まずドットインストールの無料公開分とProgateの無料プランで手を動かして、続けられそうだと分かってから片方を有料にするのが安全です。両方を同時に有料にする必要はありません。

進める順番（リンク先は2026年9月22日に確認したページ）

ドットインストールは2020年当時の「はじめてのHTML」「はじめてのCSS」が旧版になり、現在は「Webサイト制作入門」というロードマップにまとまっています。そちらの現行レッスンを使います。

1. ドットインストール はじめてのWeb制作（全11回）。まずプロフィールサイトを作って、Web制作の全体像を見ます。
2. パソコンの準備。Windows編（全10回）またはmacOS編（全10回）。Chromeとエディタ、作業フォルダをここで整えます。
3. ドットインストール HTML入門 基本タグ編（全27回）。
4. ドットインストール CSS入門 基本スタイリング編（全27回）。
5. Progate HTML & CSS 初級編（目安3時間50分）。同じ内容をブラウザ上で手を動かして復習します。
6. Progate HTML & CSS 中級編（目安4時間30分）。ランディングページを1枚作ります。道場レッスンはやらなくてもかまいません。

ここまでで合計10時間以上あります。1日30分でも、止まらずに進めば1か月ほどで終わります。分量は多いですが、2周目をやらない前提なので、1周に時間をかけて理由まで理解しながら進めてください。

Progateのレッスンには途中で答えを確かめる問題が出てきます。分からなければスライドに戻ってかまいません。テストではないので、正解できたかよりも、なぜそのコードになるのかを言葉にできるかを気にしてください。

6. レスポンシブとFlexbox・CSS Grid【この回のゴール】

レスポンシブサイトとは、1つのHTMLでパソコンとスマートフォンの両方に対応するサイトのことです。いま作られているサイトはほとんどこの形なので、Web制作の仕事を目指すなら避けて通れません。

仕組みそのものは、MDNの日本語ページを読むのが確実です。画面幅でCSSを切り替えるメディアクエリー、スマートフォンに正しい幅を伝えるビューポートのmetaタグ、画像をはみ出させないための指定まで、必要なものが1ページにまとまっています。

• レスポンシブウェブデザイン（MDN・日本語）：この回で押さえる範囲がほぼそのまま載っています。
• 必読！5分でわかるレスポンシブWebデザインまとめ（LIG）：2020年7月5日公開の日本語の概要記事です。2026年9月22日時点でも読めます。用語の全体像を日本語でざっと掴みたいときに向いています。

最低限の形は次のとおりです。metaタグを入れ、幅が狭いときの指定をメディアクエリーで上書きします。

<meta name="viewport" content="width=device-width, initial-scale=1">

.cards {
  display: flex;
  gap: 24px;
}

@media (max-width: 767px) {
  .cards {
    flex-direction: column;
  }
}

Flexboxだけでなく、CSS Gridにも触れておく

2020年版ではFlexboxだけを挙げていましたが、いまはCSS Gridも一緒に覚えたほうが楽です。Flexboxは横一列・縦一列のような1方向の並びが得意で、ナビゲーションやカードの横並びに向きます。CSS Gridは行と列を先に決めてから中身を置く仕組みなので、記事一覧のような格子のレイアウトや、ページ全体の骨組みを組むときに短く書けます。下のように列数を決めて、狭い画面では1列に切り替える書き方を覚えておけば、Flexboxでは面倒だった場面が片づきます。

.list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}

@media (max-width: 767px) {
  .list {
    grid-template-columns: 1fr;
  }
}

入門の段階では、Flexboxを主に使いながらGridは「こういう書き方もある」と知っておく程度で十分です。詳しい仕様はCSS グリッドレイアウト（MDN・日本語）とフレックスボックスの基本概念（MDN・日本語）で確かめてください。

この段階で通す教材

1. Progate HTML & CSS 上級編（目安2時間）。メディアクエリーとレスポンシブの実装を扱います。
2. Progate HTML & CSS Flexbox編（目安1時間）。よく使うプロパティに絞ってあります。
3. ドットインストール CSS入門 フレックスボックス編（全22回）とCSS入門 メディアクエリー編（全14回）。自分のパソコンで書いて確かめます。
4. 余力があれば、ドットインストール CSS入門 グリッドレイアウト編（全19回）。

書いたら必ず、4番で覚えた検証ツールのDevice Modeで画面幅を変えて確かめてください。そのあと自分のスマートフォンでも実際に開きます。ここまでできたら、この回のゴールに到達です。一般的なWebサイトのコーディングに必要な土台はそろっています。

まとめ

WordPressでのサイト制作を目標にした独学ロードマップの第1回として、HTML・CSS・レスポンシブまでを6つのステップに分けました。

1. Visual Studio Codeを入れる（公式サイトから無料でダウンロード）
2. 手を動かす・暗記しない・基礎を周回しない、の3つを決める
3. AIは「答えを出させる相手」ではなく「理由を説明させる相手」として使う
4. Chrome DevToolsでCSSの当たり方と画面幅を確かめられるようにする
5. ドットインストールとProgateでHTML・CSSの基礎を1周する
6. メディアクエリーとFlexbox、それにCSS Gridの基本まで進む

教材の料金と無料の範囲は変わります。この記事の数字は2026年9月22日に公式ページで確認したものなので、申し込む前にご自身でも料金ページを開いてください。

教室やオンラインの個別指導で、講座単位で学びたい人へ（PR）

Winスクールは、全国の教室とオンラインで個別指導の授業を行うパソコン・ITスクールです。生成AI（ChatGPT・Copilot）の入門、Excel・PowerPoint と生成AIを組み合わせた講座、Webデザインやプログラミングの講座などを、講座単位で受けられます。

• 無料カウンセリング・受講相談は約1時間で、教室に行くかオンラインで受けられます。目的に合わせた講座の提案を受けられ、公式サイトでは参加後の過度な勧誘はしないと案内されています。
• 受講費用は講座ごとで、入学金・受講料・教材費の合計です（例：生成AI〔ChatGPT・Copilot〕は90分×3回で税込40,700円）。
• 1回分の授業を無料で受ける体験レッスンは行っていないと案内されています。

ほかのスクールと料金や学び方を比べてから決めたい方は、生成AIスクールの比較記事で、料金・学べる範囲・無料相談の有無を同じ軸で確認できます。

Winスクールの講座と無料カウンセリングを見る

料金とカウンセリングの内容は2026年10月14日に公式サイトで確認したものです。申込み前に最新の表示を確認してください。

次に読む記事

基礎を1周したあと、多くの人が「作りたいものが思い浮かばない」で止まります。そこを埋めるのが次の回です。独学ロードマップ 第2回【サイト模写編】を読んでいただくと、お手本のサイトを見ながら同じ見た目を再現する進め方と、どのサイトを選べばよいかが分かります。さらにその先の第3回【ポートフォリオ作成編】では、模写で身につけた力を自分の作品としてまとめる手順を扱っています。

プログラミングを独学で続けるかスクールを使うかの判断と、無料カウンセリングで確かめることを知りたい方は、次の記事で確認できます。

関連記事

プログラミングは独学とスクールのどちらにする？ロードマップを終えた人の次の一歩と、無料カウンセリングで確かめること

HTML/CSSからポートフォリオまで独学で進めた人が、次にJavaScript・WordPress・PHPへ進むとき、独学を続けるかスクールに通うかの判断基準をまとめました。公式の無料資料、Winスクールの講座ごとの料金と前提条件、無料カウンセリングで確かめたい7項目も整理しています。