これからHTML、CSSを勉強してWebサイトを作る仕事をできるようになりたいけど、どうすればいいのか？
そんな疑問をお持ちの方に、私が実際に勉強した方法や使用した参考書を元に、HTML、CSSの勉強方法をまとめました。
HTML、CSSにまずは触れてみる
HTML、CSSはどういう仕組みなのか、どうやって書けば良いのかを知るためにまずは触れてみましょう。
Progateという、人気の入門者向けの教材があるのでこれを使用することをオススメします。用意するものもインターネットに繋がったパソコン１台のみなので、気軽に始められます。
会員登録をして、ログインすると「HTML & CSS」コースがありますので、これを初級編から上級編までスライドに沿って一通りやります。
なお、無料でできるのは初級編までなので、全部やるためには有料会員になる必要があります。月額¥980(税込)ですので登録してみましょう。
1~2ヶ月もやれば十分なので、サクッと雰囲気を学んであとは退会して次のステップへ進めばOK。なので、かかる費用は数千円程度です。
初級編から上級編まで最低限1周やれば大丈夫です。不安があれば2周やっても良いですが、それ以上は無駄だと思うので、２周までにしておきましょう。
この時点ではHTMLタグとかCSSのプロパティ名とか内容は全部覚えなくてOKです。繰り返しやっていくうちに覚えられますので、こんなのあったな〜ってくらいで大丈夫です。
Progate(プロゲート) | Learn to code, learn to be creative.
HTML、CSSを書ける環境を整える
ProgateでHTML、CSSの仕組みや書き方が理解できたかと思います。今までProgateの環境でやっていた事を自分のパソコン上でできるように、環境を整えましょう。
入れるものはテキストエディタとブラウザ(Google Chrome)です。
こちらもProgateに分かりやすく書かれているので、こちらに沿って進めれば完了です。
HTML & CSS の開発環境を用意しよう！
合わせてGoogle Chromeの検証ツールも使えることは必須なので、こちらも読んでおきましょう。
検証ツール（デベロッパーモード）の使い方
HTML、CSSの入門書で復習と知識の定着
Progateで学んだことは入門にしか過ぎません。HTML、CSSのコーディングを仕事をするレベルには足りませんので、入門部分の復習と足りない部分を補うために、本で学ぶのがいいです。
オススメはこちらの本です。私自身も基礎知識の勉強に使用しました。
細かく丁寧に書かれており、読み進めながら実際に教材のサイトを作ることで、Progateで学んだことを復習しつつ足りない部分を学べますのでぜひやってみてください。
レスポンシブWebデザインを学ぶ
入門書としてご紹介した「作りながら学ぶ HTML/CSSデザインの教科書」ですが、レスポンシブは載ってません。
コーディングの仕事をする上でレスポンシブ対応ができることは必須のスキルなので、レスポンシブについても学びましょう。
私が教材として使い、オススメしたいのはこちらの本です。
ポチップ
最近主流のシングルレイアウトデザイン(LPなどで使われる1ページで縦長のデザイン)も学べ、モダンな技術を学べるのでオススメです。
レスポンシブについて扱っている本ならお好きなもので大丈夫です。コーディングは色々な本が発売されているので、手にとって自分の気に入ったデザインの本を探してみても良いかもしれませんね。
ステップアップ
ここまでやればある程度はHTML、CSSはある程度書けるようになっているかと思います。
実際のWebサイトではHTML、CSSだけではなく他にも色んな技術が必要なこともあります。一通りHTML、CSSができるようになったら次のステップとして最低限以下も勉強して、できるようにしましょう。
上から順に学ぶことをオススメします。
- JavaScript
- jQuery
- Photoshop、XDなどのデザインツールの使い方
- Sass
- BEM（CSS設計）
JavaScript、jQuery、SassはProgateで基礎は学べるので、まずは触ってみて覚えましょう。特にJavaScript、jQueryは必ずと言って良いほど、コーディングでは使用しますので必須です。
また、Photoshop、XDなどのデザインツールはコーダーとして仕事をするなら必ず使います。デザイナーが作ったデザインデータから画像を書き出したり、サイズ、色など必要な情報を読み取ってコーディングできるようにしておきましょう。
上記ができるようになったらCSS設計も学ぶと、より綺麗なCSSが書けるようになります。BEMは制作の現場でも広く使われているので、勉強する価値はあります。
分からなくて困ったら人に聞く
学習を進めていくとわからない部分が出てきて、解決できないと挫折しそうになりますね。困った時に聞ける人を見つけると挫折しにくいでしょう。
ネットで質問する
ネット上には質問できる環境があります。
ITエンジニア特化型O&Aサイトのteratailのように質問できる掲示板を使うのもいいでしょう。Webエンジニアと繋がりがあるならTwitterで困っている事を投げかけると、心優しい方が答えてくれる場合もあるので助けを求めるのもありですね。
ただし、ネットで質問するのは必ずしも答えが返ってくるとは限らないというデメリットがあります。
メンターをつける
常に聞ける人が欲しい場合は、メンターをつけるという方法があります。
メンターを探すなら、MENTA 
というサービスが評判いいです。いろんな技術を持った人がメンターとして登録していますので、自分にあった人を探せます。私の知り合いエンジニアも何人かメンター登録しています。
金額も月額数千円から契約でき、マンツーマンで教えてくれます。スクールに通うよりはリーズナブルなのでオススメです。
スクールに通う
メンターはたくさんの人の中から探して申し込まないといけないので、探す手間などはかかります。そういうのは面倒とか、手っ取り早く教えて欲しいとかいう人はスクールに通ってしまうのも手です。
TechAcademyは、オンライン完結プログラミングスクールで自宅に居ながら受けられますし、豊富なカリキュラムとチャットサポートが整っています。
いつでも聞ける環境が欲しい方やHTML、CSS以外の言語も合わせて学びたい方にはぴったりかと思います。
HTML、CSSが上達するコツは手を動かす。これに限ります。色んなデザインをコーディングできるようになると楽しいので、毎日コツコツ勉強を続けてみてください！
