HTMLとCSSを独学で勉強するためのサイト・本・期間をまとめてみた

プログラミングに興味を持ったあなたにまず勉強してほしいのがHTMLとCSS。そのHTMLとCSSを独学で勉強することはできるのでしょうか？また、なるべくお得に短い時間で学習できるのがベストだと思いますので、その方法についてまとめていきます。

そもそもHTMLとCSSは独学できる？結論、できます！

そもそもHTMLとCSSは独学で身につけることができるのでしょうか？結論としては、独学で身につけることができます。
1つ1つ丁寧に学習を進めていくことで、HTMLとCSSのスキルを身につけることができるので、まずは学習方法を確認して、目標を設定しましょう！

HTMLとCSSを独学で身につけるロードマップ

HTMLとCSSを身につけるロードマップとしては下記が一例として挙げられます。

1. 無料サイトでまずはHTMLとCSSに触れてみる（10時間〜20時間）
2. 本やUdemyなどでHTMLとCSSについて触れる時間を増やす（30時間〜50時間）
3. 自分の作りたいものを作ってみる
4. 気になるサイトやページを模写してみて改善していく

無料サイトでまずはHTMLとCSSに触れてみる（10時間〜20時間）

HTMLとCSSを独学で身につけるためには本で学習することも大事ですが、何よりも実際にHTMLとCSSを書いていくことで習得していくことが重要です。
本を読むだけでは身に付かないのが、HTMLとCSSをはじめとするプログラミングです。
まずは、書いてみることから始めましょう。

初心者がHTMLとCSSの独学に利用するサイトとしておすすめなのが、Progateです。
Progateは無料でHTMLとCSSの基本を学習できます。また、HTMLとCSS以外の言語についての学習もできますので、登録しておくことで、将来的に他の言語も学習できる機会となり、使いやすいです。

Progateは穴埋め方式でHTMLとCSSを学ぶことができ、特別な準備をすることなく、HTMLとCSSのイメージを掴むことができるので、初心者でも安心して使えます。
まずは、Progateでプログラミングに触れることから始めてみましょう。

本やUdemyなどでHTMLとCSSについて触れる時間を増やす（30時間〜50時間）

ProgateでHTMLとCSSについてある程度学習でき、HTMLとCSSに慣れてきたら、より難しい内容、実践的な内容について本やサイトで身につけるのがおすすめです。
Progateで学習できる内容は、HTMLとCSSの基礎中の基礎となっており、できることも限りがあります。
そのため、実際にHTMLとCSSを使って自分の作りたいものを作ったり、委託の業務に対応するためにはもっと高度な内容の理解が必要になってきます。

必要とされるスキルを身につけるために使うのが、本やサイトでの学習になります。
おすすめの本やサイトは下記があります。

学習におすすめの本

1冊ですべて身につくHTML & CSSとWebデザイン入門講座
これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本
HTML&CSSとWebデザインが1冊できちんと身につく本

これらの本はいずれもHTMLとCSSを基礎から実践的な内容まで学ぶのに適した本です。
いずれの本もおすすめできる内容になっておりますので、あなたの読みやすい本や内容のものを選ぶのがよいでしょう。

学習におすすめのサイト

学習におすすめのサイトとしてはUdemyがあります。
UdemyにはHTMLとCSSの学習に適したコンテンツが複数ありますので、気になる動画を選んで学習するのがよいでしょう。
Udemyの中でHTMLとCSSの学習に適したコースの一例としては下記があります。
【最新2022】未経験からHTML、CSS をマスターして、WEBデザイナー・エンジニアを目指す　最高の実践コース

随時新しいコンテンツが追加されますので、他の動画も見てみてあなたの希望に合った内容と料金を加味して選ぶのがよいでしょう。
尚、紹介している本やサイトの内容の中には、学習を始めたばかりではわからない内容もあるかもしれません。
例えば、上記Udemyの内容で言うとWebサーバーの話などは少々理解が難しいかもしれません。

現時点で理解が難しい内容については全て理解をしておく必要はありません。
一旦飛ばしたり、理解が浅い段階で次に進みましょう。
わからない状態で嫌になってしまうことが1番の問題ですので、あまり気にせずに進みましょう。

自分の作りたいものを作ってみる

ここまで学習が進むとある程度いろいろなものが作れるようになっているはずです。
ここであなたの興味があるものや人から依頼されたものなどを作ってみましょう。

実際に作ってみることで自分に足りないものや実装方法がわからないものなどがわかってきます。
わからないところが出てきましたら、その都度調べて必要な情報を集めて、スキルアップを目指しましょう。

気になるサイトやページを模写してみて改善していく

自分の作りたいものを作っていく中で実装がうまくいかないところや実装はできたけれどあまりしっくりこないところ、より簡単に実装できるところなどが出てくると思います。

そういった箇所について学習をするために、気になるサイトやページがあればぜひ模写をしてみてください。
綺麗なサイトや動きが豊富なサイト、軽いサイトなどは勉強になるコードの書き方がされていることが多く、貴重な学習素材です。
ぜひサイトやページを模写してみましょう。

HTMLとCSSが独学で学習できる理由

上記のようにHTMLとCSSの独学方法についてのロードマップを解説してきましたが、そもそもなぜHTMLとCSSは独学が可能な脳でしょうか？

1. 学習に必要な情報が豊富にある
2. 難易度が低い

学習に必要な情報が豊富にある

HTMLとCSSの学習に必要な情報はインターネットや本にたくさんあり、誰かに教えてもらわなくてもある程度のスキルまで身につけることができます。
プログラミングスクールに通いながら学習することもできますが、学習する内容としてはほとんど違いがないため、あまり行く必要はないでしょう。

難易度が低い

HTMLとCSSの難易度は決して高くはないです。
英語で構成されているため、難しく感じるかもしれませんが、理解をしてしまえば簡単なものばかりです。

また、HTMLとCSSだけであれば、複雑なロジックの実装やプログラムの実装をする必要がなく、ルールに沿って記述していくことのみで完結します。
基本的に書き方に沿ってコードを書き、わからないところは調べれば対策がわかることがほとんどであり、難易度は低く安心です。

HTMLとCSSを独学のNG行動

HTMLとCSSを独学する上でやってはいけないNG行動についてまとめていきます。

1. コードを丸暗記する
2. 人のコードをコピペするだけで終わる

コードを丸暗記する

HTMLとCSSのコードを丸暗記するのはやめましょう。
そもそもHTMLとCSSのコードを全て丸暗記することは現実的ではありません。

HTMLとCSSのタグやルールがたくさんあるため、全てを覚えようとすると確実に挫折してしまいます。
重要なことは丸暗記するのではなく、タグの使い方やコードの書き方を理解することです。
コードを丸暗記しようとして挫折する前に丸暗記するのはやめましょう。

人のコードをコピペするだけで終わる

わからないところについて人のコードをコピペすることはあまりおすすめできません。しかし、コピペすることもあるかもしれません。
そんなときに、コピペだけして終わってしまうのはよくありません。

コピペだけで終わってしまうと成長がありませんし、同じ課題にぶつかったときに再度コピぺをしないといけません。
自分で実装ができるようになることが理想の形ですので、コードの構成について理解し、再度同じ課題にぶつかったときに書けるようにしておきましょう。

HTMLとCSSの独学で辛いこと

1. 不明点を聞ける人がいない
2. HTMLに比べるとCSSはやや難しい

不明点を聞ける人がいない

独学で学習する際の辛い点は、学習で行き詰まったときに不明点を聞くことができる人がいないことです。
全て理解する必要はないですし、少々わからないことがあっても時間と回数を重ねることで解決できることも増えてきます。

どうしても不明点を聞きたい場合には、MENTAやココナラを利用して不明点を解消することもできます。
独学ではなくなってしまうかもしれませんが、使ってみるのもよいでしょう。

HTMLに比べるとCSSはやや難しい

HTMLに比べるとCSSはやや難しいのがHTMLとCSSの独学が辛い点です。
CSSには幅の取り方や絶対位置、相対位置などの概念で少々ややこしいことがあり、そういったところでつまづきやすいです。

HTMLとCSSの独学は可能！

HTMLとCSSの独学は可能です。これまでまとめてきたように、まずはProgateなどで学習を始めた後に、本やUdemyで学習後、自分のサイトや作りたいものを作ることでスキルアップを図るのがよいでしょう。

独学の辛い点もありますが、独学で学習できるところまで学習して、どうしてもわからない点は人に聞いて解決するのがよいでしょう。

HTMLとCSSの独学についてよくある質問