【初心者向け】HTML・CSSの勉強方法【3万円のWEB制作がこなせるまで】

この記事ではこのような疑問にお答えします。

プログラミングの入門としてHTML、CSSから始める人が多いですが、ぶっちゃけ何から、どれくらい勉強すればいいかわからないですよね？実際に僕もそうでした。

そんな方のために昔の僕にエールを送るかたちで、３万円のWEB制作をこなせるまでのHTML・CSSの勉強方法について語ります。

〜おすすめのプログラミングスクール３つ〜

ちなみにこの記事を書いている僕は、未経験から4ヶ月ほど独学でプログラミングを勉強しまして、WEBエンジニアとして転職することができました。また現在は独立してフリーランスで月50万円ほど稼ぐことも出来ていますので、実体験に基づいて3万円ほどのWEB制作案件をこなせるまでのHTML・CSSの勉強方法について語ります。

〜本記事の内容〜

• 3万円稼ぐまでのHTML・CSSの勉強方法
• HTML・CSSの基礎勉強ができたら実案件をすべき

3万円稼ぐまでのHTML・CSSの勉強計画

HTML・CSSは目標を決めない限りずっと勉強し続けることになるので、この記事では3万円のWEB制作案件をこなせるようになるレベルとしておきます。

3万円のWEB制作案件はどんな案件かというと以下の通り。

制作物	LP	WEBサイト(3~4P)
必要言語	HTML、CSS、jQuery	HTML、CSS、jQuery
その他フレームワーク	–	WordPress
制作日数	2〜3日	1〜2週間

案件によっても、個人によってもかなり誤差はありますが、ざっくりこんな感じです。

注目していただきたいのは、必要な言語でして3万円ほどの案件ならHTML、CSS、jQueryが出来ればほとんど制作可能なものが多いです。

jQueryとかわからない・・・とビビってしまうかもですが、3万円ほどの制作案件ならほぼネットに落ちているフリーのものを使えばOKなので、使い方さえマスターすれば大丈夫です。ここらへんも記事の中で詳しく説明していきます。

HTML・CSSを勉強して3万円の制作案件をこなすロードマップ

HTML・CSSの勉強ロードマップは以下の通り。

• その1. Progate(HTML、CSS、jQuery)
• その2. テキストエディタの導入
• その3. HTMLモダンコーディング
• その4. ディベロッパーツールの使い方
• その5. サイト模写

このロードマップは実際に僕が経験した流れなので、再現性は高いはずです。
自分の今のスキル状況に応じて既に習得済みのものは飛ばしてください。

その1. Progate(HTML、CSS、jQuery)

HTML・CSSの勉強は、WEB制作の入門的な立ち位置です。WordPressで作ったサイトもこの知識がベースとなるので、しっかりと身に付けておきましょう。

>>HTML・CSS・jQuery – Progateオンラインプログラミング学習サービス

独学でWEB制作を勉強する時によく使われるProgateを使いましょう。
Progateはイラスト中心に学べるオンラインの初心者向けプログラミング学習サイトでして、僕も初心者の時はこのサイトでごりごり勉強しました。

Progateはそれぞれのプログラミング言語で、コース別に講座が別れているのですが3万円の制作案件をこなすなら全てやる必要はありません。

これは僕のツイートですが、やるべきコースはこの通り。

Progateで実際に3万円ほどのWEB制作案件を取るまでにやったことですが、

🔆HTML&CSS 初級編、中級編、上級編（学習・道場）

🔆PHP Ⅰ、Ⅱ（学習・道場）

🔆jQuery初級・中級（学習・道場）

ここまでやれば実際の案件を通して学ぶ方が圧倒的に早く成長できます！
初めは怖いかもですが挑戦！

— しゅう丸@WEBエンジニア (@shumarukiti) 2018年5月17日

※PHPはWordPress案件をやる際に必要になるので、余裕のある人はやっておいて損はありません。

その2. テキストエディタの導入

Progateを終えるとHTML・CSSの基礎部分はOKなので、実際にWEB制作を始める準備をします。

テキストエディタと言われてもパッとこない方もいるかと思いますが、簡単に言うとHTML・CSSを書くメモ帳みたいなものです。

Progateではサイト上にコードを入力しましたが、それを自分のパソコンでやる感じ。とはいえ難しいことは何もなくHTML・CSS用のメモ帳をパソコンに入れるという認識でOK。

テキストエディタはたくさん種類があって自分にあったものを使えば良いのですが、僕も使っているSublime Textがおすすめです。

設定方法や使い方はTechAcademyの記事が詳しく書かれていたので、リンクを貼っておきます。
>>今日から使える！Sublime Textの使い方【初心者向け】

その3. HTMLモダンコーディング

ProgateでHTML・CSSの基礎が身に付いて、テキストエディタが導入できたらWEB制作の準備は完了。
実際のWEB制作を想定して、この1冊でHTML・CSSのスキルをもう一段階アップさせます。

実際にWEBサイトを作りながらスキルを上げていける点がおすすめな理由。またこの1冊でデザインが異なる3サイトを一気に制作できるので制作の幅がグッと広がります。途中で挫折してしまわないポイントは、わからない箇所は放置して次にいくということです。

この段階では全て理解することよりも、継続することを心がけましょう。わからず放置していた箇所も後々になれば自然とわかってくるので。

その4. ディベロッパーツールの使い方

この時点ではHTML・CSSの感覚は掴めているはずです。その3.と並行してディベロッパーツールの使い方をマスターするのが良いですが、一気にあれこれ手を出すと混乱するので、この段階でOKです。

ディベロッパーツールはサイト制作には必須なのでしっかりマスターしておきましょう。ちなみにこの使い方をマスター出来るとWEB制作がさくさく進みます。

詳しい使い方は以下の記事を読んでください。
>>初心者向け！Chromeの検証機能（デベロッパーツール）の使い方

その5.　サイト模写

ここまでくれば実際にWEB制作を0から始める土台は完成しているはずです。

そこで実際に3万円の実案件をこなすまでに必要になってくるのが、サイト模写です。サイト模写といっても難しいことはなくて、実際に存在しているサイトを真似して作るだけです。

この勉強をすることで驚くほど、HTML・CSSのスキルがアップします。

とはいえどんなサイトを模写すればいいかわからない人も多いかと思うので、何サイトかこのサイトが良いよというサイトを紹介しておきます。

CodeCamp、isara、WebCamp

といった感じです。

せっかくのサイト模写なのでプログラミングスクール中心に選んでみました。他の分野のサイトも随時追加していく予定です。

このサイト模写ですが、注意点がありましてそれは以下の通り。

• 細かい点を気にせず進める
• 動きなど完全に真似る必要なし
• レスポンシブは意識して制作する

とにかく細かい点は気にせずにごりごり進めましょう。初めから完璧に出来る人はいないので、とにかく数をこなすことが大切です。少し時間はかかるかもですが、ここをしっかりおさえておくと後々仕事で困ることが少なくなるので。

このサイト模写で5サイトほど模写できれば実案件をこなせるレベルになっているかと思います。

HTML・CSS勉強のお助けサイト紹介

独学は茨の道なので、そんな独学でのHTML・CSS勉強を助けてくれるお助けサイトを紹介しておきます。

• サルワカさん：HTML・CSSのあれこれをわかりやすく解説されています
• colissさん：ピンポイントで知りたい知識が乗っていることが多いです

とりあえずこの2サイトをチェックすれば知りたい情報は出てくるかと思います。

必要に応じてググればググる力も身につくのでぜひです。

HTML・CSSの基礎勉強ができたら実案件をすべき

ここまでの内容を真面目にやれば、最低限のサイト制作はこなせるようになっているはずです。

実案件をこなすことで驚くほどスキルはアップしますので、ぜひ挑戦してみるといいかと。

仕事の取り方は色々ありますが、初心者におすすめなのはクラウドワークスです。

クラウドワークスは、

です。

とはいえホームページ制作の基礎と実案件をこなすまでには結構高い壁があるのも事実です。

僕は「Progateで独学+スクール」の掛け合わせでフリーランスを実現しましたが、スクールに行ってなかったら実案件をこなすスキルは身に付いてなかったなと…思います。

WordPressを実務レベルで身に付けたいならTechAcademyがおすすめです。TechAcademyには無料体験授業があるので、プログラミングの基礎を学ぶのもにいいかと思います。

〜おすすめのプログラミングスクール３つ〜

どこのスクールか迷う人は、個人的にTechAcademyがおすすめです。オンラインで受講できますし、サイト制作のWordPressコースもあるので。無料体験授業があるので、気になる方はとりあえず無料体験授業を受講してみるといいかと思います。

HTML・CSSの勉強に終わりはない

一定の基礎が出来れば机に向かって何時間も勉強する必要はありません。

実際の案件を通して、わからない箇所を対処してスキルアップしていくべきです。

よくProgateをずっと勉強してそこから抜け出さない人がいますが、あれは勿体ないです。プログラミングを勉強する理由は色々あるかもですが、稼ぐことができるのが目標である人も多いはず。

せっかく勉強しているなら稼げるようになるべきなので、基礎を早めに固めて実案件をこなしてみてください。