HTML 初心者は何から勉強すべき？タイプ別勉強法まとめ

HTML 初心者にとって、一番の悩みはどうやってHTMLを勉強していくのかということではないでしょうか？

自分もHTMLの勉強を始めた時は、書籍をたくさん買ったり、いろんなサイトを見たり四苦八苦しました.. というのもどうやって勉強していけばいいのかを聞ける人がいなかったのです。

そこで今回はHTML・CSSの勉強方法の流れ と お勧めの教材をまとめてみました。

独学で勉強できる方、誰かに聞きながら勉強をしていく方、人によって勉強法は異なります。そのあたりをご紹介したいと思います。

HTML・ CSSってどうやって勉強すればいいの？

HTML・CSSとは？

ここでは かなりざっくりした解説をすると、

(注:ウェブサイトは ホームページやネットショップなどウェブ上で見れるサイトの総称だと思ってください。)

HTMLとは…

CSSとは…

ということになります。

例えばこちらのサイトをみてください。

サンプルサイト1(HTMLのみのサイト)

 これはHTML(ウェブサイトの骨格)のみで作成されたサイトです。

このサイトがなんとなくネットショップなのはわかるかと思いますが、普段見ているネットショップとはなんとなく違うなー という感じを受けませんか？

その理由は、デザインが適応されてないからです。最近のウェブサイトはデザインが非常に綺麗で、見る側もそれに慣れています。

そのため、HTMLだけで作られたサイトには違和感が生まれます。

では、このサイトにCSS(サイトのデザイン)を追加するとこのようになります。

サンプルサイト2(HTMLにCSSを追加したサイト)

どうでしょうか？ シンプルだったサイトが綺麗に変わりました。

これがCSSの力です。見た目は大きく変わりましたが、HTMLで作られた骨格部分は全く同じです。

ウェブサイトを作るにはHTMLだけではなく、CSSも必須なことがわかるかと思います。

HTML・CSSを勉強するってどういうこと？

ではもう少し細かく見てみましょう。今度はウェブサイトの中身を見ていきます。

今 見ていただいたサイトの一部はこんな感じです。

これがウェブサイト上(ブラウザ)で見るとこのように表示されます。

1枚目の画像の中に <p> や <h2>と書かれたものがありますが、これがHTMLのタグと呼ばれるものです。

見出しを書きたいときは<h2>タグを→  <h2>見出し</2>

画像を表示したいときは<img>タグが使われています。　→ <img src=”./pict.jpeg”>

上の画像にはありませんが、同様に 文字色を設定したり、文字の大きさを設定するためにCSSのプロパティと呼ばれるものも適応されています。

ウェブサイトは この HTMLのタグと CSSのプロパティの組み合わせによってできています。

そのため、簡単に言うとHTMLのタグとCSSのプロパティを丸暗記できれば、どんなサイトでも作れるようになります。

ただ もちろん全て覚えられればいいのですが、

HTMLタグやCSSプロパティは膨大な量が存在するので、簡単には覚えられません。

そこで、必ず必要なもの、覚えていると実務でよく使うものなどを効率的に覚えていく必要があります。

最適なHTML・ CSSの勉強法は人によって違う？

では、どの書籍やウェブサイトを見て、勉強すれば最短でHTML・CSSをマスターできるの？

 という質問をよくいただくのですが、これは人によって異なります。

学生の時に、好きな先生や参考書が人によって異なったのと同じで、文字が多い本の方が好きな方、動画がみやすいと感じる方、それぞれだと思います。

ただ 1点確実に言えることは、HTML・CSSに限らず全てのプログラム言語を勉強する時、必ず躓きます！

しかも 一度や二度ではありません….  書籍に書かれてる内容をそのままやってみてもうまくいかないことも多々出てきます。

そんな時に相談できる相手がいるかどうかが一番重要だと思っています。

例えば

WEB系の会社に勤めている方の場合

HTML・CSSの基礎の部分を一通り抑えて、同僚の方に相談しながら実務経験を積むのが一番の最短ルートとなります。

HTML・CSSの勉強書籍や動画講座で、基礎を身につけていきましょう。

わからないところは自分で調べて、それでも解決しない時はどんどん周りに聞きましょう。

これから転職や就職・再就職したい方、内職を始めたい主婦の方の場合

独学で進めるのは非常に難しいと思います。1度つまずくと次に進めなくなるので、

何かわからないことが起きた時に、相談できるサービスを利用することをおすすめします。

1度独学で書籍などで勉強して、サポート付きの講座を受講するのも効果的だと思います。

当サイトでもサポート付き動画講座を運営していますので是非見てみてください。

書籍系・Webサイトお勧め教材

ここではおすすめの教材を紹介します。

Webサイト: ほんっとにはじめてのHTML5

料金：無料
http://honttoni.blog74.fc2.com/

こちらのサイトはHTMLの基礎部分がよくまとまっています。無料で勉強できますのでオススメです。

書籍: スラスラわかるHTML&CSSのきほん

書籍の方がいい方にはこの本がオススメです。

初心者でもわかりやすい内容となっていますが、あくまで基礎の内容なので、この書籍をマスターしたら下の書籍など応用の本を買ってみましょう。

上の本で基礎を抑えた方は

書籍: 作りながら学ぶ HTML/CSSデザインの教科書

こちらの書籍などで、基礎をおさえつつ応用の練習を進めていきましょう。

動画系お勧め教材

ドットインストール

料金：無料（プレミアム会員は月額￥880）
http://dotinstall.com/

格安でHTML・CSSの基礎を勉強することができます。

即実践で学ぶ、HTML・CSS講座

詳細はこちら

料金: 7500円〜

当サイトでも専用の講座を準備しています。お値段は無料ではありませんが、いろんな書籍のいいとこ取りをした内容になっています。

またこれまで独学でつまづいた経験などを元に、練習問題もたくさん追加して言いますので、是非みてください。

当講座を受講した、専用のサポートスタッフがつきますので、わからないところなど気軽に相談することができます。これから勉強したい人にとっては最適です。

今後のHTML・CSS勉強の流れ

さて勉強法を決めたら、早速勉強を始めましょう。思い立った時にスタートしちゃいましょう。

書籍でも動画講座でも、一度スタートしたら一つの教材をマスターできるように、何回も繰り返し勉強しましょう。

1回通しただけではなんとなくの理解度になってしまいます。最初は各教材の暗記でもいいので、覚えるぐらいやりましょう。

最終的にスラスラコードが書けるようになってきます。

HTML・CSSをマスターするまでは、いろいろ難しい問題が多々起きてくると思いますが、諦めずに頑張るといいことがあると思います。

何か気になる点などあったら、ご質問などくださいね。