HTML/CSSの入門にはProgateがおすすめ！学習法も解説します

2021/01/06

( 更新日：2022/04/20 )

副業やフリーランスになるためのスキルとしてWeb制作が注目されています。Web制作をする上で避けて通れないのが、HTML/CSSです。HTML/CSSはWeb制作の入門なので、しっかりと学習を進めていきましょう。

HTMLはWebページの構成を、CSSは見た目やレイアウトを整えるための言語です。HTML/CSSなしでWebサイトを作ることはできません。

この記事ではWeb制作の入門であるHTML/CSSを学習するサービスとしてProgateを紹介します。初めて勉強する方にはおすすめの勉強法もあるので、参考にしてください。

HTML/CSSの入門にはProgateがおすすめ

ProgateはHTML/CSSをはじめとするプログラミング言語の学習サイトです。HTML/CSSの基礎であれば、無料で学ぶことができます。イラストとスライドが分かりやすく、未経験の入門者でも理解しやすいです。

Progateは無料コースと有料コースがあります。無料コースはHTML/CSSの初級編と中級編、上級編の一部のみです。有料コースは月額1080円で、全てのレッスンを受けれます。

無料コースで学習してみて、自分が続けられそうであれば、有料コースの登録をしてみましょう。HTML/CSS上級編まで学習することが出来れば、それなりのコーディングスキルを身に着ける事ができるはずです。

ProgateはWebサイトを作りながらHTML/CSSの基礎を学ぶ事ができます。HTML/CSSコースの初級編は無料です。初級編でも、簡単なWebサイトを作りつつ、HTML/CSSの基礎を学習できます。

実際のWebサイトを作る事で効果的に学ぶ事ができます。HTML/CSSを使えるようになるには書き方やルールを理解しなければいけません。しかし、覚えるだけでは、実践することは難しいです。

Progateは実践するためのツールが無料で提供されているので、入門者が試しで始めてみるのに最適な学習サービスです。

Progateはスマホアプリ版も提供しています。そのため、通勤通学の電車の中や休憩時間に学習することが可能です。HTML/CSSを早く習得するには短時間でもコードに触れることが大切なので、入門者にはおすすめです。

ただしスマホ版はコードを書かずに穴埋め問題になっているので、スマホ版のみでの習得は難しいです。スキマ時間にスマホ版で予習し、PC版で復習するという使い方がおすすめです。

Progate以外の学習ツールではドットインストールがおすすめです。ドットインストールもオンラインでプログラミングを学習できるサービスです。HTML/CSSの基礎であれば無料で学べます。有料プランの場合も、Progateと同じ1080円です。

ドットインストールの良い点は、Progateに比べると基礎を深くまで解説していること、Bootstrapと呼ばれる簡単にWebページの見た目を整えるCSSフレームワークのレッスンがあることです。しかし、ドットインストールはIT知識がないとわかりにくい部分もあります。

個人的には、今までITに関わっていない人にとってProgateの方が理解しやすい印象を持っています。

HTML/CSSの入門として、Progateの初級編を終わらせましょう。

そして、HTML/CSSの初級編を終わらせたら、有料プランに登録するのがおすすめです。HTML/CSSのみであれば、1ヶ月あれば全てのレッスンを終わらせられるでしょう。

HTML/CSSの入門書は1冊約1300円～なので、本を購入するのと同等程度の価格で学べます。もし、Progateが合わないと思えば、無理に有料プランにする必要はありません。入門書やドットインストールに切り替えましょう。

Progateには道場コースという設計書からWebサイトを作るというレッスンがあります。道場コースでつまづく人は多いです。わからない場合は一旦諦めて、答えを見てどんどん先に進みましょう。

実はYouTubeにも、HTML/CSSの動画教材が無料でアップされています。

「YouTubeで学ぶ事ができるなら、お金を払ってProgateを使わなくても良いのでは？」と思う人もいるかもしれません。しかし、動画と違ってProgateはコードを書きながら学べるため、一度はやってみる事をおすすめします。

プログラミングは注目されている働き方なので、多くの人がYouTubeに動画を上げています。HTML/CSSの入門動画も多いので、自分に合った動画を選んで学習を進めると良いでしょう。

HTML/CSSに慣れてきたら、自分のよく見るページや作れそうなページを作っていきましょう。メモ帳のようなテキストエディタがあれば、誰でも作ることができます。実際に手を動かすことで、より実践的なコードの書き方を学べます。

わからない事や思うように動かない場合は、Googleで調べてみてください。それでもわからない場合は一旦「仕方ない」と諦め、次のコードを書いていきましょう。ふとした瞬間に分かることもあります。

模写は完璧を求めないことが重要です。手を動かして、自分の書いたコードでページが作られていくことを実感していければ、学習のモチベーションが上がり、習得が早くなります。

HTML/CSSの入門者が学習を始めるためのツールとしてProgateを紹介しました。Progateでの学習が良い理由を以下にまとめます。

皆さんもぜひ、参考にしてみて下さい。