これからHTML、CSSを勉強してWebサイトを作る仕事をできるようになりたいけど、どうすればいいのか？
そんな疑問をお持ちの方に、私が実際に勉強した方法や使用した参考書を元に、HTML、CSSの勉強方法をまとめてみました。
HTML、CSSにまずは触れてみよう
HTML、CSSはどういう仕組みなのか？どうやって書けば良いのかを知るためにまずは触れてみましょう。
Progateという、人気の入門者向けの教材があるのでこれを使用することをオススメです。
用意するものもインターネットに繋がったパソコン１台のみなので、気軽に始められます。
会員登録をして、ログインすると「HTML & CSS」コースがありますので、これを初級編から上級編までスライドに沿って一通りやります。
無料で受講できるのは初級編までです。
すべて学習するためには有料会員になる必要があります。月額¥980(税込)になります。
1~2ヶ月もやれば十分なので、サクッと雰囲気を学んであとは退会して次のステップへ進めばOKです。
なので、かかる費用は数千円程度です。
初級編から上級編まで最低限1周やれば大丈夫です。
不安があれば2周やっても良いですが、それ以上は無駄だと思うので、２周までにしておきましょう。
この時点ではHTMLタグとかCSSのプロパティ名とか内容は全部覚えなくてOKです。
繰り返しやっていくうちに覚えられますので、こんなのあったわ〜ってくらいで大丈夫かと思います。
HTML、CSSを書ける環境を整えよう
ProgateでHTML、CSSの仕組みや書き方が理解できたかと思います。今までProgateの環境でやっていた事を自分のパソコン上でできるように、環境を整えてみましょう。
必要なものは、「テキストエディタ」と「ブラウザ」(Google Chromeなど)です。
こちらもProgateに分かりやすく書かれているので、こちらに沿って進めれば完了です。
HTML & CSS の開発環境を用意しよう！
合わせてGoogle Chromeの検証ツールも使えることは必須なので、こちらも読んでおきましょう。
検証ツール（デベロッパーモード）の使い方
HTML、CSSの入門書で復習と知識の定着をしましょう
Progateで学んだことは入門にしか過ぎません。
HTML、CSSのコーディングを仕事をするレベルには足りませんので、入門部分の復習と足りない部分を補うために、本で学ぶのがいいです。
オススメはこちらの本です。私自身も基礎知識の勉強に使用しました。
 | ホームページ辞典 第6版 HTML・CSS・JavaScript [ 株式会社アンク ] 価格:2,200円 |
第6版は最新HTML5、CSS3の解説を増量。
モダンブラウザ／iPhone＆Androidにも対応し、近年のWebトレンドに合わせた、より実践的な内容になっています。
また、ダウンロード可能なサンプルソースも一新して、よりわかりやすくなりました。
これからWeb制作を学びたいビギナーから、実務でのリファレンスとして使いたい上級者まで、広くおすすめできる1冊です。
レスポンシブWebデザインを学ぼう
コーディングの仕事をする上でレスポンシブ対応ができることは必須のスキルなので、レスポンシブについても学びましょう。
私が教材として使い、オススメしたいのはこちらの本です。
 | HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方【電子書籍】[ 吉田真麻 ] 価格:2,948円 |
フロントエンドエンジニアから学ぶ制作現場の実践的なテクニック！
本書は、HTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ書籍です。
現在主流なWebページのデザインスタイル、「スタンダードレイアウト」「グリッドレイアウト」「シングルページレイアウト」を適用した3つのサイトを作りながら、各スタイルの特徴や使い分け、コーディングテクニックを学びます。
実際のWeb 制作の現場と同様に、サイトのデザインを基にして骨格を見極め、枠組みから中身までひと通りコーディングするというフローをなぞることで、HTML5/CSS3の実用的なコーディングスキルやテクニックを無理なく身につけることができます。
最近主流のシングルレイアウトデザイン(LPなどで使われる1ページで縦長のデザイン)も学べ、モダンな技術を学べるのでオススメです。
レスポンシブについて扱っている本ならお好きなもので大丈夫です。
コーディングは色々な本が発売されているので、手にとって自分の気に入ったデザインの本を探してみるのもよいですね。
以下の２冊もとってもおすすめしたい学習書です。
 | 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ] 価格:2,486円 |
 | ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座 [ Mana ] 価格:2,728円 |
ステップアップ
ここまでやればある程度はHTM・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が上達するコツは手を動かす。これに限ります。
色んなデザインをコーディングできるようになると楽しいので、毎日コツコツ勉強を続けてみてください！