HTMLとCSSは独学できる！コツと意識するべき注意点【プログラミング初心者】

プログラミングを始めたいんだけど、HTMLやCSSって独学できるのかな……
結論からいうと「独学は可能です」。僕は、プログラミングを独学しました。今では継続的に、Web制作のお仕事をいただくこともできています。その経験をもとに、今回は、HTMLとCSSを独学する方法について詳しく解説していきますね。

「プログラミングの独学って可能なの？」
このような悩みを持っている初心者さんは、多いと思います。

HTMLとCSSの独学って、一見難しそうに感じるかもしれませんが、実は可能だったりします。

  • HTMLとCSSを独学する方法って…？
  • HTMLとCSSを独学のコツを知りたい…
  • 独学してお仕事を受注できるのか知りたい…
  • もし独学に限界を感じたらどうすれば…

そんな悩みを解決できる記事を用意しました。

HTMLとCSSを独学する方法

プログラミング学習って、まずはHTMLとCSSからですよね。独学に挑戦したいのですが、実際にどうやって独学していけばいいのでしょうか…。
実は、独学でHTMLとCSSを学ぶ方法はたくさんあります。今は、良質な学習サイトも多く、安いものだと「月額1,000円」で学習することも可能です。

学習サイトを使ったり、動画教材を使ったり、メンターをつけたり、実はプログラミングを独学する方法ってたくさんあります。私は、プログラミングを独学で学び、Web制作案件をいただくことができています。

私の経験を踏まえて、HTMLとCSSを独学する方法について詳しく解説していきます。

独学の前に、まずはHTMLとCSSの役割を理解すること

HTMLとCSSを独学する前に、まずは知っておくべき重要なことがあります。
それは「プログラミング言語の役割を知る」ということです。

「今、自分が“何”を学んでいるのか。」これを理解していない状態で、学習を進めてしまうと、挫折してしまう確率が非常に高くなってしまいます。

実は、プログラミングを始めた人のうち、95%の人は挫折してしまいます。

えっ…、95%も挫折するんだ……
そうなんです。挫折しないためにも、「今あなたが、何を学んでいるのか」これを事前に理解しておくことが、とても重要になります。

HTMLとCSSの役割を知る

まずは、これから独学していくHTMLとCSSについての役割をしっかりと理解しておく必要があります。
HTMLとCSSについては、下記の記事に詳しくまとめています。

関連記事
【初心者向け】HTMLとCSSの基本を17枚の画像を使って丁寧に解説！

上記の記事を読んでから独学を始めると、スムーズに理解できるようになるはずです。

HTMLとCSSを独学で学ぶコツ

HTMLとCSSの役割の理解ですね。なんとなくは理解できました。でも……、やっぱり独学で続けていけるのか不安です……。何かコツみたいなものはありますか？
そうですね…。独学は挫折する可能性が非常に高いので、工夫をしなくてはなりません。

HTMLとCSSにかかわらず、プログラミングの独学は想像以上にハードです。
前述もしましたが、私の周りでは「約95％」の人が挫折していました。

まずは、独学のコツを掴んで、残りの5％に入る工夫をしていきましょう。
HTMLやCSSの独学に気をつけること、工夫することをご紹介します。

学習を習慣化させる

これはどんなことにも言えることですが、HTMLやCSSを学習することよりも何よりも、継続することの方が何倍も難しかったりします。

そのため、毎日の学習への取り組みを、習慣化させていくことが大切です。
そして、毎日コードに触れていきましょう。

習慣化のコツとしては、休みを挟まないことです。

習慣化させるコツ

  • 1日も休まない
  • 1日30分の作業でも毎日やる

なるほど…。まずは怠けることをやめることから始めるんですね。

早い段階で“成功体験”を味わう

HTMLとCSSは、Webページを制作する役割を担っています。
ということは、早くこの段階を経験することが重要だったりします。

学習サイトや、参考書を読むだけでは、なかなかこの部分に触れることができません。

できるだけコードに触れて、自分自身でWebページを制作することを、早い段階で体験していくようにしましょう。

成功体験を味わうコツ

  • エディタを使って自分でコードを書いてみる
  • 覚えたことは、すぐに実践してみる
  • どんな小さなことでもいいので自分で実行してみる
    例：例えば画像を表示させる。とか

確かに、これすごく重要ですね。学習ではいつまでも、できた「つもり」なので、実際に自分で作ってみて『成功体験』を重ねていくということですね！
そうなんです。実は挫折する人の多くは『自分でWebサイトを作る楽しさ』に、触れる前に辞めてしまうんです。だから早くここに触れていくべきなんです。

Twitterをはじめる

プログラミング独学って、孤独なんですよね。
一人でやっていると、挫折する可能性が上がってしまいます。

そうなんですよね…。私もそこが心配で……
今は、独学でも頑張っていけるための環境って、たくさんあるんですよ。例えば僕の場合は、プログラミング独学と同時に、Twitterも始めました。これが大きなターニングポイントになりました。

プログラミング独学と、Twitterを併用することで得られるメリットはたくさんあります。これから独学をしようと考えている人は、Twitterの運用もしたほうがいいです。

独学するためにTwitterを使うコツ

  • Twitterで宣言することでサボれなくなる
  • 同じ境遇の仲間が集まる
  • いいねやリプで、モチベーションが上がる

初心者向けコミュニティに入る

あと、オンラインサロンや、コミュニティに入るのもいいですね。仲間と繋がれて、独学が楽しく継続できるようになります。

私は、プログラミング初心者向けのオンラインコミュニティを運営していますが、みなさん継続できています。独学していく中での仲間の存在は、やっぱり大きいです。

POINT

  • コミュニティに入ると仲間ができる
  • 困った時に質問できる
  • コミュニティごとに、様々なイベントがある

HTMLとCSSのおすすめ独学方法

ふむふむ…HTMLとCSSを学ぶコツや工夫がわかりました。とりあえずTwitterも一緒に始めてみようと思います！

でも、いざ独学を始めようと思っても、何をしていいのか…まだフワフワとわからない状態です。どこで勉強すればいいのかわからないんですが……
確かに、何をやればいいのか悩みますよね。僕がプログラミング独学で、取り入れてきた方法を、1つずつご紹介させていただきますね。

HTMLとCSSを独学するための、おすすめの方法は下記の通りです。

  • 学習サイトを利用する
  • 自分に合う教材を参考にする

それぞれ詳しく解説していきます。

学習サイトを利用する

HTMLとCSSの独学で一番いい方法は、学習サイトで学ぶこと。
これが一番手っ取り早く、プログラミングに触れることができます。

すぐに、HTMLとCSSにも触れることができるため、独学には最適のコンテンツとも言えます。

Progate

progate
≫Progateはコチラ

Progateは、初心者でも学習しやすいように工夫された、プログラミング学習サイトです。
用意された環境で、すぐにコードを書くことができるので、気軽にプログラミングを体感することができます。

Progateの画面

Progate

Progateは、僕が最も利用させていただいた学習サイトです。ここで基礎を学び、Webページの制作ができるようになりました。

そうなんですね！さっそくProgateを試してみます！

教材を利用する

学習サイトだけではなく、プログラミング教材を使って学習するのもおすすめです。
今は、低価格で優良な教材がたくさんあります。

Udemy

Udemy
≫Udemyはコチラ

Udemyは、主にプログラミングの動画教材を販売しているサービスです。
テキストを読みながら学習するのが苦手な人には、Udemyの動画学習が非常にオススメです。
※Udemyの学習教材は、ほとんどが有料です。

POINT
Udemyでは頻繁にセール販売を行っており、普段は高額な商品も…1200円とお得に買えるようになります。買うときはセール期間を狙って購入するようにしましょう。クオリティが高い動画が揃っているのでオススメです！

note：ロードマップ（学習手順）

note

実際に、結果を出している人の『学習手順』を参考に進めていく方法です。
何を学べばいいのか、具体的な手順が記されているため、迷うことなくプログラミング学習を進めることができます。

noteは、個人がコンテンツを販売できるプラットフォームです。プログラミング学習だけに関わらず、幅広いジャンルのnoteが配信されています。

実は、私もnoteを配信しています。
プログラミング初心者から、半年で33万円稼げるようになった学習の全手順を記録しています。

note



プログラミング初心者から、半年で33万円稼げるようになった学習の全手順

上記のnoteには、特典もご用意しています。

  • 作業動画を公開
  • テンプレートコードの配布
  • 完成したWebサイトのコードの配布
  • PHPで作ったWebサービスのコード一式を配布

気になる方は、ぜひ参考にしてみてください。

なるほど、HTMLやCSSの独学方法っていろいろとあるんですね。この中から自分に合いそうなものを試してみようと思います！
はい、ぜひいろいろと試してみてください！ですが、1つだけオススメしないものがありまして…。それは『参考書を使って学習すること』です。ちょっと詳しく解説してみます。

参考書の学習がオススメできない理由

実は、参考書を使う学習方法は、効率が悪かったりします。
文字を読み、1つずつパソコンでコードを打ち込むのが非常に面倒ですし、1ページ1ページ進めていくと非常に時間がかかってしまいます。

もし参考書を使う場合は、下記のことを意識しておくといいです。

参考書を使う場合の注意点
  • 参考書をメイン学習してはいけない
  • 参考書は、わからなかったときの辞書的役割にする
  • 移動などの隙間時間には有効
実際に僕も、参考書を使って学習を進めてた時期があったんですが…1/4くらい進めたところで、効率が悪いと思って使うのをやめてしまいました。

そうなんですね。やっぱり参考書より学習サイトなどを使った方が、早く学習できましたか？
はい、全然違いました！参考書はメインとして利用するのではなく、困った時の辞書代わりにするなど、サブ的要素で使うのがオススメです。

HTMLとCSSを独学するときの注意点

独学は、教えてくれる講師がいないので、間違った手順で進めてしまう可能性が非常に高いです。
正しい手順で独学を進めるために、下記の項目をしっかりと意識して、独学に取り組んでみてください。

  • 学習だけで終わらせない
  • アウトプット学習でサイトを模写する
  • 自分の作品を作る

なるほど…独学には注意点もあるんですね…
はい。独学は間違った方法で進めてしまうと、挫折してしまいます。ですので、必ず注意しておきたい点があるんですね。

学習だけで終わらせない

学習サイトを使って独学を進めると、いつのまにかプログラミングができた「つもり」になってしまいます。

実は、このまま次のステップへ進んでしまうと、非常に危険です。
いざ、お仕事やWeb制作をしてみようとすると、驚くほど何もできません…。

できた「つもり」のまま、プログラミング学習を次のステップへ進めてしまうと、いざ自分でWebページを作ろうとした時に、非常に苦労してしまいます。
“できた「つもり」” を、「できる」に変えていかなくてはなりません。

そこで必要なのが「アウトプット」です。

アウトプット学習でサイトを模写する

アウトプットでサイトを模写する、とはどういうことなのでしょうか？
これまでに学んできた「HTMLとCSS」の知識を使って、既に存在しているWebサイトを真似て作ってみるということです。

アウトプットをすることで、今の自分のスキルをしっかりと確認することができます。

具体的なアウトプットは、下記の手順で進めていきます

  1. エディタをダウンロード
  2. 作れそうなサイトをネットから探す
  3. 見た目が同じになるように、自分でコーディングをしてみる
アウトプットで模写をする意味

アウトプット模写をする最大の利点としては、

  • 新しい知識に気付ける
  • しっかりとスキルアップできる

という部分です。

なるほど…！学習だけでは気づけなかったこと、学んでこなかったことを、アウトプット模写することで気付けるということですね。それは確かに成長になりますね。
そうなんです。学習だけだと、どうしても知ることができない部分ってたくさんあるんですよね。アウトプットすることで、新しい知識に気付くことができ、しっかりと自分のスキルも成長できるいうことですね。

模写する際のポイント
模写をする際は、少し難しいなと思うサイトを選ぶようにしましょう。
「このサイトは簡単に作れそう」というものを選んでしまうと、あまり成長はできません。
コードを書くツール「エディタ」について

アウトプット模写をする時、HTMLとCSSのコードを自分で書かなくてはなりません。その時に使用するものが「エディタ」というツールです。

エディタについては、下記の記事に詳しくまとめていますので、ぜひ参考にしてみてください。

関連記事
HTMLとCSSにおすすめな無料エディタ3選【プログラミング初心者必見】

HTMLとCSSの独学に限界を感じたら？

とはいえ、独学は結構むずかしかったりもします。
人によっては、誰かに教えてもらうから成長できるという人もいるはずです。

たしかに…もしかしたら、私は誰かに教えてもらう方が合っているかもしれません……
もちろん、独学が全てではありません。人に教えてもらうことで、急激に成長できる方もいらっしゃいます。

学習方法は人それぞれです。挫折しないためにも、しっかりと自分に合った方法で、HTMLとCSSを学習していきましょう。

最短で習得するにはスクールがオススメ

プログラミングスクールは、その名の通り、プログラミングを学ぶための学校です。
もちろん、教えてくれる講師がいるので、安心して学習することができます。

HTMLとCSSの入門コースもありますので、気になる方はここから始めてみてもいいかもしれません。

TechAcademy

最短4週間で未経験からプロを育てるオンライン完結のスクールです。
オンラインで受講できるので、どこかに通う必要なく、自宅でもプログラミングを学ぶことができます。
≫TechAcademy「はじめてのプログラミングコース」

POINT
「実際にどういうものかを体験してみたい」 という方は、こちらの無料体験コースがオススメです。
≫TechAcademy「プログラミング無料体験」

TECH::EXPERT

プロのプログラミングスキルが身につく学習プログラムと、キャリア支援により、未経験からのエンジニア転職を実現。※無料カウンセリングもあります。
≫TECH::EXPERT

POINT
TECH::EXPERTは、一度入るとエンジニアとして、就職できるまで徹底的にサポートしてくれます。なんと、TECH::EXPERTでは、未経験から97%の受講生が転職に成功しています。

メンターを見つける

あなたのプログラミング学習を導いてくれる講師のような人（メンター）を見つけることも有効ですね。いつでも質問できる環境を用意するのは、プログラミング学習には大切なことです。

≫MENTA というサービスで、プログラミング専門のメンターを見つけることができます。

HTMLとCSSの独学後に仕事を取る方法

HTMLとCSSを独学して、ある程度できるようになったら、お仕事も取ればいいなぁと思っているんですが。お仕事ってどうやって取ればいいんでしょうか…？

お仕事を取る方法は、クラウドソーシングへの応募や、制作会社への営業などがあります。
その前に、まずはHTMLとCSSでどのようなお仕事が取れるのか、を把握しておきましょう。

HTMLとCSSで応募できる仕事内容

HTMLとCSSで出来る仕事内容としては、ランディングページ（LP)の制作や、静的なWebページの制作などになります。

静的なWebページ……？
簡単にいうと、更新などの機能がないWebページですね。

仕事を取る方法

前述もしましたが、お仕事を取る方法としては、クラウドソーシングへの応募や、制作会社への営業などが考えられます。

最も人気が高いクラウドソーシングは下記の３サイトです。

上記3サイトは、登録をすると、現在募集中のお仕事一覧が確認できます。「どのようなWeb制作の仕事があるのか」を見るだけでも、勉強になります。

なるほど、どのような仕事があるのかを知ることで、勉強もしやすくなりますね！さっそく登録して、案件を確認してみます！

HTMLとCSSの独学から次のステップへ

HTMLとCSSを習得したら、次の言語を学んでいきましょう。
HTMLとCSSは、Webサイトを作るための基本レベルなので、他にできることをもっともっと増やす必要があります。

むむむ…そうなんですね。プログラミングって今の言語を習得したら、次へ次へと進んでいく感じなんですね。
そうですね、詳しくいうとHTMLとCSSまででも大丈夫ではあるんですが、他の言語や知識を入れることで、お仕事の幅が広がりますし、報酬も増えてきます。

そうなんですね。じゃあ次へ進む意識をします！
とはいえ、次は何を学べばいいのかわからないんですが……

プログラミングは「次のステップ」に進む時に、迷ってしまうことがよくあります。予め目標を定めて、それに沿ったロードマップを進めるのが一番いいですね。

HTMLとCSSの独学後に学ぶべき項目を2つご紹介いたします。

Bootstrap

CSSを効率化してくれるフレームワークです。Bootstrapを覚えておくと、Webサイトを制作する時間を、大幅に減らせることができます。是非習得しておきたいですね。
≫Bootstrap 公式サイト

POINT
Bootstrapを学ぶには、こちらのYoutube動画がオススメです。是非参考に学習してみてください。
≫Bootstrap4 入門（全9回）
javascript

JavaScriptは、Web制作において必須ともいえる存在です。
現在では、ほぼ全てのWebサイトでJavaScriptが使用されています。

JavaScriptで出来る内容は様々ですが、その中でもよく使うものをピックアップしました。

  • WEBサイトに「動き」を加える
  • 「イベント処理」ができる
  • 「非同期処理」ができる

JavaScriptの学習は、Progateがオススメです。
≫Progate JavaScrpit 学習コース

HTMLとCSSの独学：さいごに

HTMLとCSSの独学について、まとめてきましたがいかがでしたでしょうか？

ありがとうございました！おかげさまで、HTMLとCSSを独学する流れがなんとなく掴めました。
独学は難しい反面、うまくいけば低予算で抑えることもできます。とりあえずは、ご自身に合った学習方法を取り入れていくのがいいですね！

独学で注意すべきところ

  • 毎日欠かさずやること
  • 必ずアウトプットをすること
  • 自分に合った学習方法を見つけること

上記を意識しつつ、HTMLとCSSの独学に取り組んでみてください。

前の記事

HTMLとCSSにおすすめな無料エディタ3選【プログラミング初…

次の記事

HTMLとCSSの入門講座！Webサイトを作る仕組みと流れ【初…