独学でHTML＆CSSを初めて勉強する方におすすめの学習手順
最初の勉強方法は？基礎中の基礎！（プロゲート・ドットインストール・無料教材）
まず私はHTML＆CSSはなんぞや？というところから勉強していきました。
それをもっとしっかり無料で勉強できるおすすめサイト2つを紹介します。
プロゲートスライド形式で学び、すぐに復習として実際のコードを選択して穴埋め問題を解いていきます。
とてもわかりやすい上にスラスラ進むので、初心者の方でも学習しやすいかと思います！
ドットインストールドットインストールは「3分動画でマスターできるプログラミング学習サービス」です。
全ての動画が3分以内となっており、すきま時間で学習することができます。
ドットインストール 3分動画で初心者や独学の方でも無理なく勉強が続くプログラミング学習サービスです。Web制作の基礎から子供向けのゲーム制作レッスン、さらにシステム開発に使われるPHP、R… どっちがいいの？個人的な意見も含みますが、両方にいいところがありますので両方触れる方がおすすめです！
専門的な知識はすぐに覚えて実践できる訳ではありませんので、全部理解せずとも次々と進みましょう！
2つのサイトの欠点「実際にコードを書くことがないので、わかりにくいところがある！！！」
先述したとおり、自分でエディターを使ってコードを書くようになるとエディターで補完してくれる部分もかなりありますので、選択式のプロゲートでは「あれ？何が変なの？」と逆にわからなくなることがあります…
無料でもらえる教材を活用して必要な知識を手に入れる！私は、学習を進めると 基礎的な部分で分からない部分などがあると前の章に戻っては再確認することが多かった です。
- 名前とメールアドレスを入力するだけですぐに始められる
- 無料体験のカリキュラムはWeb制作の基礎から学べる
- カリキュラムのまとめとして課題を提出するとメンター(指導者)から評価がもらえる
- その場でチャットが質問できて返信も早い
- 30分の無料メンタリングでは、Web制作だけじゃなく職業の相談もできる
基礎が分かったらサイトを作ってみる！（書籍購入）
ちなみに私はこの位の理解度でこの作業を行っていました。
- HTMLでのidやclassの付け方がわかる
- 画像の付け方がわかる
- リストの作り方がわかる
- 表は作れません。
- Headはタイトルと説明とCSSの読み込みができればいいよね？
- CSSで色の変更や背景色の変更ができる
- CSSで大きさの変更ができる
など、本当にサイトにちょっと反映できる位でした。なので、「なんとなくだけどサイト作れそうだぞ…？」という段階で全く問題ありません。
サイトを作る4つのステップ- サイトデザインを決める（デザインカンプ）
- デザインを元にHTML＆CSSでコーディング
- サイトをネット上にアップロード(サーバー・ドメイン契約)
- アップロード後にしっかりとサイトが反映されているか確認・修正
模写コーディングと言われる「作れそうなサイトのデザインを模写してコーディングする」という方法です。
「作れそうなサイト」が見つからない。という壁にぶつかりました…
¥2,486 （2026/03/27 13:22時点 | 楽天市場調べ）この「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」は読みながら同じようにコードを打ち込んでいくだけで数パターンのサイトが出来上がる1冊となっています。
そして、なにより一番ありがたかったのは「制作順序をしっかり学ぶことが出来る」ことでした。
エディターソフト「VSCode」を使ってコーディング私がある程度エディターソフトを覚えることができたなと実感できたのはこの手順です。
VSCodeの拡張機能を導入・Japanese Language Pack for Visual Studio Code
・prettier code formatter
・indent-rainbow
・Code Spell Checker
・Path Autocomplete
・zenkaku
・Auto Rename Tag
・Live Server
VSCodeの拡張機能を導入して1つでもサイト制作をしてみる サイトのレイアウトについて学び、コードのイメージが出来るようにする デモサイトor模写コーディングをしてスピード・精度を高める STEP3と4を繰り返す コードを覚えるとサイト制作が楽しくなります！コードを覚えると楽しくなってきますので、 行き詰った時はコードのストックを貯める という事をやってみてください！
サーバー契約をしてサイトをアップロードしてみる
- レンタルサーバー契約・ドメイン取得
- FTPソフトでのアップロード
レンタルサーバーについてですが、「ConoHa WING 」がおすすめです。
理由としては先程説明した通りアップロードする為には、サーバー契約とドメイン取得が必要になりますが、「ConoHa WING 」ならサーバー契約だけで済みますので、簡単になります。
また、ConoHa WING ならWordPressの導入も出来ますので、制作物の紹介サイトやブログを簡単に作ることが出来ます！
料金もよほどアクセスが集中するサイトでない限り安いベーシックプランで全く問題ありませんし、アクセスが増えてからのプラン変更も簡単に出来ます！
FTPソフトでサイトをアップロードするFTPとは「File Transfer Protocol」のことであり、ファイルを転送するための通信規格です。
ということで、FTPを使うことで制作したサイトデータをアップロード出来ますよってことですね。
各サーバーサイト自体にもFTP機能があり、データをアップロードすることが出来ますが、FTPソフトを使う方がたくさんのファイルを転送するには速くて楽な点とデータのバックアップや復元する際にはFTPソフトの方が有利となります。
- 簡単設定でサーバーとファイルのやり取りが可能
- フリーソフト
- 画面が左右で分割していてわかりやすい
このソフトは サーバーと接続が簡単 で直感的にファイルのやり取りができます。
窓の杜 「WinSCP」SCP/SFTP/FTPS対応のFTPクライアント模写コーディングでコーディングに慣れる
独学でコーディングに慣れるには模写コーディングが最適だと判断しました。
模写は独学最強の味方！ずばり、模写は 問題と解答 になるからです！
デベロッパーツールは「F12」で起動することができ、選択した要素のHTML&CSSが確認できます。
デベロッパーツールの超基本的な使い方 調べたい要素を選択する「選択モード」HTMLとCSSが分かるということは両方コピーするとそのまま反映できるので、 どうしても模写できなかった場合 には解答を見ることができます。
模写に慣れたらXDでデザインカンプを模写してコーディング次に必要になるのは、サイトの設計図であるデザインカンプを作れるようになることです。
個人で使う分には無料で利用できますが、共有などは出来ないので注意が必要です。
XDはワイヤーフレーム・デザインカンプ・プロトタイプ作成に必要な機能がまとめられた、UI/UXデザインツールとなっていて、デザインカンプ制作の主流となっています。
まとめ-あとは数をこなす！-
そして独学で一番の壁は「正解が分からなくて行き詰ってしまう」ことだと思います。
本当にその時には「 コードのストックを作ること 」をやってみてください。