HTMLとCSSを独学するための３ステップ【初心者OK】
こんにちは、氷犬（@icedog_410）です。
こんな疑問に答えます。
この記事のとおりに独学することで、プログラミング初心者でもWebサイトが一通り作れるようになります。
もちろん、すべてが完璧にとはいきませんが、あとは自分で調べて進められるだけのスキルがついているはずです。紹介する内容は実際に僕が使った方法なので、自信をもっておすすめできます。
学習サイトや本をこなした後に「何ができるようになるか」も併せて紹介しますので、学習の目安にしてもらえればと思います。
なお、「Webサイトを作る上で必要な言語が何かわからないよ」という人は、まず以下の記事を見てください。
クリックできるもくじ
HTML&CSSの独学は学習サイトと本を使って始めよう
HTML&CSSの独学は、まずプログラミング学習サイトで試しにコードを書いてみて、その次に本を使って学ぶのがおすすめです。
実際に僕が使ったProgateとHTML&CSSの本を紹介します。
まずはプログラミング学習サイト『Progate』で
まずはプログラミング学習サイト『Progate』から始めてみましょう。
特に準備をしなくても、Progateにアクセスするだけでプログラミングが始められます。
Progateではスライドを見てからコードを書くという順番で、サクサクと学習できるのが一番のメリットです。
いろんなサイトを使ってみましたが、Progateは作るページのデザインも今風だし、すごくわかりやすいのでおすすめですね。
レッスンの最初は無料で、途中から月額980円の課金制になります。
プログラミングの技術書は軽く3,000円とかするので、それに比べるとかなり良心的な価格設定です。
悩んでる時間ももったいないので、学習したいと思ったら課金してしまいましょう。
ProgateのHTML&CSSレッスンの進め方
ProgateのHTML&CSSコースは全部で６レッスンです。
ゼロから学べる学習コースが３つと、学習コースで学んだ内容を実践する道場コースの３つです。
ProgateのHTML&CSSコース
- 学習コース：初級編・中級編・上級編
- 道場コース：初級編・中級編・上級編
Progate公式では、学習コースの初級・中級⇒道場コースの初級・中級⇒学習コースの上級⇒道場コースの上級という流れで学ぶことがおすすめされています。
ただし、あえて順番を変えるメリットもないので、公式がおすすめするとおりに進めると良いです。
１周だと全然わからないと思うので、２，３週すると良い感じです。
- プログラミングの雰囲気がどんな感じかわかる
- Webページの構造がなんとなくわかる
Progateの段階では、「なんとなくプログラミングってこんな感じか～」と思えるだけでOKです。
あまり最初から理解しようとしすぎると普通に挫折するので、とりあえず進めてみるのが一番大事ですね。
Progateの次は市販の本で学習しよう
Progateの次は市販のHTML&CSSの本を買ってみるのがおすすめです。
個人的なおすすめは次の２冊。
『作りながら学ぶHTML&CSSデザインの教科書』は当ブログでレビューもしています。
amazonでは中身も少し見れるので、なんとなく気に入った方を買えばOKです。
本で学習するとひとつのWebサイトが作れるようになる
プログラミングの本は１冊あたり300ページぐらいあるのですが、本で学習することでひとつのWebサイト製作の流れがわかるようになります。
Webサイトは複数のページを組み合わせて作るのですが、基礎の部分は変わりません。
ただ、一連の作る流れはやってみないとわからないと思うので、本で学習するのをおすすめしています。
また、Progateはブラウザでコードが書けるのですが、実際にはブラウザでコードを書くことなんてないので、テキストエディタでコードを書くのに慣れるために本で学習します。
- １つのWebサイトの作り方がわかる
- Webサイトの構造がわかる
- ローカル環境でコードが書けるようになる
動画学習サイトのUdemyを活用するのもおすすめ
ベネッセが運営するUdemy（ユーデミー）という動画学習サイトがあります。
Udemy（ユーデミー）では、１本1,400～2,000円という価格で、実際のエンジニアが講師の動画を購入し、学習を進めることができます。
僕も実際に買って試してみましたが、コードを書いている画面を見ながら学習できるので、学習サイトや本で黙々と進めるのが苦手な方にはおすすめできると感じました。
こちらのコースでは、HTMLとCSSに加え、JavaScriptの基礎も学ぶことができるのでおすすめです。
>>[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人のWebプログラミング入門
もし、動画が合わなかった場合、30日間の返金保証もあるので、ぜひ買って学習してみてください。
HTML&CSSは実践することが大事【ゼロから作ってみる】
Progateや本で一通りコードを書くのに慣れたら、あとは実践あるのみです。
実際にWebページやWebサイトをゼロから作ってみましょう。
とはいっても、いきなりゼロからは作れないと思うので、既にあるサイトを真似して作ってみるのがおすすめです。
まずは１ページだけのランディングページを作るといいですね。
僕はこれを模写コーディングと呼んでいて、このブログでも学習過程を紹介しています。
わからないことは調べながらコードを書いていく
実際に自分でページを作ってみるとわからないことがたくさん出てくるはずです。
「このレイアウトってどうやって作るの？」とか「思い通りに作れないんだけど…」という感じ。
ただ、その都度調べていくことで着実にスキルアップしていきます。
プログラミングでは、コードの書き方を暗記する必要はなくて、調べ方がわかっていればOKです。むしろ、コードを書いている時間より調べている時間の方が長いと思います。
プログラミングでは、この「自分で解決する力」がすごく大事ですね。
HTML&CSSを書く上でわからないことは、次のサイトを見ればなんとなくわかります。
- HTMLクイックリファレンス（専門的）
- サルワカ（初心者向け）
基礎学習はつまらないので、ドンドン作っていくべき
僕の経験談ですが、学習サイトや本は楽なんですけど、そんなに楽しくないんですよね。
要するに言われたことをやってるだけなので、自分で考える時間がすごく少ない。
もちろん、基礎学習の段階ではOKなんですけど、慣れてきたらドンドン自分で作っていくべきだと思います。
ゼロからコーディングするのは結構辛いですが、気づけば２，３時間ぐらい経ってるぐらい楽しいです。
僕も未だに新しいページを作る時はめんどくさいと思いますが、始めてしまえば長々とやっています。
うまくいかなくても直せばいいだけなので、上達のコツはとにかくたくさん作ってみることですね。
HTMLとCSSは意外と簡単なので、独学しやすい
HTML&CSSは奥が深いですが、比較的簡単で独学しやすいので、プログラミングの入門としても取っつきやすいです。
Progateなどで触ってみるとわかると思いますが、JavaScriptやPHP、Rubyといったプログラミング言語は、HTML&CSSとだいぶ雰囲気が違います。たぶん、HTML&CSSより難しいと感じます。
一方で、HTML&CSSはわかりやすいし、見た目を作る言語なので触ってて楽しいです。
個人的にJavaScriptやPHPと比べて、HTML&CSSは初心者でも独学しやすい言語だと思います。
何はともあれ、すぐにHTML&CSSの学習を始めよう
ここまでこの記事を読んでもらってと言うことは、Web製作への興味があるんだと思います。
何かを始める時には「やってみようかなぁ…」と悩んでる時間が多くなりがちです。
ただ、合わなかったらやめればいいだけの話なので、今すぐ始めるのがおすすめです。
Web製作のスキルは身に着けておいて損はないので、気になったらすぐ学習を始めてみましょう。
HTML&CSSの独学の仕方まとめ
- Progateで学習してプログラミングに触れてみる
- 市販の本を使ってサイト構築の雰囲気を掴む
- 実際にWebサイトを作ってみる
HTML&CSSに続き、JavaScriptやWordPressなど、HTML&CSS以外の言語やツールを学びたい方は以下の記事を参考にしてください。
まずはHTMLとCSSから始めるのがいいらしいけど、どういう手順で進めればいいんだろう？
具体的な学習サイトや本と、それぞれ終わったら何ができるようになるかも教えてください。