初心者から3ヶ月でHTML&CSSを覚えた僕が、最強の勉強方法を紹介するよ

HTMLとCSSを最短で覚えようぜ!



僕は専門学校に入ってから3ヶ月でWebサイトが作れるようになっちゃいました、テヘヘ。

でも普通に授業を受けてたわけじゃなくて、専門学校に入ってからすぐ大会に出場するために猛特訓したからなんです。

入学して普通に授業を受けてたら3ヶ月の段階でせいぜい「自己紹介サイト」を作るのが精一杯ですが、一般的なサイトも作れるようになってました。

なのでやり方次第で3ヶ月もあればHTML&CSSはほとんどマスターできます。

「そんなこといったって、もともとプログラムができたんでしょ?」みたいなことを言われるんですが、プログラムなんて高校の頃に触ってたけど、何のプログラムかすら覚えていないような、へなちょこ経験しか持ってませんでした。

それでも3ヶ月でHTML&CSSは覚えられたんです。

宮川 輝
HTMLとCSSの勉強に時間をかけるなんてもったいない!
さくっと覚えようぜ!

僕が大会に猛特訓した内容を、具体的な7ステップの練習方法をご紹介します。

HTML&CSSは簡単なので、初心者でも時間をかけずにさくっと効率的に覚えられると思います。

プロから教わるのが一番効率的。

プログラミングを教わる

いきなりです、もし本気で覚えたいのであれば、プログラムはプロから学ぶのが一番効率がいいです。

僕がそうであったように、初心者から始めるのはかなり大変ですが、現役のプログラマーと一緒であれば楽に、そして効率よく覚えることができるからです。

もし学生時代の僕が独学で勉強したら…覚えられたでしょうが、確実に効率が悪かったでしょうね。卒業した現役プログラマーに教わったおかげです。

ここで無料のオンラインレッスンが受けられるプログラミング教室を紹介しているので、気になる方はチェックしてみてください。

プロから教わった上で、僕がやったHTML&CSSの勉強法を活用すれば最強になるはずです。

1.HTML&CSSのコードをよく観察する。

HTMLとCSSのイラストです。

もう一度言いますが、僕はWebの大会に出場するっていうのに、HTMLとCSSがなんなのかも知りませんでした。

宮川 輝
読み方はエイチ・ティー・エム・エルとシー・エス・エスでいいんだよな…。

そんなところからスタートしたんですよ、今振り返っても「そんなんで出来んのかい(笑)」っ思うくらい、何もできない人でした。

なので「HTMLってどんな意味だろう」という具体的な理解よりも、まずは「HTMLって何?」というのを肌感で分かるようにHTMLをよく観察しました。

そうすると「文字の両サイドに英数字があるな」とか、「英数字の前にスラッシュがついたものがあるな」といった特徴が分かってくるんですね。

これをCSSも同じように観察していきました。

最初は教材を見たほうが確実に飲み込み速度が早くなるので1冊持っておくことをオススメします。

 

本にある初心者向けのHTMLに触れた次は、実際にサイトで使われているHTMLに触れていきます。

サイトのHTMLを見るのは簡単で、右クリックして「ソースコードの表示」を押すだけ。

cssの使い方について紹介していきます。

右クリックから「ソースコードの表示」をクリックします。

パソコンの画面上で右クリックできるサイトであれば、そのサイトで使われてるHTMLを表示させることができます。スマホからは見れないので見るときはパソコンからお願いしますね。

同じようにCSSコードを見ることもできますが、ちょっと複雑なので詳しくは「CSSの基礎知識」で紹介しています。

 

最初は暗号にしか見えなくて戸惑うかと思いますが、この段階で理解できなくても大丈夫です。

分からないなりに眺めて、肌感覚でコードを感じることが大切。

1〜2週間くらいはとにかくいろんなサイトのHTMLとCSSを見ればだいぶ慣れてきます。

かっこいいサイトがまとめて載ってる「イケサイ」で探すと、いい感じのコードど出会えるかもしれないですね。

2.実際にHTML&CSSのコードを打ち込んでみる。

キーボードをタイピングしている写真です。

HTML&CSSのコードに慣れてきたら、とりあえず意味がわからなくても打ち込んでいきます。

なぜかというと、HTMLとCSSが分からない僕が「このタグは引用を意味する」とか「文字に重要性を持たせるために使うタグ」とかいう話を聞いても、なんのこっちゃ理解できなかったんです。

なのでHTMLとCSSを打ち込みまくりました。

先ほどの「ソースコードの表示」で表示されたHTMLと、教本に書いてあるコードが練習になるんじゃないでしょうか。

僕はこの頃、意味はわからないけど手を動かすことで眺めていたときより特徴が見えてきて、なんとくなHTMLでマークアップする意味がつかめてきました。

「これがタグか」とか「開始タグと終了タグってこれのことか」とかとか、下手にタグの意味とかは覚えなくても体で覚えていきましたね。

やっぱり手を動かさないと見えないものってあるので、「とりあえず打ってみる」というのは大事なポイントですね。

この期間も1~2週間程度で、とにかくいろんなコードに触れてみるのがいいですよ。

3.HTMLの構造を理解する。

ハイパーテキストマークアップランゲージといいます。

サル真似でコードを打ち込むことを覚えたら、いよいよ意味を理解していく段階に入ります。

ここまで3週間から4週間くらいかな。長いかなとも思うけど「わからないなりに真似をしたあの期間は大事だったなぁ。」と今は思えるので、時間をかけてよかったです。

HTMLの構造は先ほど紹介した教本を見れば確実に理解できるようになると思います。それでもわからないときはタグの名前をネットで調べていけば見つかるはずです。

でも分からなかった当時の僕が迷わないように、僕なりの覚えるポイントを2つだけ紹介します。

どのバージョンから勉強すればいいの?

HTMLを学ぶときに大事なバージョンについてのお話です。

HTMLには1.0や4.01などのバージョンがあって「どれから勉強すればいいのか」ということですが、僕が思うに最新バージョンの「HTML 5」あたりから勉強しておけば間違いないと思います。

というもの、未経験で初心者の専門学生もみな最新バージョンから教わるからです。

2016年7月現在のHTMLの最新バージョンは「HTML5、HTML 5.1」ですが、まだ導入されていないサイトの方が多いです。

それより昔に使われていたHTMLのバージョンは最新のものと書き方がちょっと違っていたりします。

でも最新バージョンを覚えておけば過去の方にも応用が効くと思います。実際に僕も過去のHTMLの使い方は後から知っていきました。

なのでどのバージョンか迷ったら、最新の「HTML5」から勉強していけば大丈夫です。

何を覚えればいいの?

HTMLの何を覚えればいいのかは、目的によって変わってきますね。

例えば、HTML5を勉強してコーダー・マークアップエンジニアを目指す人は「セクショニングコンテンツ(section・article・aside・nav)」で正しいマークアップが出来る技術が必要だけど、WordPressを使ってブログやサイト運営をしているのであればそこまでの知識は必要ありません。

でもタグの正しい使い方を覚えなくちゃいけないというところは、どちらにしても大事なポイントですね。

タグの使い方はSEO(検索エンジン最適化)にとっても重要だし、HTMLそのものなので必ず正しい使い方を覚えましょう。

HTMLのタグについてはHTMLタグリファレンス(目的別)のサイトが一番詳しく紹介してあるのでおすすめです。

どのタグを最初に覚えるべき?

これも目的によって変わってきますが、マークアップエンジニアを目指す方は真っ先にセクショニングコンテンツから覚えるべきですね。

僕の専門学校でも各タグの意味よりも、最初にセクショニングコンテンツの使い方から教わりました。

その方が後になってCSSを勉強したときに装飾の幅が広がったり、情報をまとめる力がついたりと汎用性が効くので、Web制作の世界を目指したい方は絶対にセクショニングコンテンツから勉強するべきです。

練習方法として、「Yahoo!ニュース」のページをセクショニングコンテンツで囲ってみるのなんかオススメですよ。

今バリバリのマークアップエンジニアとして働いてる友人なんか、学生時代に楽しそうにニュースを見ながらマークアップしてました(笑)。

 

逆にWordPressを使ったブログやサイトの運営をしていきたいなら、細かなタグの使い方から勉強すればオッケーだと思います。

タグも結構奥が深いんですよー。例えば有名な<strong>タグですが、これの意味を「文字を太文字にする」だと勘違いしていしている人は結構います。

実際にはこういった意味があったんです。

<strong>タグは、強い重要性を表す際に使用します。
strongタグリファレンス

そう、<strong>タグは「重要性を表す」ためのタグなんです。HTML5になってから「強調」ではなく「重要性」という意味に変わりました。

こんな感じで、CMS(WordPressなど)を使った運用をしたい人はそれぞれのタグの意味をしっかり理解していくことが大事かと思います。

僕はここに2週間ほどの時間をかけました。

4.CSSの構造を理解する。

CSSとはカスケーティン・スタイル・シートの略です。

HTMLの構造が理解できるようになったら、次はCSSの構造理解に入ります。

ちなみに僕はHTMLとCSSの勉強を同時進行でやってきたのですが、なにせHTMLとCSSの区別もつかないような状態から始めたのでごちゃ混ぜになって理解しにくかったんですよね。

なのでHTMLをやった後にCSSを勉強するのがいいんじゃないかなと思います。

どのバージョンから勉強すればいいの?

さて、CSSにもHTMLと同じようにバージョンがあるんですが、CSSはもう「CSS3」から勉強していいと思います。

古いバージョンと何が違うかは、専門的な話を除くと表現の幅が広がったことが大きなポイントですね。

ボーダーの角丸やアニメーション、3D表示ができるようになるなど、ほんとにたくさんの指定方法(プロパティ)があります。

プロパティの種類はスタイルシートリファレンス(目的別)のサイトで分かりやすく紹介されています。

どのプロパティを勉強すればいいの?

これも目的によって学び方は変わってくるでしょう。

がっつりサイトを一から作りたい人は、CSSでレイアウトを組めるプロパティ(float・position・margin・paddingなど)を最初に覚えていく必要があります。

セクショニングコンテンツで囲んだ要素を、思い通りにガンガンとレイアウトしてみましょう。

 

逆にCMSを使った運用をしたい人は、細かなプロパティ(color・background・font-sizeなど)から学んでいければいいと思います。

僕自身、専門学校にいた頃はがっつりサイト作るためにいろんなプロパティを使ってレイアウトを組んでいましたが、WordPressでこのブログを運用するようになってからはまったく使ってません(笑)。

もちろんいろんなプロパティを知っておいたほうがデザインの幅が効くので、多くのプロパティを知ってるに越したことはないです。

それでも最近のWordPressテーマはデザインが洗礼されたものが多いので、そんなに必要ない気がします。

 

僕はここまで、2週間ほどの期間をCSSの勉強にかけました。

5.HTML&CSSを使って簡単なサイトを作ってみる。

wordpressにはたくさんの種類のテーマがあります。

HTML&CSSの構造を理解できるようになったら、簡単なサイトを一つ作っていきます。

自力で作るのが難しいという方は、先ほど紹介した教本を元にHTMLを組み合わせたものでもいいで、とりあえず「一つのサイト」として形を作ります。

「え!サイトなんてまだ作れないよ!」という方は、僕が過去に書いた記事で練習ファイル付きの記事をあげたので、その記事を参考にサイトを組み立ててみてください。

【練習ファイル付き】CSS(スタイルシート)の基本的な書き方と実践練習

 

僕はサイトを一つ作り終えるまで2週間ほどかかりましたかね。

学校側がサンプルサイトのモックアップ(サイトのキャプチャ画像)を用意してくれてましたが、HTML&CSSで完成させるのには苦労しましたよ(笑)。

「え、もう画像でサイトできてるんだからわざわざHTML&CSSにする必要なくない!?」っておもってました(笑)。

ただここ、初めて自分でサイトを作ることができた達成感を感じて自信にすることができたのが今に繋がってると思ってます。

6.サイトのHTMLとCSSを暗記する。

htmlとcssの暗記をしてる宮川 輝です。

さて、「サイトを作ることができた!」という満足感に浸ってるのもつかの間、ここからいよいよ本番です。

自分で作ったサイトのHTMLとCSSを丸暗記します。

僕はHTML&CSSを覚えるために、サイトの一番上の<!doctype html>から最後の</html>部分まで紙に印刷して、わからないところは線を引いたりしてましたね。

僕は学生時代は全然勉強してこなかったけど、これは英単語とか歴史上人物の名前を覚えるような感覚だと思います。

暗記方法は人それぞれあると思いますが、後でコードを見ないでサイトを完成させられるようにするのでとにかく覚えていきます。

 

宮川 輝
この段階がめっちゃきついんよ…。

そう、いくらHTMLとCSSの構造を理解したとはいえ、僕にはまだ暗号のようにしか思えませんでした。

その暗号を覚えるのは大変でしたね、勉強とかできない人だったので。

でも暗記したものをのちにアウトプットするので必ず身になっていきます。

僕は暗記するのに1週間から2週間ほどかかりました。

7.HTML&CSSをタイムアタックして攻めていく。

htmlとcssをタイムアタックで攻めてる宮川 輝です。

そしてここからがHTML&CSSをハイスピードで覚える秘訣!

HTMLとCSSを暗記したサイトをタイムアタックでどんどん攻めていきます。

ここで大時なのは途中でわからなくなっても解答を見ないこと。

わからないとどうしても見たくなっちゃうんだけど、見るとできるのは当たり前なので飛ばしながらでも頑張って完成させます。

分からないなりにひねり出そうといじってると、新しい発見があったりしてそこから学べることもあります。

僕はタイムアタックを何回も繰り返しやっていくことで、体にHTMLとCSSを染み込ませていきました。

何回やったかなぁ。設定したタイムをクリアできなかったり、完成させられなかったら出来るまでやらされてたので、同じサイトを100回以上タイムアタックで作った気がします。

最初は30分くらいかかったのが、最終的に10分くらいで作れるようになってきます。

この猛特訓のおかげで僕は大会に出場して敢闘賞をとることができました。自慢です。

 

このタイムアタックは1ヶ月以上繰り返しましたね。

HTML&CSSの勉強方法まとめ。

僕がWebの大会に出るためにも使ったHTML&CSSの勉強方法をまとめるとこんな感じです。

  1. HTMLとCSSをよく見て観察する
  2. 分からなくても実際に手を動かして打ち込んでみる
  3. HTMLの構造を理解する
  4. CSSの構造を理解する
  5. 簡単なサイトを一つ作ってみる。できなければ用意する。
  6. そのサイトを暗記する
  7. タイムアタックで時間を縮めていく

特に時間をかけたのはやっぱり5番〜7番当たりですね。初心者の僕にとっては一番難しかったけど、乗り越えたら成長を感じられる場所でもありました。

まったくの初心者からこの7ステップを続けた結果、HTML&CSSをマスターすることができたので誰でも続けていけば結果が出ると思います。

 

最後に「どの参考書を買えばいいか迷う〜」って人は最新番がおすすめ。たくさん買いすぎると確実に迷うので、最新版のものが1冊あれば十分です。