HTMLとCSSを独学するための3ステップ【初心者OK】

元税務職員で、Web系エンジニアの氷犬です。

HTML&CSSを独学したい人
Webサイトを作れるようになるために、プログラミングを始めたい。
まずはHTMLとCSSから始めるのがいいらしいけど、どういう手順で進めればいいんだろう?
具体的な学習サイトや本と、それぞれ終わったら何ができるようになるかも教えてください。

こんな疑問に答えます。

 

この記事のとおりに独学することで、プログラミング初心者でもWebサイトが一通り作れるようになります。

もちろん、すべてが完璧にとはいきませんが、あとは自分で調べて進められるだけのスキルがついているはずです。

 

紹介する内容は実際に僕が使った方法なので、自信をもっておすすめできます。

学習サイトや本をこなした後に「何ができるようになるか」も併せて紹介しますので、学習の目安にしてもらえればと思います。

この記事の内容

  • HTML&CSSの独学は学習サイトと本を使って始めよう
  • HTML&CSSは実践することが大事【ゼロから作ってみる】
  • HTMLとCSSは意外と簡単なので、独学しやすい

なお、「Webサイトを作る上で必要な言語が何かわからないよ」という人は、まず以下の記事を見ていただければm(_ _)m

【初心者向け】Web製作をする上で学ぶべきプログラミング言語【図解あり】

2018.06.20

-スポンサードサーチ

HTML&CSSの独学は学習サイトと本を使って始めよう

HTML&CSSの独学は学習サイトと本を使って始めよう

HTML&CSSの独学は、まずプログラミング学習サイトで試しにコードを書いてみて、その次に本を使って学ぶのがおすすめです。

実際に僕が使ったProgateとHTML&CSSの本を紹介します。

まずはプログラミング学習サイト『Progate』で

まずはプログラミング学習サイト『Progate』から始めてみましょう。

特に準備をしなくても、Progateにアクセスするだけでプログラミングが始められます。

 

Progateではスライドを見てからコードを書くという順番で、サクサクと学習できるのが一番のメリットかなと。

Progateのスライドでプログラミングを学習できる Progateでプログラミングを学習する

引用:Progate

いろんなサイトを使ってみましたが、Progateは作るページのデザインも今風だし、すごくわかりやすいのでおすすめですね。

 

レッスンの最初は無料で、途中から月額980円の課金制になります。

プログラミングの技術書って軽く3,000円とかするので、それに比べるとかなり良心的な価格設定です。

悩んでる時間ももったいないので、学習したいと思ったらサクッと課金してしまいましょう。

ProgateのHTML&CSSレッスンの進め方

ProgateのHTML&CSSコースは全部で6レッスンです。

ゼロから学べる学習コースが3つと、学習コースで学んだ内容を実践する道場コースの3つです。

ProgateのHTML&CSSコース

学習コース:初級編・中級編・上級編

道場コース:初級編・中級編・上級編

 

Progate公式では、学習コースの初級・中級⇒道場コースの初級・中級⇒学習コースの上級⇒道場コースの上級という流れで学ぶことがおすすめされています。

まあ、あえて順番を変えるメリットもないかなと思うので、公式がおすすめするとおりに進めるのがいいかなと。

1周だと全然わからないと思うので、2,3週すると良い感じです。

Progateでできるようになること
  • プログラミングの雰囲気がどんな感じかわかる
  • Webページの構造がなんとなくわかる

 

Progateの段階では、「なんとなくプログラミングってこんな感じか~」と思えるだけでOKです。

あまり最初から理解しようとしすぎると普通に挫折するので、とりあえず進めてみるのが一番大事ですね。

Progateの次は市販の本で学習しよう

Progateの次は市販のHTML&CSSの本を買ってみるのがおすすめです。

 

個人的なおすすめは次の2冊。

created by Rinker
¥3,024 (2018/10/23 21:21:55時点 Amazon調べ-詳細)

 

『作りながら学ぶHTML&CSSデザインの教科書』は当ブログでレビューもしています。

プログラミング初心者でも簡単にコードが書ける『HTMLの教科書』

2018.05.27

amazonでは中身も少し見れるので、なんとなく気に入った方を買えばOKです。

本で学習するとひとつのWebサイトが作れるようになる

プログラミングの本は1冊あたり300ページぐらいあるのですが、本で学習することでひとつのWebサイト製作の流れがわかるようになります。

Webサイトは複数のページを組み合わせて作るのですが、基礎の部分は変わりません。

ただ、一連の作る流れはやってみないとわからないと思うので、本で学習するのをおすすめしています。

 

プログラミング学習サイトだと1ページだけ作るとかはあるんですけど、なかなか1つのサイトを作るまでには至らないんですよね。

また、Progateはブラウザでコードが書けるのですが、実際にはブラウザでコードを書くことなんてないので、テキストエディタでコードを書くのに慣れるために本で学習します。

HTML&CSSの本でできるようになること
  • 1つのWebサイトの作り方がわかる
  • Webサイトの構造がわかる
  • ローカル環境でコードが書けるようになる

HTML&CSSは実践することが大事【ゼロから作ってみる】

HTML&CSSは実践することが大事【ゼロから作ってみる】

Progateや本で一通りコードを書くのに慣れたら、あとは実践あるのみです。

実際にWebページやWebサイトをゼロから作ってみましょう。

 

とはいっても、いきなりゼロからは作れないと思うので、既にあるサイトを真似して作ってみるのがおすすめです。

まずは1ページだけのランディングページを作るといいですね。

僕はこれを模写コーディングと呼んでいて、このブログでも学習過程を紹介しています。

例:模写コーディングで作ったもの

【Flexboxも】Webページの模写コーディングをしました【プログラミング学習記録⑧】

2018.07.02

わからないことは調べながらコードを書いていく

実際に自分でページを作ってみるとわからないことがたくさん出てくるはずです。

「このレイアウトってどうやって作るの?」とか「思い通りに作れないんだけど…」という感じ。

ただ、その都度調べていくことで着実にスキルアップしていきます。

 

プログラミングでは、コードの書き方を暗記する必要はなくて、調べ方がわかっていればOKです。

むしろ、コードを書いている時間より調べている時間の方が長いと思います(-_-;)

プログラミングでは、この「自分で解決する力」がすごく大事ですね。

 

HTML&CSSを書く上でわからないことは、次のサイトを見ればなんとなくわかるかなと。

基礎学習はつまらないので、ドンドン作っていくべき

僕の経験談ですが、学習サイトや本は楽なんですけど、そんなに楽しくないんですよね。

要するに言われたことをやってるだけなので、自分で考える時間がすごく少ない。

もちろん、基礎学習の段階ではOKなんですけど、慣れてきたらドンドン自分で作っていくべきだと思います。

 

ゼロからコーディングするのは結構辛いですが、気づけば2,3時間ぐらい経ってるぐらい楽しいです。

僕も未だに新しいページを作る時はめんどくさいと思いますが、始めてしまえば長々とやっています。

うまくいかなくても直せばいいだけなので、上達のコツはとにかくたくさん作ってみることですね。

-スポンサードサーチ

HTMLとCSSは意外と簡単なので、独学しやすい

HTMLとCSSは意外と簡単なので、独学しやすい

HTML&CSSは奥が深いですが、比較的簡単で独学しやすいので、プログラミングの入門としても取っつきやすいと思います。

Progateなどで触ってみるとわかると思いますが、JavaScriptやPHP、Rubyといったプログラミング言語は、HTML&CSSとだいぶ雰囲気が違います。

たぶん、HTML&CSSより難しいと感じるかなと。

 

HTML&CSSはわかりやすいし、見た目を作る言語なので触ってて楽しいです。

個人的にJavaScriptやPHPと比べて、HTML&CSSは初心者でも独学しやすい言語かなと思います。

独学するのが辛いなと思ったら、無料レッスンがおすすめ

HTML&CSSは比較的簡単とはいえ、ひとりでゼロから始めると心が折れる可能性もあります。

有料のプログラミングスクールは手っ取り早いですが、いきなり受けるには料金が高くてそれなりの覚悟が必要です(-_-;)笑

「独学は辛いけど、いきなりスクールに通う覚悟はない…」という人は、まずはCodeCampなどの無料レッスンを受けてみるのがいいかなと思います。

 

無料で受けてみてスクールがいいと思えば通えばいいし、ひとりでできそうと思ったら学習サイトや本を使えばいいですからね。

何はともあれ、すぐにHTML&CSSの学習を始めよう

ここまでこの記事を読んでもらってと言うことは、Web製作への興味があるんだと思います。

何かを始める時には「やってみようかなぁ…」と悩んでる時間が多くなりがちです。

ただ、合わなかったらやめればいいだけの話なので、今すぐ始めるのがおすすめです(^_^)

 

Web製作のスキルは身に着けておいて損はないので、気になったらすぐ学習を始めてみましょう!

HTML&CSSの独学の仕方まとめ

  • Progateで学習してプログラミングに触れてみる
  • 市販の本を使ってサイト構築の雰囲気を掴む
  • 実際にWebサイトを作ってみる

 

関連記事:
【未経験から】プログラミングの独学方法の手順まとめ【実践済み】

スポンサーリンク
スポンサーリンク