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

記事内に広告を含みます

この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

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

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

[voice icon=”https://sunmaru.net/wp-content/uploads/2018/05/man-4.png” name=”” type=”l”]最初に聞いておきたいんだけど、勉強する前に押さえておくポイントとかってあるの？[/voice]

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

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

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

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

大事なことその１：うまくいかないのは機械がわかっていないから

コーディングを進めていくと、なぜかやりたいことがうまくいっていないことが多々あります。

でもそれを『なぜかできない…』で終わらせるのではなく、

どうしてできないのか
どうしたらうまくいくか

を考えるのはとても大切です。

誰かと仕事をしているときを想像してください。

指示を出して、思い通りにやってくれないことがあったとき、次に上手くいくようにしておかないと二度手間ですよね？

プログラミングもそうですが、HTML・CSSも上手くいかなかったときに、次につなげるのが大切です。

人間と違って、機械はできること・できないことがはっきりしているので、うまくいかない理由もはっきりしているはずですし、うまくいく方法もはっきりしているはずです。

HTMLやCSSをやることは機械に指示を出しているということを忘れないでください。

大事なことその２：動作確認はこまめに実施する

作業していると、集中してしまってついついひたすらコードを書いていることがあります。

でも、たまには休憩がてらコードの動作確認をしてください。

あとからまとめて確認作業を行うのもよいのですが、どこまでうまくいって、どこからうまくいかないのかを知ることは、解決策を探る上で効率的です。

また、機械ができること・できないことははっきりしているのですが、できないことをできないままにして作業を進めると、できないことをしている部分より先に悪影響が出ることが多々あります。

そうすると、解決するのにも時間がかかってしまってつまづく原因になります。

プログラミングを学習する際にも同じことが言えますが、動作確認はこまめにしましょう！

まとめ

機械に指示を出しているということを忘れない
細かく動作確認をする

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

[voice icon=”https://sunmaru.net/wp-content/uploads/2018/05/woman-7.png” name=”” type=”l”]まずは何から手を付ければいいんだろ…？[/voice]

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

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

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

なぜなら、

ゲーム感覚で進めることができる
説明がスライドでわかりやすい
自分のローカル環境に環境構築が不要

といった理由からです。

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

できないから
楽しくないから

というのが多いです。

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

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

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

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

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

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

Progateで無料で学習をはじめる

まとめ

ProgateのHTML&CSSレッスンの学習コースでサイトを作る楽しみを感じる
どんな風にWebサイトが作られているのかを理解する

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

[voice icon=”https://sunmaru.net/wp-content/uploads/2018/05/man-1.png” name=”” type=”l”]Progateの学習コースを終わらせたぞ！[/voice]

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

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

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

Progateとドットインストールの違い

Progateとの違いは、ドットインストールは動画でレッスンを公開してます。

講師の方が動画上で実際にコーディングしながら説明をしてくれます。

受講するこちらはそれを見ながら、どうようにコーディングしていきます。

ProgateではProgate上のエディタを使ってコーディング・確認をしていきましたが、ドットインストールでは自分のPCに学習環境を構築します。

恐らくProgateでどういうことをしてHTMLとCSSを学んでいくかつかめたと思うので、この環境構築の動画を見て、なにをするか理解することができると思います。

ドットインストールのいいところ

ドットインストールの動画は１つ３分程度と短めです。

隙間時間などをうまく使って受講を進めることができます。

また、Progateよりも学べることが多いです。

Progateで基礎を学びつつ、足りない知識をドットインストールで補うのがよいでしょう。

ドットインストールの学習手順

ドットインストールにはHTMLとCSSに関してだけでも、いくつかのレッスンがあります。

プログラミング学習に向けてHTMLとCSSを学ぶのであればすべて受講する必要はありません。

『HTML/CSSの学習環境を整えよう』の自分の環境に合った方
HTML入門 (全15回)
CSS入門 (全17回)

この３つを受講すればProgateと合わせると基礎はばっちりです。

Progateと重複する部分もありますが、そこは大事なところだと思って復習してみてください。

もし学習してみて、楽しくなってきた、興味を持ってきたのであれば、ほかのレッスンも受講してみるとよいですね！

ドットインストールで無料で学習をはじめる

まとめ

自分のPCに学習環境を整える
Progateで学んだことを復習しながら、新たな知識も身に付けていく

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

[voice icon=”https://sunmaru.net/wp-content/uploads/2018/05/woman-13.png” name=”” type=”l”]だいぶ知識が身についた気がする！[/voice]

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

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

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

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

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

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

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

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

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

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

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

会費は月額980円です。

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

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

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

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

まとめ

頭で考えて手で動かして身につける

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

[voice icon=”https://sunmaru.net/wp-content/uploads/2018/01/man-2.png” name=”” type=”l”]プログラミングの学習がしたかったけど、HTMLとCSSも面白い！もっと知りたい！[/voice]

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

本格的なWebサイトを作るにはもっと幅広い知識が必要
全体像を学習できる
ところどころバージョンが古いので、自分で調べる必要がある

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

[voice icon=”https://sunmaru.net/wp-content/uploads/2018/03/woman-3.png” name=”” type=”l”]Webサイトのコーディングを仕事にするのも楽しいかも…[/voice]

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

LancersのHTML・CSSコーディング案件を見る

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

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

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

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

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

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

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

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

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

まとめ

仕事で役立つツールも学べる
コーディング力以外も身に付く

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

[voice icon=”https://sunmaru.net/wp-content/uploads/2018/05/man-14.png” name=”” type=”l”]HTMLとCSSの考え方がだいぶわかってきたぞー[/voice]

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

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

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

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

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

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

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

POINT

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

機械に指示を出しているということを忘れない
細かく動作確認をする

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

ProgateのHTML&CSSレッスンの学習コースでサイトを作る楽しみを感じる
どんな風にWebサイトが作られているのかを理解する

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

自分のPCに学習環境を整える
Progateで学んだことを復習しながら、新たな知識も身に付けていく

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

頭で考えて手で動かして身につける

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

本格的なWebサイトを作るにはもっと幅広い知識が必要
全体像を学習できる
ところどころバージョンが古いので、自分で調べる必要がある

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

仕事で役立つツールも学べる
コーディング力以外も身に付く

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

STEP3までやったらあとは自分で作ってみる
手と頭を使うことが理解が深まる一番の近道

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

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

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

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

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

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