初心者がHTMLを習得するためのおすすめの本と選び方、活用法まで解説

HTMLはWebページにテキストを表示させる、構造をつくる言語です。Web制作をする上でHTMLは不可欠な知識です。全てのWebページにはHTMLが用いられています。今あなたが見ているブラウザ上に表示されているテキストもHTMLが使用されています。

HTMLは初心者でも簡単に独学できる言語です。入門書もたくさん発売されており、どれを買えばいいか迷うと思います。特に、初心者にとってはどの本でやればHTMLができるようになるか判断するのは難しいです。

本記事では初心者がHTMLを習得するためのおすすめの本を紹介します。また、選び方や活用法を解説します。本記事を参考に自分なりのHTML学習方法を見つけてください。

HTMLの学習におすすめの本

1冊ですべて身につくHTML&CSSとWebデザイン入門講座

タイトルの通り本書一冊あれば、HTML/CSSを実用レベルまで学ぶことができます。また、Webサイトを作る上で大切なデザインの話もあるため、副業でWeb制作をしたい人は必読です。

初心者でもわかりやすく解説されています。理解を深めて効率的に学習するためには、Progateで基礎をある程度分かったうえで本を読むことをおすすめします。

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座

文系でもプログラミング副業で月10万円稼ぐ！

簡単なWebサイトを作るにはおすすめの一冊です。HTML/CSSの基礎を解説しながら1つのランディングページを作っていきます。一部、JavaScriptの解説もあるため、Web制作の全体像も学習できます。

タイトルには副業で10万円とありますが、WordPressやJavaScriptのライブラリが活用されるようになった今、本書だけで10万円は難しいです。ただ、Web制作を学ぶ上では良書です。

文系でもプログラミング副業で月10万円稼ぐ！

ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング

タイトルの通り簡単なゲームを作りながらHTML/CSSを学べる本です。JavaScriptも使うためWeb制作の全体を学ぶことができます。ある程度知識を持った人であればスラスラ理解できますが、今までHTMLを触ったことのない人には難しいかもしれません。

ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング

よくわかるHTML5+CSS3の教科書 第3版

HTML/CSSを深く学びたいのであれば本書を選ぶことをおすすめします。1つのページを作るというよりは、1つ1つのコードをしっかり学ぶという面が強いです。Progateやドットインストールなどの知識の整理のために、本性を活用することをおすすめします。

いきなり本書から始めると内容が分かりにくい部分もあります。しかし、参考書のように使えるので、自分でコーディングを始めたときにそばに置いておきたい一冊です。

よくわかるHTML5+CSS3の教科書 第3版

おすすめの本の選び方

コードと解説の割合が適切

本屋で軽く本を開いたときにコードと解説の割合が適切に書かれているものを選ぶことをおすすめします。目安としては5ページほど読んだときに、30～50%がコードであるといいと思います。HTMLはコードを書くことで理解が深まるので、書くコード量が多い方がいいです。

解説もある程度なければ、コードを理解することができません。解説とコードの量のバランスがしっかりとれた本を選ぶと学習効率が上がります。

一冊で最低1つのWebページが作れる

一冊の中で1つのWebサイトを作ることを目標とした本を選ぶと学習しやすいです。HTMLのタグやフォームの作り方だけでなく、Webページ全体の設計を学ぶことができるからです。HTMLでは部品となるタグだけで、ページを作れるわけではありません。

タグの並べ方やブロックのまとめ方などのルールがあります。特に、SEO対策をする上でタグのルールを守らないと上位検索が難しくなります。

Web制作の全体像を掴むためにも、一冊で1つのWebページを作れる本を選ぶことをおすすめします。

CSSが解説されている

HTMLと同時に学習するためにCSSも一緒に解説している本を選ぶのがいいと思います。CSSはWebページの見た目を整えるための言語です。HTMLだけでは味気のないサイトになるのでCSSを使って色付けしたり、文章のレイアウトを整えます。

基本的にはHTMLとCSSはセットになっていることが多いです。そのため、ほとんどの本はHTMLとCSSは一緒に解説されています。中にはHTMLだけ解説している本があるので、買う前に目次を確認し、CSSが学習できるか確認することをおすすめします。

最後までやりきれる

本が最後までやりきれるものを選ぶのがいいです。HTMLは基礎は簡単ですが、知識の範囲は深くて広いです。そのため、全てを網羅したような本を選ぶと終わりが見えずに途中で飽きてしまう可能性があります。

HTMLを習得する上で、本は一冊をしっかりやりきることが大切です。本以上の知識はWebページを作成しながら、調べて習得していくことが可能です。

本一冊を最後までやりきりWebページを作成するための基本的な考え方や知識を定着させることを優先することをおすすめします。

HTMLを効率よく学習するおすすめの本活用法

Progateで先に学習する

本で学習する前にProgateを使って予習すると効率的です。Progateを使えばWebサイトを作る流れを通じてHTMLの基礎を習得できます。Progateが終わった状態で本を読めば、今読んでいる部分が全体のどこにあたるのかを理解できます。そのため、本の内容に抵抗が少なくなるため、学習効率が上がります。

Progateはプログラミングのオンライン学習サイトです。スライドを使ったわかりやすい解説があり、ブラウザ上でコードを書いて確認ができる環境でインプットとアウトプットを繰り返します。

ProgateにはHTML/CSSのコースが初級編、中級編、上級編があります。初級編は無料、中級編と上級編は月額1080円で学習できます。中級編までやることをおすすめします。費用がかけれないという人は初級編でもいいと思います。

本のコードを書く

Progateが終わったら、本のコードを順に書いていきます。コードを先に書く理由はProgateでの自分の理解度を確かめるためです。解説を読む前にコードを書くことでProgateで理解できていることとできていないことが明確になります。

コードを写す際にわからないところがあったとしても、文字を丸写しします。わからないところのコードはコメントアウトで目印をつけるのもおすすめです。

Progate終了時点での自分の理解力テストとして本のコードを利用します。

解説を読む

本のコードをかけたら、コードを書いた部分の解説を読みます。このとき、理解できていないところを中心に読みます。コードを先に書いておくことで理解できたところとまだ理解出ていないところを明確になっています。

そのため、自分が理解できていない部分を中心に読めば、他のところに100%集中する必要がなくなります。集中する箇所を限定し、脳の負担を減らすことで、本当に必要なところの学習が効率的にできるようになります。

自分なりにアレンジする

コードを7～8割ほど理解出来たら、コードを自分なりにアレンジすることをおすすめします。アレンジすることで、応用力がつきます。結果、理解できていなかった2～3割を補填することができます。

丸写しで終わらずに、「自分のWebページを写したコードで作るなら」という視点を持つことが大切です。

理解が進んできたら模写や自己紹介ページを作る

本一冊を6割程度理解出来たら、実際のWebページの模写や自己紹介サイトを作ることをおすすめします。特に、模写はWebページの全体設計を知る上でも大切なことだと思います。有名なサイトでもHTMLとCSSをだけならば簡単にできるサイトもあります。

自己紹介サイトを作ることは自分の思ったデザインを実現できるかが確認できます。HTMLの知識を深めるためには有効です。個人ページのプロフィール欄などを参考にしてもいいと思います。

本を6割理解できたというのは、アウトプットで知識を定着、伸ばす段階です。理解できていないところを繰り返すよりもどんどん実践していくことをおすすめします。

まとめ

HTMLのおすすめの学習本と本の選び方、学習方法を解説しました。本を使った学習は自分のモチベーションを維持することが最大の課題です。そのため、自分にとって抵抗の少ない学習方法を見つける必要です。

特に、本の選び方、学習方法を間違えてしまうと3日坊主になります。そのためにも本を選ぶ基準や学習方法をしっかりと決めたうえで、中身をみて選ぶことをおすすめします。

本記事で挙げたHTMLの学習本はどれも良書です。しかし、あなたにとっての良書を見つけなければ、学習効率は落ちます。実際に中身を見て学習のイメージをもって本を選べば、HTMLは確実に習得できると思います。