今回は、HTML・CSSの勉強にオススメの本を初級者から中、上級者別に紹介します。

■ 初級者向け

■ HTML5&CSS3デザインブック

チャプター１の「WEBページにおける段組み」がとても勉強になります。WEBサイトのレイアウトについての理解が増しました。レスポンシブについても分かりやすいので、オススメです。
難点としては、横並びのスタイルでは、今はflexboxが主流となってますが、こちらの書籍では、floatを使っている点と、サンプルサイトがちょっとイマイチな点ですね。
floatに関しては、昔のサイトだとまだ使われているので、実務などで修正案件などの時に役に立ったりするので、覚えておいて損はありません。
サンプルサイトも割り切れば問題ないでしょう。

▼ Amazon.co.jpのレビューより

レスポンシブwebサイト構築を始めようと思っているかたに、最適な書！
個人的には、これまでFloatの概念で曖昧になっていた箇所がクリアになり、霧が晴れた感覚がありました。
ただ、誤植が思いのほか多かったので、星を４つにいたしました。

■ HTML&CSSとWebデザインが 1冊できちんと身につく本

全くの初学者にオススメです。
最初にWEBデザインやサイトの仕組みなどにも触れられているので、その辺も勉強できるのはありがたいですね。
サンプルサイトも今時で作りがいがあります！
難点は、こちらもfloatで説明されている点ですね。
flexboxを使える方は、flexboxでやっても良いと思います。

▼ Amazon.co.jpのレビューより

1ページずつhtmlとcssを書きながら作ってくので、ある程度知識があって理解してれば知識を改めて深めてくれるし、知識がなくても理解しながら勉強になると思う。問い合わせページも使いまわせるくらいの出来です。
ブレイクポイントに関しては制作する時にトレンドを調べた方が良さそうです。
cssアニメーションやjsはこの本では使わないので初心者〜中級者向けの参考書です。

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

今現在、何を買うか悩んでいる人は、とりあえずこの１冊を選んでおけば間違いないのではないでしょうか。というくらいの評判の良さですね。
サンプルサイトもおしゃれで、flexbox、CSSグリッドについても学べるので良いですね。　
解説もとても分かりやすい！

▼ Amazon.co.jpのレビューより

他のhtml/cssの参考書も3冊ほど持っていて、progateやudemyの講座も受けていますが、これ一冊あれば入門には充分です。
progateで苦手意識が芽生えなければ楽しく進められるかと思います。
解説がわかりやすいし、よく使うタグやプロパティもまとめられているし初心者が欲しい情報が得られて満足しています。

次に中、上級者向けになります。

■ 中上級者向け

■ HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方

上で紹介した、書籍をやり終えた人や、Progateやドットインストールを終えてこの後どうしようかと迷っている人にオススメの書籍になります。
次のステップへ進みたい方には、良いと思います。
サンプルサイト3つ作っていきますので、確実にスキルは付くかと思います。

▼ Amazon.co.jpのレビューより

典型的なレイアウトのwebサイトを作りますが、背景知識の解説が至るところにあり、非常に勉強になる本です。
所々マークアップやデザインの考えに関する豆知識などが満載です。
日頃から情報収集をしているとその意味もすんなり入っていくでしょう。
”サンプルサイトを作る”だけではなく、それ以上の勉強がこの本からは学べます。
基礎をとことん固めた後の、次のステップに是非ともおすすめしたい一冊です。

■ Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

Sassとは、簡単に言えばCSSを使いやすくしたものです。
Sassを使うことで、スタイルシートが読みやすくなる上に、これまでより少ない行数で書けるようになります。
CSSに慣れてきた人はSassを使えるようになっておくと良いと思います。
そのSassについてが分かりやすく説明されている書籍です。

▼ Sassの使い方まとめ

▼ Amazon.co.jpのレビューより

この本で初めてSassを触った初心者です。
HTMLとCSSを触ったことがある人なら理解できるようになっています。
Sassの文法書という感じなので、これをやれば基礎は身に付くと思います。
自分はWindowsユーザーなのですが、この本の中で出てくる、｢gulp sass｣というコマンドを打つとエラーが出てきて苦戦しました。nodeのバージョンとgulpのバージョンの相性によってはエラーが出るみたいです(自分はgulpのバージョンを3系から4系にアップグレードすることでエラーを解消させました)。
個人的にはSassを使ってWEBサイトを作る章とかがあったら良いのにと思いましたが、それを抜きにしても構成や説明自体は分かりやすいので、良書だと思います。

■ Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

CSS設計は、簡単に言うとCSSを記述する時のルールです。
Sassの本と同じシリーズの物ですが、こちらも分かりやすいためオススメです。

▼ CSS設計とは？

▼ Amazon.co.jpのレビューより

ただただHTMLやCSS、JSを学んでいるのであれば、CSS設計を学びましょう。CSSの存在意味、CSSを効率よく使う方法、そして、CSS設計。
OOCSSを始めとし、SMACSS、BEM、FLOCSSを体系付けて学ぶことが可能です。
Rubyなどを用いたWebアプリを開発する際にも必要になってくる技術です。他の学校のことは知りませんが、僕が通ってる学校では学びません。
今後、Webサービスの開発で飯を食っていくのであれば必須ですし、入社してから学ぶには遅いくらい。CSS設計という言葉すら知らない人間もいるくらいですから、やっておいて差が出ることは間違いなしです。

■ おまけ

■ HTML5 & CSS3 デザインレシピ集

このようなレシピ集は、作業中に分からない所があった時にとても便利なので、１冊あっても良いのではないかと思います。　
内容は、中、上級者には少し簡単かもしれませんが、初学者にはとても役に立つ内容だとは感じます。

▼ Amazon.co.jpのレビューより

作りながら学ぶ系の本もありますが、自分が作りたいものを作る時は、このような逆引き本が非常に使いやすいです。
意味を学びたいとき、知りたい時は、さらに別の本で調べたり、検索したりしながらすると、実力が身につきます。

以上となります。

今回はHTML・CSSのオススメ本を紹介しました。

今回ご紹介した本は、個人的にオススメする本となっていますので、あくまで参考までにして頂き、ご自身で情報収集をして確認して購入してくださいね。

最後まで、読んで頂きありがとうございました！

▼ 本も良いけど、私のコーディング練習noteもオススメですw

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

本よりも安い価格設定ですので、興味があったらやってみてくださいね！！

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝