HTML/CSS 初心者向け勉強法

初めまして、WEBサイト制作担当の前原です。WEB未経験で入社して9ヶ月になる新人です。

私はHTML/CSSについては入社前に独学＋学校で3ヶ月ほど教わりましたが、
ネディアには、入社後に社内で一からWEBについて勉強し（これからお勧めする勉強法＋多少先輩に教わりつつ）、3ヶ月も経たずにWEB制作の実務で活躍中の方もいます。

向き不向きと、本人のやる気・努力次第でもありますが、HTML/CSSは独学でも比較的学びやすい言語だと思います。
これから独学で勉強したいという方向けに、実践して良かった勉強法をお勧めしたいと思います。

※HTML/CSSにはバージョンがありますが、XHTMLなど昔のバージョンについては「こんなのがあったんだな～」くらいで、まずは最新のHTML5とCSS3だけを勉強する事をおすすめします。

【Progate】

初級編無料、中級・上級編は月額980円
https://prog-8.com/

まず最初に行うのが、ブラウザ上で実際にコードを打ち込みながら勉強できるオンライン学習サービスです。
とても良いサービスですし、2000円以上する書籍を買ったり、有料のスクールに通うのと比べると、月額980円はかなりお得だと思います。
が、もちろん無料の範囲でも充分できるようになると思います。金欠の方は初級編をクリアしたら次の段階へどうぞ。

このサービスで全く正解出来ない！という方にはWEB制作の道は厳しいかもしれません…

HTML・CSSのほかにもJavaScript・jQuery・Ruby・PHP・Java・Python・Swift・command Line・Gitなどが学べます。

※初級編で答えは合ってるのはずなのに正解できない！という時は、全角で打ち込んでいないか、スペースが入っていないか、など細かな所を確認しましょう。

【HTML5&CSS3標準デザイン講座】

定価2480円＋税
https://www.amazon.co.jp/dp/4798142204

オンライン学習サービスの次は書籍です。
【Progate】ではブラウザ上のエディタにコードを打ち込んでいくという感じでしたが、この本では自分のパソコンの中でサイトを作っていきます。
HTML5/CSS3の基本からスマホ対応まで学べます。
上手くいかないときはブラウザのデベロッパー(開発者)ツールを使って原因を探しましょう。
ブラウザはデベロッパーツールが使いやすいのでGoogleChromeを個人的にお勧めしています。

＋持っておきたい書籍
【できるポケット HTML5&CSS3/2.1全事典】

定価1680円＋税
https://www.amazon.co.jp/dp/4844337394

その名の通りHTML5とCSS3のコード辞典です。
ネットで逐一検索するのでもいいですが、これ一冊あるととても便利です。
超初心者の段階ではいらないと思いますが、【HTML5&CSS3標準デザイン講座】で実際に自分でサイトを作る時に揃えたい書籍です。

実制作

この先は実際に手を動かしてサイトをひたすら作っていきます。
WEBデザインギャラリー イケサイ などから作りが簡単そうなサイトを探して模写してみましょう。
HTML/CSSをある程度使えるようになったら、jQueryのライブラリを使ってスライドショーやモーダルウィンドウなどの導入にも挑戦してみるといいと思います。

＋時間があったらやりたいサービス

【Schoo】

生放送授業は無料、全授業は月額980円～
https://schoo.jp/

動画での学習サービスです。プログラミングの他、デザインや英語など幅広い分野について学べます。
先生がついて個別指導してもらえるプランもあります。

【Schoo】で個人的におすすめの授業
https://schoo.jp/class/441
HTMLスケッチというサイト模写の授業です。WEBデザイナーとして活躍している方のコーディングが実際に見れるので勉強になります。
【HTML5&CSS3標準デザイン講座】で勉強した後にどうぞ。
※この方のHTMLスケッチの授業は改訂前の物がユーチューブでも公開されています→https://youtu.be/038wQNc_j1s

【CODEPREP】

全て無料
https://codeprep.jp/

Progateと同じように実際にコードを打ち込みながら勉強できるオンライン学習サービスです。
2017年6月現在、全て無料で学習できます。
「はじめてのHTML」などの講座以外は限定的な技術の講座が多いです。
Progateをやった後、復習という感じで、時間があったらやってみるのがいいと思います。

HTML・CSSのほかにもJavaScript・jQuery・Ruby・PHP・Java・Python・Bootstrap・Scala・Rustが学べます。

まとめ

以上、他にも良いサービスはあるのですが割愛します。
色々と紹介しましたが、やはりレベルアップの一番の近道は実際にサイトを作ることだと思っています。

しかしネットを検索しても分からなくて行き詰った時など、独学ではどうしようもなくなる時もありますので、分からない所を質問できる先生を見つけるとより良いですね。

上記で勉強してそのまま仕事で即戦力という訳にはいかないと思いますが、
今WEB制作で活躍されている方も、かつて初心者の時があって現在バリバリ制作されているわけで、いつかそうなれることを夢見て、コツコツ地道に技術を上げていけたらと思います。