基本的にWebサイトは骨組みであるHTMLと、サイトにデザインを装飾するためのCSS、サイトにインタラクティブな動きを加えるためのJavaScriptなどが絡み合って構成されています。
今回はHTMLとCSSを最速で効率的に勉強する方法について紹介します。
目次
- 実務経験を積みまくる（ある程度HTMLとCSSができる方向け）
- 本を読んでHTMLの基礎やCSSの書き方を勉強する（まったくの初心者向け）
- オンライン学習サービスで勉強する（まったくの初心者向け）
- 架空のサイトを作る（基礎を理解してる方向け）
- スクールに通う（就職・転職を視野に入れている方向け）
実務経験を積みまくる（ある程度HTMLとCSSができる方向け）
結論から先に説明するとゼロからHTMLとCSSをコーディングして、実務経験を積みまくるのが1番効率の良い勉強方法です。このやり方はある程度HTMLとCSSが書けて、さらにレベルアップしたい人向けです。
何もない状態からHTMLを書いて、CSSを書いてひと通りコーディングができるくらいになれれば、あとは作れば作っただけ、経験や知識が比例的に増えてきます。
ではなぜ経験を積みまくることが1番効率が良いやり方なのか理由を説明します。
自信がつく
1番の理由はゼロからコーディングしてサイトを作れるようになれば、自ずと自信がつきます。この自信がトリガーとなり、さらに複雑なCSSのレイアウト調整だったり、JavaScript使って動きのあるサイトを作ったり、いろんな挑戦にチャレンジできるようになります。成功体験の積み重ねは最強です。
検索力が鍛えられる
CSSを組んでいたらレイアウトが崩れて大変なことになってしまっても、デベロッパーツールを駆使したり、Googleで検索すれば大抵の問題は解決できます。
世の中のわからないことは大体Googleが教えてくれます。
Web制作をしていると、コーディングしてみる→つまずく→Googleで検索する→やってみる→理解する。という一連のサイクルが自然と身についてくるので、どんな語句で検索すれば良いか、という検索力を鍛えることができます。
Web業界では常に新しい技術がたくさん溢れているので、検索力を鍛えることは同時に問題解決能力を鍛えることに繋がります。
実績になる
仕事としてコーディングする案件であれば、経験が積めて、知識も吸収できて、報酬ももらえて、さらにクライアントの都合が良ければポートフォリオとして実績に加えることもできます。実践が最強です。
本を読んでHTMLの基礎やCSSの書き方を勉強する（まったくの初心者向け）
実務なんてまだまだ先の話で、1人でゼロからコーディングできるほど知識がない方や、これからHTMLの勉強をしようとしている方は、まず本を買って勉強してみることをおすすめします。僕も1番はじめは本を買ってやってみることから始まりました。
「はじめてのHTML」「初心者でもわかるHTML」などといった初心者向けの教本を買って、基礎から覚えるやり方が良いと思います。
おすすめはチャート形式（1つのサイトを作ることを目標にして進んでいくタイプ）の本を購入して、何回も繰り返して勉強する反復練習が効果的です。
1度やっただけでは数週間後にはすぐに忘れてしまうので、体で覚えられるまでは反復して学習しましょう。
ここで書籍代をケチってはいけません。本で得た知識はいずれ自分の元にお金として返ってくるので、本への投資はガンガンやっていきましょう。
おすすめの本を紹介します。
オンライン学習サービスで勉強する（まったくの初心者向け）
本で学習できなくても今はネットのオンライン学習サービスで、HTMLやCSSを勉強することもできます。
オンライン学習サービスでは、動画でやり方を見ながらコーディングするタイプと、課題が出題されてコツコツ解いていく、大きく2つのタイプがあります。
有名どころで言うとProgate（プロゲート）やドットインストールが有名です。僕も初心者の頃は良くお世話になりました。
Progate（プロゲート）
Progate（プロゲート）はプログラミング言語ごとにカテゴリが分かれていて、課題をコツコツ解きながら学習を進めるオンライン学習サービスです。
プロゲートのサイト上のテキストエディタに、コードを打ち込んで学習できるので、テキストエディタがなくても手軽に学習できます。
そしてHTMLやCSSの他に、JavaScriptやPHPなどのプログラミング言語も学習することができます。有料プランに加入するとさらに難しい課題にチャレンジすることもできます。
ドットインストール
ドットインストールは動画を見ながら学習するタイプのオンライン学習サービスです。こちらもプログラミング言語ごとにカテゴリが分かれています。
動画の内容は1ステップ10分以内の動画が数多くあり、それをコツコツステップを踏みながら学習していくスタイルです。特徴として動画に出てくる講師の人がとても早口なので、サクサク学習を進めることができます。
架空のサイトを作る（基礎を理解してる方向け）
本やオンライン学習サービスでそこそこ勉強して基礎的な部分は固まってきた、だけどまだまだ仕事として実践するのはちょっと自信がない方は、架空のサイトを作ってみることをおすすめします。
自分で考えた架空のサイトをワイヤーフレームから作り、デザインし、コーディングしてみると、サイト制作の一連の流れを体験することができ、とても勉強になります。
架空のサイトは、企業サイトや飲食店のサイトなど、自分で想像しながら、まるで実物があるようにリアリティを追求して作っていくと実践に近い経験を得られます。
スクールに通う（就職・転職を視野に入れている方向け）
正直言うと、HTMLとCSSくらいであればスクールに通うほどでもありませんが、デザインやサイト制作をひと通り学習して、就職・転職したい方であればスクールに通うことをおすすめします。
スクールなので入学金や授業料などが掛かりますが、PhotoshopやIllustratorを使ったデザイン制作からHTML、CSSをガッツリ勉強することができる環境が用意されています。強制的に勉強できる環境に身をおくことは重要です。
僕は最終的にスクール（デジハリ）に通うという決断をしましたが、卒業してからスクールに通わなければよかったと後悔したことは一度もありません。独学に限界を感じている方はスクールに通うのも1つの手段です。
