HTML/CSSのおすすめの勉強法を解説【プログラミングスクールと独学】

手元にインターネット環境がある現在、Web制作やWebアプリの需要が高まっています。伴って、Web開発の案件も増え続けています。IT人材が不足していると言われている昨今、Web制作やWebアプリ開発は今後も需要のあるスキルと言えると思います。

Web制作やWebアプリ開発に不可欠な知識がHTML/CSSの知識です。HTMLはWebページの文章や構造、画像、動画の表示を行い、CSSはWebページのレイアウトを調整します。HTML/CSSは初心者でも簡単に習得できるスキルですが、勉強法によっては習得までに時間がかかります。

本記事では、HTML/CSSのスキル習得に回り道しない、おすすめの勉強法を解説します。

HTML/CSSの勉強法は独学かプログラミングスクール

HTML/CSSの勉強法は大きく分けて２つあります。独学かプログラミングスクールです。独学ではProgateやドットインストールといったオンライン学習サービスや入門本をもしいて自分で学習を進めるスタイルです。

プログラミングスクールは講師の方が受講者について、プログラミングを教えてもらうことです。通学だけでなく、オンラインのプログラミングサービスも増えており、都会、田舎関係なくプログラミングを勉強することができます。プログラミングスクールでは講師が順立てて教えてくれるので、その通りにすればほぼ間違いなくスキルが身に付きます。

4STEPでできる独学でのHTML/CSS勉強法 

STEP0 独学でHTML/CSSは学べるか

始める前に本当に独学でHTML/CSSができるようになるか不安を感じている方はいませんか？本を買ったけど、書庫に眠っているとか、3日ほどやったけど身についている気がしなくて挫折してしまうなどと感じている人もいると思います。

結論からいうと独学でHTMLを勉強して使えるようになることは可能です。しかし、学習の順番を間違えると難しく感じて、挫折する可能性もあります。HTML/CSSは正しく学べば難しい言語ではありません。

STEP1～4の順でやれば、HTML/CSSを確実に理解しながら勉強することが可能です。ぜひ、参考にしてください。

STEP1 Progateをやる

STEP１としてオンライン上でプログラミングを学習できるサイト「Progate」のHTML/CSSコースをやります。Progateは分かりやすいスライドとブラウザ上で勉強しながら練習のできる環境で初心者でもHTML/CSSを簡単に理解できます。

初級編から上級編まであり、練習問題として1つのサイトを作り上げる道場コースもあります。初級編は無料で利用でき、簡単なWebサイトを作りながら、コードの書き方を勉強できます。

私のおすすめとしては有料コースで上級編までやることです。上級編までやればレスポンシブ対応の基礎を学べます。レスポンシブ対応はスマホが普及した現在において、不可欠なスキルです。

有料コースは1080円/月と高くありません。上級編までは1ヶ月あれば、修了可能なので、本を一冊買ったつもりで投資することをおすすめします。

STEP2 入門書で勉強する

ProgateでHTML/CSSを１周して道場コースもある程度できるようになったら、入門本を用いて勉強することをおすすめします。本よりProgateを先にやることを進めるのは、Progateの方が文字数が少なく、シンプルに書いてあるからです。

その分、Progateは深い知識がありません。不足している分を補足するために入門本を使って勉強します。一周している分、書いてあることが頭に入りやすく、抵抗なく進めるため、途中で止まる回数が少なくなります。

入門本で勉強する場合、途中で止まるとやる気がだんだん下がる傾向があります。そのため、止まる回数をProgateの学習を通じて減らします。また、ProgateでWebページ作成の全体像を把握できているため、本でも自分の勉強の現在地が分かります。

本の理解度は60～80%程度ほどでSTEP3に移ることをおすすめします。なぜなら、実際に自分でサイトを作ることで理解が深まることが多いからです。しかし、60%以下の理解度では躓きすぎて挫折する可能性が高くなるため、60%が最低ラインだち思います。

STEP3　模写サイトを作る

入門本の理解度が60%を超えたら自分のPＣ上で模写を行いましょう。模写は自分のよく見るページや作れそうと思ったページのコードをテキストエディタに書いて、同じようなデザインのサイトを作ることです。

模写サイトを作るメリットは自分の理解している点と理解できていない点を見つけられることです。理解できないところは本やGoogle検索で解決することで自分で問題を解決することができます。

模写サイトを作るのと作らないのでは、HTML/CSSの理解度はかなり違ってきます。自分のよく見るサイトやできそうだなと思ったサイトは2～3個くらい模写して下さい。

個人的にHTMLの模写におすすめのサイトを下に挙げています。

• Write
• PAS-POL
• https://haniwaman.com/sample/part3/template_08/

STEP4　オリジナルサイトを作る

模写サイトを2～3つ作ったらオリジナルサイトを作ってみることをおすすめします。デザインに悩んだりすると思いますが、自分の思うがままに作るのが一番スキルが上がります。どうしても浮かばない場合は、他のWebサイトをアレンジします。

テーマは自分の趣味や所属しているサークルのサイトを想定して作るといいと思います。また、自己紹介のためのサイトもOKです。とにかく自分で動かして、思った通りのページを作ることが大切です。

独学のメリットデメリット

独学は勉強コストが低いのが大きなメリットです。Progateと本１冊と考えても5000円あれば十分です。さらに、教えてくれる人がいないので、自分で調べて解決する能力が向上します。プログラミングは思い通りにいかないことが多々あります。そんなとき、挫折せずに粘り強く解決できる能力は独学の方がつきやすいと思います。

一方で、分からなくなった時に挫折しやすいというのがデメリットです。プログラミングスクールでは講師の方がわからないことをすぐに教えてくれます。しかし、独学ではそうはいきません。

プログラミングスクールのメリットデメリット

プログラミングスクールのメリットは講師の人がわからないところをすぐに教えてもらえることです。また、講義を通じてポートフォリオにも使えるサイトを作ることができるスクールもあります。また、転職を斡旋しているスクールもあるので、転職を考えている人には有利でしょう。

一方で、スクールは安くても10万円はかかるので、独学より勉強のコストが高くなります。しかし、確実にスキルを身に着けることが可能です。

まとめ

HTML/CSSはWeb開発において不可欠な知識です。Web開発のプログラミング言語としてPHPやRubyがありますが、HTML/CSSを理解していなければいくら勉強しても理解することは難しいと思います。

HTML/CSSはWebページの作成だけでなく、Webアプリの開発でも根幹となるスキルです。Progateや入門本を使って基礎知識は知っておく必要があります。そして、より早く習得するために実践することです。

基礎知識さえあれば、開発を進める中で理解が深まります。そのため、本記事の勉強法を通じて、最初に網羅的に基礎知識を身に着けることをおすすめします。