記事内に商品プロモーションが含まれる場合があります
今回はHTMLとCSSを学ぶのにおすすめの本を8冊紹介します。「初心者向け」と「中級者向け」でレベル別にまとめていきます。
ちなみに本を買わなくても、サルワカのWebデザイン入門でイチから学ぶこともできますよー。
本当に初めてHTML&CSSを学ぶ人におすすめ
デザインの学校
HTML&CSSの本
おそらく日本で（現時点で）発売されているHTMLとCSSの解説書の中では一番分かりやすい本です。本当にこれ以上なく、丁寧に親切に解説されています。手に取ったときには「これは敵わんなぁ…」と敗北感を感じたほど。
「HTMLとCSSについてはまだ全く分からない」や「他の本だと難しくて挫折してしまった…」という方におすすめです。
この本自体のレイアウトやデザインが綺麗に整理されていて、とっても読み進めやすいのです。
HTML&CSS初心者におすすめの学習書
HTML5&CSS3
きちんと入門
図がたくさん使われており、読みやすいうえ、それなりに深い内容まで学べる本です。 今後あたり前のものになっていくであろうフレックスボックスやレスポンシブデザインについてもしっかり解説されています。とはいえ、さきほど紹介した「デザインの学校」に比べると、良くも悪くも説明量が多く、読み切るのが少しだけ大変かもしれません。
HTMLとCSSについて何となく分かってきたけど「頭の中で整理できてない」あるいは「独学でテキトウに学んできたけど、ちゃんとした知識として定着させたい」という方におすすめです。
インターネット技術の絵本
「そもそもインターネットってどういう仕組みなの？」「Webって何？」と疑問に思っている方におすすめの本です。イラストがたくさん使われており、知識がなくてもサクサクと読み進められます。
HTMLとCSSについても触れられていますが、完全なメインではありません。「インターネット全般の基礎知識」について解説されているという感じですね。発売日は2009年と古いのですが、根本的な技術について取り上げているため、内容は全く色褪せていません。
とはいえ、全体的に浅く広くなので、あくまでもHTML・CSSの学習書のプラスアルファとして読むべきかと思います。
HTML5&CSS3
デザインブック
定番の本ですね。「実際にWebサイトをイチから作ってみよう」というコンセプトで進んでいきます。HTMLとCSSの基本についても解説されていますが、やや実習書チックなところがあります。例として作成するWebサイトはあまりイケてませんが、制作の流れを掴むにはとても良い本かと思います。
「HTMLとCSSがどういうものかは何となく分かる」という初心者〜中級者の間くらいの方におすすめです。
本でHTML/CSSを学ぶときのコツを記事の最後で解説しています。 スキップ
中級者におすすめの本
HTML5/CSS3
モダンコーディング
ある程度Webデザインの知識が身についてきた方にダントツでおすすめしたいのがこちら。今どきの主流なWebデザインの作り方やテクニックを幅広く押さえることができます。実際に3つのサンプルサイトを作っていく、という形式で読み進めていきます。デベロッパーツールの使い方なんかにも軽く触れられており、実用的な良書だと思います。
こちらの本で制作する3つのサンプルサイトはネットで誰でも見ることができます。
Webデザイン
良質見本帳
2017年6月に発売された本です。もはやHTMLとCSSの学習書とは言えませんが…名前の通り、Webデザインの見本が並ぶ本です。とはいえ、ただ見本が載っているだけでなく「何がどう良いのか」「どんな表現があり、ポイントは何か」について、しっかりと解説されています。デザインパターンも豊かで、どんな表現をしようか迷っているときになかなかに参考になってくれそうです。
具体的なコードについてはほとんど解説されていないので、ある程度HTMLとCSSで自由に表現できるだけの知識がある、という中級者の方におすすめです。
中級〜上級者向けの本
Webデザイン
新スタンダードテクニック
近年のトレンド表現が総まとめされている本です。無限スクロールやツールチップの実装方法、その他アニメーションのつけ方などかなり幅広く網羅されています。気になるところだけをつまみ食いするように読んでいくタイプの本ですね。
解説もそれなりにしっかりとされているので、ある程度の知識がある方ならつまずくことなく理解できるのではないかと思います。
HTMLとCSSだけでなくJavascript/jQueryも絡んでくる部分もたくさんあるのでご注意ください。
CSSシークレット
CSSの少し珍しい表現手法が多数まとめられています。おそらく上級者の方にとっても目新しい表現が見つかるはずです。中級者なら「CSSでこんなことができるんだな」と感動するはず。
解説文が長々と続く部分もあり、全てに目を通していくのはなかなかに骨が折れそうです。「こんな表現手法があるんだ」とざっと頭に入れておき、実際のコーディングで使いたくなったら見返す、というように活用するのが良いのではないかと思います。
本で学ぶときのポイント
本でWebデザインを学ぶときのコツをまとめておきます。
実際に手を動かしながら読み進める
まず、本を読みながらも必ず手を動かすようにしましょう。実際にコードを書くことで、知識が頭に入りやすくなります。
忘れそうな部分には付箋or折り目をつける
技術書を読んでいると、どうしても「既に知っている部分」と「まだ知らない部分」が出てきます。知っている部分までもう1周見直すのは非効率的なので「初めて知った＆忘れそう」という部分にだけ付箋や折り目をつけておきましょう。
個人的には「手を動かしながら1周読む（このとき付箋をつけておく）」⇒「付箋がついているところだけ、もう1周さらっと読み流す」という学習法が効率的だと感じています。
とはいえ、効率的に頭に叩き込む方法は、人それぞれなはずなので参考までに。
WordPressユーザーなら…
HTMLとCSSとは別にWordPressの使い方や、簡単なPHPの書き方を覚える必要があります。WordPressユーザーにおすすめの本は、次の記事で紹介しています。
