基本からわかる！初心者でもできるHTML&CSSの学び方3STEPとは？

プログラミング初心者の方へ、プログラミングを勉強するならHTMLとCSSを学ぶのがよいとおすすめしました。

しかし、実際に勉強しようとするとどうやって勉強すればいいのか、わからない方も多いのではないでしょうか…？

この記事では、HTML・CSSを学びはじめようとしている方に、わかりやすく楽しく学べる学習方法をお伝えします。

市販の本で勉強しようにも、いろいろな種類があってどれがいいのかわからない…

本だけでなくてオンラインサービスまでたくさんでどれから手をつければ…

教材がありすぎてどれがいいのか大混乱…

HTMLとCSSに限らずプログラミングの学習や資格の勉強ではよくある話ですね…！

わかりやすくて、やってて楽しくないとなかなか続かないというのがホントのところ。

そんなあなたにどういうサービスを使って勉強すれば楽しく続けられるかをお伝えします。

この順番で学習をすすめれば、さほどコストもかからず挫折せずにHTMLとCSSを学習できますよ！

HTMLとCSSをできるようになって、Webサイトを作っている姿を想像するとなんだかワクワクしますね！

初心者がHTMLとCSSを学ぶのに大事なこと

最初に聞いておきたいんだけど、勉強する前に押さえておくポイントとかってあるの？

という方のためにHTMLとCSSを学びはじめる前に、まずは大事なことをお伝えしておきましょう。

それは、HTMLとCSSを使って、機械（コンピューター）に指示を出しているということ。

機械にはできることと、できないことがはっきり分かれています。

このできることと、できないことがはっきり分かれているということで、大事なことが２つあります。

STEP1 Progate（プロゲート）のHTML&CSS学習コースで基礎を学ぶ

まずは何から手を付ければいいんだろ…？

そんな方にはまずは『Progate（プロゲート）』をおすすめします。

Progateはプログラミングのオンライン学習サービスのひとつです。

HTMLとCSSを学習する際にはまずはProgateで勉強しはじめるのがおすすめです。

なぜなら、

といった理由からです。

プログラミングなどのコーディングの勉強を挫折してしまう理由は

というのが多いです。

このProgateでは多くの方がつまづく『ローカル環境への環境構築』をしなくていいように工夫されています。

学習内容自体もスライドでわかりやすく丁寧に説明されているので、スラスラ進めます。

また、課題をクリアすると経験値がもらえ、レベルが上がっていきます。

このレベルの上昇が向上心を引き立ててくれます。

ProgateのHTML&CSS学習コースは無料で受講できるのもうれしいですね。

勉強する側が挫折しない・楽しめる工夫がされているProgateでウォーミングアップしましょう！

STEP2 ドットインストールのHTML入門・CSS入門で広く浅く押さえる

Progateの学習コースを終わらせたぞ！

Progateで概要をつかんだら、次はドットインストールで学習しましょう。

ドットインストールもProgate同様、無料でプログラミングが学べるオンラインサービスです。

そのレッスンにいくつかHTMLとCSSの学習があります。

STEP3 Progate（プロゲート）のHTML&CSS道場コースで自分で考える

だいぶ知識が身についた気がする！

この段階まで来ると、そう思う方も多くなってきたのではないでしょうか？

Progateの学習コースとドットインストールでの学習がすめば、HTMLとCSSで必要な知識は一通り学習済みです。

今度は学んだことを駆使して、実際に頭と手を動かしてみましょう。

Progateの道場コースは『こういう風になるように作ってください』と指示が与えられます。

その指示が実現するようにWebサイトを１から作っていきます。

どれもこれまで学んできたことなんですが、１からコードを書くとなるとなぜか苦戦…

試行錯誤しながらサイトを作っていく過程は最も勉強になります。

わからないことを調べる力も身につくので、ここは踏ん張りどころですが頑張ってみましょう。

なお、出てくる内容はすべてProgateの学習コースで学んだことです。

行き詰ったときは、悩むよりも学習コースに戻って学びなおすのがスムーズに進めるコツです。

道場コースを受講するには有料会員になる必要があります。

会費は月額980円です。

HTMLとCSSの道場コースを受講するだけであれば、１か月で十分かと思います。

あれこれ本を買うよりは安いので、ちょっとした出費となりますが有料会員になるのも悪くはないですね。

ぼくは有料会員継続中です。

HTML&CSSを卒業してほかのプログラミング言語を学ぶときにも、この流れで学習できるのでしばらく有料会員継続です！

もっと網羅的に学びたいならUdemyの『【世界で30万人が受講】フルスタック・Webエンジニア講座』がおすすめ

プログラミングの学習がしたかったけど、HTMLとCSSも面白い！もっと知りたい！

という方もいるのでは…？

ここまでHTMLとCSSを学習すると、すでにある程度十分な知識は身に付きます。

しかし、世の中のWebサイトはProgateとドットインストールで学んだことで全てできているわけもなく…

他にもさまざまな構成要素があるのですが、それらを網羅的に学べる講座がUdemyにはあります。

それが『【世界で30万人が受講】フルスタック・Webエンジニア講座』。

この講座では、学習環境の構築からはじまり、HTML・CSSはもちろん、Webページを動的に動かす方法、デザインを簡単にするツール、ブログサービスなどWebに関することが一通り学べます。

２０１７年に作成された講座なので、内容（バージョン）に古い部分がいくつかあります。

新しいバージョンについて、調べながらの学習になるので少々ハードルはありますが、興味があって調べられる人にとっては得るものが多いのではないでしょうか。

もっと広く・深く学習してみたくなった方は、ぜひ受講してみてください！

ちなみにUdemyの講座は定価で買ってはいけません！

よくセールが行われていて、だいたい１,２００円～１,４００円程度で売られているときが買い時です。

本一冊買うつもりで受講するのがよいです！

UdemyでWebエンジニア講座の価格を確認する

本格的に仕事にしたいならTechAcademy（テックアカデミー）を受講

Webサイトのコーディングを仕事にするのも楽しいかも…

と思ってLancers
でコーディングの案件を見ると、意外と仕事が見つかるものです。

ここまで学習して、知識・スキルが身について仕事にしてみたいと思う方もいるかもしれません。

そんな方はTechAcademy（テックアカデミー）を受講してみてはいかがでしょうか？

現役エンジニアから指導してもらいながら、Webサイトのコーディングを学ぶことができます。

学習の過程では、実際にエンジニアの方が使うチャットツールやデザインツールも学べます。

Webサイトに関する講座では『フロントエンドコース』と『Webデザインコース』がおすすめです。

クライアントから提示されたデザインに動きをつけてきれいにコーディングしたい方は『フロントエンドコース』を、あまり動きがないサイトを白紙ベースで作れるようになりたい方は『Webデザインコース』を受講するのがおすすめです。

ぼくも『Webデザインコース』を受講したのですが、これまでデザイナー視点でWebサイトを見たことがなかったので、非常に勉強になりました。

プログラミング講座の無料体験も実施しているので、興味のある方は一度体験してみるのもよいですよ！

TechAcademyのプログラミング無料体験を受けてみる

基礎が分かれば成長への道筋が見えてくる

HTMLとCSSの考え方がだいぶわかってきたぞー

と思えるくらいまで、STEP1からSTEP3までを実践すればHTML・CSSは身につくでしょう。

あとは身につけた基礎を元に、頭と手を動かしてスキルを磨いていくのみ。

この段階になったら成長めざして『模写』に取り組みましょう！

『模写』とは既存のWebサイトを見て、真似してコーディングしてみることです。

この模写に関してはまた別な記事を近日公開予定です。

詳しくはそちらをお楽しみに！

まとめ：初心者でもできるHTML&CSSの学び方はProgate→ドットインストール→Progate

この記事では、HTML・CSSを学びはじめようとしている方に、わかりやすく楽しく学べる学習方法をお伝えしました。

ここではHTMLとCSSの勉強法をお伝えしましたが、Progateとドットインストールにはプログラミング言語のレッスンも用意されています。

今回のHTMLとCSSの場合と同様の手順でプログラミングも学ぶことができます。

HTML・CSSを学習して、コンピューターへの指示の出し方のイメージをつかんだら、目的たっだプログラミングへ挑戦するのもおすすめです！

ひととおり学習すると、自分がどこを目指したいかということも明確になってきます。

その目標目指して、ゆっくり歩んでいきましょう！

以上、エンジニアサラリーマンの３まる(@3sunmaru)でした！