はじめに：HTML・CSSの学習、何から始めたらいい？
学びたい人
web制作始めたいけど、どうやって勉強するの？
web制作で稼ぎたい！
HTML・CSSの勉強法を知りたい！
そんな悩みを抱えていませんか？
未経験からエンジニアになった私が、実際効果のあった勉強法とやっておくべきだと感じた
経験をもとに、HTML・CSSの正しい勉強方法について解説します！
・本記事の内容
✔HTML・CSSの正しい勉強方法
✔初心者でもつまずかない学習ステップ
✔勉強を続けるコツ
それではさっそく、HTML・CSSの正しい勉強方法について、説明していきます！
ステップ0：学習前の準備をしよう（vscodeの使い方）
まずはコーディングを始めるための準備から。
おすすめのエディタは「Visual Studio Code（通称：vscode）」です。
vscodeのインストール
vscodeは公式サイトから無料でダウンロードできます。
Windowsの方は中央のボタンから、Macの方は右上のDownloadボタンからダウンロードしましょう！
フォルダとファイルを用意
1.作業フォルダを作る（例：html-practice）
2.フォルダをvscodeで開く
3.中に「index.html」「style.css」を作成する
vscodeに入れておきたいおすすめプラグイン【初心者向け】
vscodeはそのままでも使えますが、便利なプラグインを入れることで学習効率がグンとアップします。
以下の6つは、私が今でも使っているプラグインです。
HTML・CSSの勉強を始めるなら絶対に入れましょう！
1. Prettier – Code formatter
コードの見た目をボタン一つで整えてくれるプラグインです。
インデントやスペースのズレを修正し、読みやすくてきれいなコードに保つことができます。
実務では、読みやすいコードを書くことが求められます。学習段階からインデントやスペースを意識して、きれいなコードを書きましょう！
2. Japanese Language Pack
vscodeのUIを日本語化するプラグインです。
英語が苦手でも安心して使えるようになります。
3. Auto Close Tag
HTMLのタグを自動で閉じてくれます。
たとえば <div> を入力すると、すぐに </div> が補完されて時短になります。
4. Auto Rename Tag
HTMLの開始タグ・終了タグを同時に編集できるようになる便利プラグイン。<h1> を <h2> に変えると、 </h1> も自動で </h2> に変わります。
5. indent-rainbow
インデント（字下げ）に色をつけて表示するプラグインです。
ネスト（入れ子構造）が視覚的に分かりやすくなるので、HTMLの構造理解に役立ちます。
6. Live Server
ボタン1つで、ブラウザに自分のHTMLページをリアルタイム表示できます。
保存するたびに自動でページがリロードされ、動作確認がスムーズに。
ステップ1：ProgateでHTML・CSSの基礎を学ぶ
最初の一歩は「Progate」がおすすめです。スライド形式で学びながら、その場でコードを書けるので、初心者でも取り組みやすいのが特徴です。
ここでは100%理解を目指すより、HTMLタグの意味、CSSの書き方、Webページの構造をなんとなくで理解することができれば、次に進みましょう！
ステップ2：模写コーディングで実践力をつける
Progateで基本を学んだら、次は「模写コーディング」にチャレンジしましょう。
模写コーディングのやり方
- 「Codejump」のHTML/CSS入門編のデモを開く
- vscodeで自分なりにHTML/CSSで再現する
- １分考えて分からないときはchatGPTや検証ツールで答えを見る、理解する
- 完璧に再現しなくてもOK！「見た目が近ければ合格」です
模写コーディングを学ぶときのコツは、「どれだけ時間をかけずにやるか」です。
私も最初のころは、完璧に再現しようとして時間をかけすぎてしまい、少し後悔しました。
でも、模写コーディングの目的は、HTMLの構造を理解したり、レイアウトやデザインを再現する力をつけることにあります。
そのため、検証ツールやchatGPTを有効活用して、効率よく学習を進めましょう！
ステップ3：デザインカンプから本格的にコーディングする
次のステップは、デザインカンプ（FigmaやXDのデザインデータ）をもとに、自分でHTML/CSSを書いて完成させることです。
デザインカンプも「Codejump」で無料配布されているので、有効活用しましょう！
デザインカンプからのコーディング手順
下の手順は、実務でもよく使われているものです。
学習のうちから取り入れて、現場とのギャップを減らしていきましょう！
模写との違いは「精度」
- 見た目をできるだけピクセル単位で再現する「ピクセルパーフェクト」が求められる
- margin / padding / fontサイズなど、細かい数値にもこだわる
- 実案件に近い経験が積める
このステップをこなすことで、実務レベルの基礎力が身につきます。
ステップ4：他人のコードを読んで学ぶ
最後は「コードリーディング」です。
GitHubやネットで公開されてるHTML/CSSのコードを見ながら、こんなポイントに注目して学んでみましょう！
- class名の付け方
- コンポーネントの分け方
- メディアクエリの書き方
- CSSの設計（BEM、FLOCSSなど）
理解できなかったら、まずは「真似する」だけでもOKです！
つまずいたときの対処法
学習中は必ず「分からない」「動かない」場面に出くわします。そんなときは、下の方法で対処してみましょう！
- 検証ツールで原因を調べる
- ChatGPTなどのAIに聞く
- Google検索で具体的なエラー内容を探す
- SNSやコミュニティで質問する（XやDiscordなど）
一人で悩まず、すぐ調べる・聞く姿勢が上達のカギです。
もしそれでも分からないことがあれば、XのDMで気軽に聞いてくださいね！
できる限りチェックします！
モチベーションを維持するコツ
HTML/CSSの学習は地味で単調に感じることも。挫折を防ぐためのコツも取り入れましょう。
コツ1：仲間を作る
- SNSで「#Web制作初心者」タグを活用
- Discordの学習コミュニティに参加
仲間がいれば、自然と続けられます！
コツ2：ハードルを下げる
- 「まず5分だけやる」
- 「今日はpタグだけ書く」でOK
毎日少しでも触れていれば、自然と習慣になります！
コツ3：ご褒美と習慣化
- 学習後に好きなスイーツや動画など「ご褒美」を
- NotionやGoogle Keepでタスク管理して、夜寝る前に計画を立て
私はよく、学習後にコンビニスイーツを食べてました笑
まとめ：迷ったら、まず手を動かしてみよ
HTMLとCSSは、手を動かすことで理解が深まるスキルです。まずは今日から下のアクションを始めてみましょう。
✅ 今日からできる「やることリスト」
- vscodeをインストールする
- Progateに登録して1つのレッスンを終える
- 好きなサイトを模写してみる（完璧じゃなくてOK）
このステップを実践すれば、未経験でも確実にスキルが身につきます。
あなたも今日から、Web制作の第一歩を踏み出してみませんか？