HTML・CSSのコーディングを最短最速で効率良く勉強する方法について説明します。
【結論】HTML・CSSの基礎を勉強したらゼロから1ページコーディングする
結論から先に言うとHTMLとCSSの基礎を本やオンライン学習で勉強したら、ゼロから1ページでも良いのでコーディングするのが1番効率の良い勉強方法です。
理想は実案件を通して経験を積むのが1番理想的な形ですが、なかなか実案件に触れることが難しい人は、まずはコーディングが簡単そうなサイトのキャプチャを撮って、コーディング（※もちろん公開してはいけません）してみるのが良いです。
1ページできたらもう1ページ、さらにもう1ページと...徐々に力がついてきたと実感してきたら1サイト丸っとコーディングする。
これを繰り返し行うと確実にコーディング力が向上します。
イメージ的には筋トレと同じイメージです。
はじめは少ない回数から筋トレして徐々に回数を増やしていき、重量を大きくしてどんどん筋肉を育てていくというイメージに近いです。
JavaScriptとjQueryは、Web制作に関してはHTMLとCSSに比べて登場する場面が少ないので、まずはHTMLとCSSを掛けるようになってから極める形でも問題ありません。
経験を積むのが1番効率が良い理由
ではなぜ経験を積むのが1番効率が良いやり方なのか理由を説明します。
自信がつく
1番の理由はゼロからコーディングして複数ページや1サイトを作れるようになれば、自ずと自信がつきます。
この自信がトリガーとなり、さらに複雑なCSSのレイアウト調整だったりJavaScript使って動きのあるサイトを作ったり、いろんな挑戦にチャレンジできるようになります。
成功体験の積み重ねが自分の自信に繋がって大きく成長します。
検索力が鍛えられる
CSSを組んでいたらレイアウトが崩れて大変なことになっても、デベロッパーツールを駆使したり、Googleで検索すれば大抵の問題は解決できます。
世の中のわからないことは大体Googleが教えてくれます。
Web制作をしていると、コーディングする→つまずく→Googleで検索する→やってみる→理解する。
という一連のサイクルが自然と身についてくるので、どんな語句で検索すれば良いかという検索力を鍛えることができます。
Web業界では常に新しい技術がたくさん溢れているので、検索力を鍛えることは同時に問題解決能力を鍛えることに繋がります。
実績になる
仕事としてコーディングする案件であれば、クライアントが許可すれば自分のポートフォリオとして実績に加えることも可能です。
さらに以下のメリットもあります。
- 経験が積める
- 知識が身につく
- 報酬がもらえる
- 実績が増える
【完全初心者向け】ゼロからコーディングするのは難しければ基礎から勉強する
実務なんてまだまだ先の話で、ゼロからコーディングできるほど知識がない人や、これからHTML・CSSの勉強をしようとしている人は、まずは基礎から勉強する必要があります。
基礎学習は以下の方法あります。
本から勉強する
私は1番はじめは本を買って勉強することから始めました。
「はじめてのHTML」「初心者でもわかるHTML」などといった初心者向けの本を買って、基礎から覚えるやり方です。
おすすめはチャート形式（1つのサイトを作ることを目標にして進んでいくタイプ）の本を購入して、何回も繰り返して勉強する反復練習が効果的です。
1度やっただけでは数週間後にはすぐに忘れてしまうので、体で覚えられるまでは反復して学習しましょう。
本で得た知識は自己投資となり、いずれ自分の元に返ってくるので本への投資はガンガンやっていきましょう。
おすすめの本を下記です。
オンライン学習で勉強する
本で学習できなくても今はネットのオンライン学習でHTMLやCSSを勉強することができます。
オンライン学習では動画を見ながらコーディングするタイプと、課題が出題されてコツコツ解いていくタイプの大きく2つのタイプがあります。
有名どころで言うとProgate（プロゲート）やドットインストールが有名です。
私も初心者の頃は良くお世話になりました。
Progate（プロゲート）
Progate（プロゲート）は言語ごとにカテゴリが分かれていて、課題をコツコツ解きながら学習を進めるオンライン学習サービスです。
サイト上のテキストエディタにコードを打ち込んで学習できるので、コードエディタがなくても手軽に学習できます。
そしてHTMLやCSSの他に、JavaScriptやPHPなどのプログラミング言語も学習することができます。
有料プランに加入するとさらに難しい課題にチャレンジすることもできます。
ドットインストール
ドットインストールは動画を見ながら学習するタイプのオンライン学習サービスです。プロゲートと同じで言語ごとにカテゴリが分かれています。
動画の内容は1ステップ10分以内の動画が数多くあり、コツコツステップを踏みながら学習していくスタイルです。
基礎がついてきたら架空のサイトを1ページ作ってみる
本やオンライン学習で基礎的な部分は固まってきたけど、まだまだ仕事として実践するのはちょっと自信がない人は、架空のサイトを1ページ作ってみることをおすすめします。
自分で考えた架空のサイトをワイヤーフレームから作り、デザインしてコーディングしてみるとサイト制作の一連の流れを体験できてかなり勉強になります。
架空のサイトは企業サイトや飲食店のサイトなど、リアリティを追求して作っていくと実践に近い経験を得られます。
独学に挫折しそうになったらスクールを検討する
HTMLとCSSくらいであればスクールに通うほどでもありませんが、Webデザインやサイト制作の一連の流れなどを、現役デザイナーやエンジニアの人に相談しながら学習したいという人はスクールに通うこともおすすめします。
入学金や授業料などは掛かりますが強制的に勉強できる環境に身をおくことは重要です。
私は独学に挫折したので最終的にスクールに通うことにしましたが、スクールに通って後悔したことは一度もありません
独学に限界を感じている方はスクールに通うのも1つの手段です。
ちなみに私はデジハリ
に通いました。
デジハリに関しては以下のページにまとめてますのでよかったら読んでみてください。
スクールの選び方がわからない人はこちらのページにまとめています。
まとめ
以上、HTML・CSSコーディングの効率良い勉強方法について説明しました。
実務経験を積みまくることが1番成長する方法ですが、なかなか難しい人は基礎をある程度固めることが大切です。
やればやるほどスキルも自信もついてくるので焦らずコツコツ勉強してきましょう。
