HTML/CSS勉強したいと思ったけど、おすすめの本がどれかわからない。。。
今回は自分がHTML/CSSを勉強した際によかった本などをレベル別に紹介します！！
-
HTML/CSS勉強したいけど、どの本がいいのかわからない
-
実際に使用した意見を聞きたい
-
自分のレベルにあった本を購入したい
いざHTML/CSSを勉強しようと思って悩むのがどの本を購入すればいいのか、、、
HTML/CSSが人気な理由
HTML/CSSの学習本を紹介する前に、HTML/CSS学習するモチベアップの為にもHTML/CSSが人気な理由を紹介します。
HTML/CSSはWeb制作の基本
『Webサイトを作ってみたい、プログラミングを勉強したい』と思った方は、まずはHTML/CSSを勉強する人が大半かと思います。
正確に区別するとHTML/CSSはプログラミング言語ではなく、マークアップ言語に該当されます。
なら勉強しなくていいやん
と考えた方、少しお待ちを!!
私も最初そう思ったのですが、結局HTML/CSSはプログラミングを勉強するにあたって基礎中の基礎なのでまずはこれを勉強して損はないです。
PHPやJavaScriptを勉強したい！って方でもWebサイトやアプリケーションを制作する際は、HTML/CSSを結局使用するので、軽くでも良いのでHTML/CSSの基礎は抑えてくべきだと思います。
PHPやJavaScriptを勉強したい方向けのオススメの方はこちら
HTML/CSSの役割
HTML/CSSはプログラミング言語じゃないなら、何の役割してるの？って話かと思いますが、語弊を恐れずに至極簡単に言うと、
- HTML … WEBサイトの表の情報
- CSS … HTMLの装飾
この今書いてる文字もHTMLで表示させており、この文字のフォントや色などをCSSで変更するといったものです。
HTML/CSS学習におすすめな本を選ぶポイント
HTML/CSSとはだいたいどんな言語なのかはわかっていただけたと思うのですが、『じゃあ実際どんな本から始めればいいのか』って思う方も多いと思います。
実際に自分もHTML/CSSを勉強しようと思い、本屋さんに行ったらかなり多くの書籍が並んでおり、どれを買えばいいのかわからなくなりました。
そこで今回はHTML/CSSを勉強する方にオススメの本を紹介します。
-
自分のレベルにあった本を選ぶ
-
演習付きの本
- ある程度最新の本を選ぶ
自分のレベルにあった本を選ぶ
これが一番重要なポイントです。そしてここを間違えなければ比較的スムーズにHTML/CSS学習をスタートできると思います。
一番ダメなポイントは、初心者が分厚くて難しそうな本を選ぶことです。すごくやる気があってよしやるぞ！！っと思っている方に多い傾向なので注意です。まぁあ気持ちはわかりますが笑
まずは自分が初心者なのか、少し勉強したことがあるのかで判断するのが良いと思います。
初心者は正直に初心者用の本を購入することをおすすめします。
演習付きの本を選ぶ
これは実際に自分が体験した話ですが、実際に自分で手を動かし、自分でプログラミングを走らせてエラーの場所を発見していく作業をどんだけするかで成長度合いは全然変わっていきます。
実際に自分で書いたコードがうまく動くと感動しますし、モチベ維持にも繋がるので演習付きの本がおすすめです！
ある程度最新の本を選ぶ
『参考書高いから、古本で買おう』と思ってしまう方も多いと思います。実際に自分も古本屋で買おうと考えたことがありますが、ちょっと注意が必要です。
プログラミング初心者の場合『？』な情報だと思いますが、iOSやAndroidなどと同じようにプログラミング言語にはバージョンがあります。
古本屋とかで安く参考書を手に入れて頑張って勉強したけど、バージョンが古かった、、、なんてことにならないようになるべく最新の本を購入しましょう。
【2022】HTML/CSS学習におすすめな本紹介
前置きが長くなってしまいましたが、ここからHTML/CSS学習おすすめの本を紹介します！
メリットデメリットも記載してるのでぜひ比較して自分にあった本を見つけてください！
【初心者】HTML/CSS学習のおすすめな本
まず『HTML/CSSってなに？』って方は今から紹介する本をおすすめします。
おすすめの理由として、以下となります。
-
イラストが多め
-
HTML/CSSだけではなくWebサイトの基本的なことが記載
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
アマゾンベストセラーで評価もクチコミ数も高い良本で、Twitterなどでもよくおすすめで紹介されている本。デザイン目線で見やすい、使いやすいWebサイトづくりの方法なども参考になる。
正直まずはこれをやってみるで間違いない。
次に紹介する実践講座編を合わせて勉強することをおすすめします。
良い点
-
アマゾンベストセラーで評価もクチコミ数も高い
- 他の方もおすすめでよく紹介している本
- デザイン目線のお話も多い
悪い点
-
見つからない。。誰か教えてください。
(出典：Amazon)
これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本
初心者に向けた本で、わかりやすさに重点を置いている。そして、マンガやイラストも多く、カラフルでページ全体のデザインも良く、読んでいて飽きないページレイアウト。
制作に役立つサイト集やチートシートもあり、この本を読み終わった後でも制作のお助けになる情報が多い。
良い点
-
ページレイアウトが綺麗で読みやすい
- サイト例を元に勉強できるので、実際にサイト制作をイメージしやすい
- 学習した後も利用できる特典が多い
悪い点
-
細かい説明はない
(出典：Amazon)
スラスラわかるHTML&CSSのきほん 第2版
なるべく勉強の敷居を下げようとカラー印刷などもあり、とっつきやすい印象。サンプルコードも多く記載されており、『あーなるほど』が出やすく、次のページへ行きやすい。
最初の参考書としてはとにかくおすすめな本。
良い点
-
挫折しにくいサンプルコードが多い
-
HTML/CSSを難しく感じさせない
悪い点
-
細かい説明はない
(出典：Amazon)
初心者からちゃんとしたプロになる Webデザイン基礎入門
Webサイトの基礎から、実際に制作して公開、運用する流れを含め本書では紹介しているので、HTMLの基本的な勉強だけでなく実際の制作現場をイメージしやすい。
最終章では、グーグルコンソールやアクセス解析なども紹介しているのがポイント高い。
良い点
-
実際の制作全体をイメージしやすい
-
グーグルコンソールやアクセス解析についても学べる
悪い点
-
他の入門書に比べ優しめではないが、この一本で学べる範囲は広い
(出典：Amazon)
【初級者】HTML/CSS学習のおすすめな本
HTML/CSSってこんな感じか～っていうのがわかっている方におすすめの本は以下となります。
-
HTML/CSSをちょっと勉強した人向け
-
初心者よりも詳しい説明が多い
HTML5/CSS3モダンコーディング
現在主流な3つのWebページのデザイン、「スタンダードレイアウト」「グリッドレイアウト」「シングルページレイアウト」に分けて方法を紹介。
サイトのデザインから枠組み、中身のコーディング、といった一連の流れをイメージできる。
個人的にはディベロッパーツールの説明をしているところがポイント高かったです。少しですが、これを知ってると色々な気になるサイトのHTML/CSSを覗けるようになるので幅がかなり広がる。
良い点
-
3パターンのサイトから学べる
- グリッドレイアウトが学べる
- ディベロッパーツールの説明有り
悪い点
-
実践例が多いので、ある程度HTML/CSSの知識必要
(出典：Amazon)
【中級者】HTML/CSS学習のおすすめな本
HTML/CSSについて理解が深まったところで、もうひと押しWeb制作を深掘りするのにおすすめな本は以下となります。
先ほど紹介した本たちよりも、実際にこういったデザインはどうやってコーディングされているのかを勉強していく感じで、表現の幅を広げたいという方におすすめな本たちになります。
Webデザイン良質見本帳
415点の厳選した良質なWebサイトを集めた見本集なので、『こういった方法で表現すればいいんだ』とひらめきを与えてくれる本。
HTML/CSSとは？っていうよりかは、デザインに重点を置いているので、配色なども学べて、こういった場合はこういう色やデザインなどが良いなど方向性がわかる本。
暇なときに読んでても飽きない本でもあります笑。
良い点
-
配色が学べる
- 頭でイメージしている表現ができるようになる
注意点
-
HTML/CSSではなく、デザインに重点を置いている
(出典：Amazon)
動くWebデザイン アイディア帳
色々とHTML/CSSを勉強してくると誰もだ出くわす疑問『このサイトのこれってどうやって動かしてるの？』を解決してくれる本。
HTMLの本を紹介していますが、本書ではjQueryを用いて動きのあるサイトを制作するためのテクニックが紹介されているので、HTMLを勉強したい方向きではなく、Web制作を勉強してい方向け。
良い点
-
Web制作のバリエーションが増える
- jQueryをコピペで使用できる
注意点
-
HTML/CSSではなくjQueryの本なので、まずはHTMLを勉強してから読んで欲しい本。
(出典：Amazon)
動くWebデザイン アイディア帳 実践編
先ほど紹介した本の実践版。
上記で紹介した本では、Webデザインで使われる基本的な「動き」を紹介していたのに対して、この本は実際に『Webサイトの印象を決定付けることができる動き』について解説しています。
良い点
-
Webサイトの全体の印象づけを学ぶことができる
- 統一感のデザイン作り、サイト作りを意識できる
注意点
-
上記で紹介した本の実践版なので、まずは先に上記で紹介した本をおすすめします。
(出典：Amazon)
HTML/CSS学習をKindleアンリミテッドで
『色々紹介があったけど、本って高いな、、、』
って思った方も多いのではないでしょうか？
実際自分も学習した時にそれは思いました。
まずどんなものかだけでも知りたいって方はAmazonのKindle unlimitedがおすすめです。なんたって他の漫画や書籍も読めるので、プログラミングに挫折しても他の本を読めます笑
実際に自分は本も購入して他のJavaScriptの本をちょっと覗いてみたいなって時によく利用していました。
Kindle UnlimitedでHTML/CSSってどんなものなのか知りたいって人は以下の本がおすすめです。
これで全部勉強できるわけではないので、本当にHTML/CSSを勉強したい方は今までに紹介した本の購入を強くおすすめします。
ちゃんと知っておきたい人のHTML/CSS完全入門
できるポケット Web制作必携 HTML&CSS全事典
本書は、勉強用というよりかは事典なので『このタグってどんな意味だろう』なんて思った時にすぐ調べられる本です。何とkindleアンリミテッドでは無料なので、もし会員の方は読んでみて損はないかと思います。
まとめ
今回はHTML/CSS学習者向けにおすすめの本を紹介しました。
結構多く本を紹介しましたが、まずは一冊きちんとやりきることをおすすめします。
こちらもどうぞ！！
リモートワークが増え、部屋の環境を良くしたい方も増えてるかと思います。 そんな私もその一人で自分の部屋の環境改善のために色々と購入しました。 今回は、その商品の中で実際に購入し使用した私が『これはおすすめできる』という商品を価格[…]
