ジャンルから探す

Book English

Webコーディングにオススメの学習本4冊【HTML/CSS/JavaScript】

Webコーディングの本を1冊だけ選ぶなら、『プロを目指す人のHTML&CSSの教科書 [HTML Living Standard準拠]』(大藤幹/マイナビ出版/2022年)です。理由は単純で、現行仕様である HTML Living Standard に準拠している数少ない体系的な入門書だからです。

本を選ぶときに一番大事なのは、著者でも厚さでもなく「いつ書かれたか」です。HTMLとCSSはこの10年で大きく変わりました。floatで段組みを組む、XHTMLで書く、といった内容の本を今から読むと、現場で使わない書き方を先に覚えてしまいます

この記事では、実際に手に取った4冊を、刊行年と対応している仕様まで含めて紹介します。古い本を「定番だから」という理由で薦めることはしません。

スポンサーリンク

目的別・どれを選ぶべきか

先に結論を表にまとめます。

目的 選ぶ本 刊行
HTML/CSSをこれから体系的に学ぶ プロを目指す人のHTML&CSSの教科書 2022年
手を動かしながらデザインを作りたい HTML5&CSS3標準デザイン講座 30LESSONS【第2版】 2019年
JavaScriptを最初から学ぶ 1冊ですべて身につくJavaScript入門講座 2023年
古い定番書の扱いを知りたい HTML/XHTML & CSSマスターブック 2008年(後述)

迷ったら「プロを目指す人のHTML&CSSの教科書」→「1冊ですべて身につくJavaScript入門講座」の順で読むのが、遠回りのない道筋だと思います。

プロを目指す人のHTML&CSSの教科書 [HTML Living Standard準拠]


著者 大藤 幹
出版社 マイナビ出版
発売 2022年5月
ページ数 336ページ

この記事で一番おすすめしたいのがこの1冊です。 タイトルにある「HTML Living Standard準拠」が重要で、これは2021年に HTML5 が廃止され、現在の正式な仕様が HTML Living Standard に一本化されたことに対応しているという意味です。

「HTML5対応」と書かれた本は、内容自体が間違っているわけではありませんが、仕様の枠組みが今と違う時代のものです。これから学ぶなら、現行仕様に沿った本から入る方が確実です。

内容は、基本的なタグやスタイルの書き方から、レイアウトの構築、フォームの作成まで体系的にカバーされています。章末に演習問題があるので、理解度を確認しながら進められます。「なんとなく動く」ではなく「なぜそう書くのか」を押さえたい人に向いています。

この本が向いている人

  • これからHTML/CSSを体系的に学びたい
  • 独学で覚えた知識に抜けがないか確認したい
  • 仕事でコーディングをする(=古い書き方を覚えたくない)

スポンサーリンク

1冊ですべて身につくJavaScript入門講座


著者 Mana
出版社 SBクリエイティブ
発売 2023年3月
ページ数 344ページ

JavaScriptの最初の1冊として、現時点で最も薦めやすい本です。 同じ著者の『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』がベストセラーになったシリーズのJavaScript版にあたります。

読んでいて良かったのは、難しい部分をなるべく簡単な言葉に置き換えて説明している点です。視覚的なサンプルコードや図解が多く、「変数」「関数」「イベント」といった最初の壁を、用語の定義から丁寧に登っていけます。

2023年の本なので、let/const、アロー関数、querySelectorといった今の書き方が前提になっています。vargetElementByIdだけで進む古い入門書とはここが決定的に違います。

この本が向いている人

  • HTML/CSSは書けるが、JavaScriptで止まっている
  • プログラミング自体が初めて
  • 写経しながら覚えるタイプ

HTML&CSS 標準デザイン講座【HTML5&CSS3対応】



 

著者 草野 あけみ
出版社 翔泳社
発売 2013年3月

1レッスンずつ課題を進めながら、実際に1つのサイトを完成させるという構成の本です。読むだけで終わらず手が動くので、「本を読んだのに何も作れない」という状態になりにくいのが良いところでした。

ただし注意点があります。この版は2013年刊で、レイアウトの説明がfloat中心です。 現在の段組みは Flexbox と CSS Grid で組むのが標準なので、レイアウトの章はそのまま鵜呑みにしない方がいいです。

これから買うなら、同じ著者による『HTML5&CSS3標準デザイン講座 30LESSONS【第2版】』(翔泳社/2019年5月)を選んでください。第2版では Flexbox にも触れられています。本屋やネットで買うときは、表紙が似ているので刊行年を必ず確認してください。

この本が向いている人

  • 読むより手を動かして覚えたい
  • 完成物を1つ作りきる体験がほしい

スポンサーリンク

HTML/XHTML & CSSマスターブック:今から買うべきか



 

著者 森 理浩
出版社 毎日コミュニケーションズ(現マイナビ出版)
発売 2008年2月

結論から言うと、これから学ぶ人が最初に買う本としては薦めません。 中古やKindleで安く手に入るため候補に挙がりやすいのですが、刊行が2008年で、タイトルのとおりXHTMLが現役だった時代の本です。

具体的に、今の書き方と食い違う点を挙げます。

  • XHTMLの記法<br />のような終端スラッシュ、必須のXML宣言)は、現在のHTMLでは不要です
  • レイアウトがfloatclear前提。今は Flexbox / CSS Grid を使います
  • Internet Explorer 6/7 向けの回避策に紙面が割かれています。IEはすでにサポートを終了しています
  • <table>によるレイアウトへの言及が残っています

「定番書」として名前が挙がることが多い本ですが、定番だったのは十数年前です。同じシリーズの流れを汲む本を探すなら、マスターブックシリーズの最新版が出ていないか確認してください。当時の内容を懐かしむ、あるいは古い案件の保守で当時の書き方を確認する、といった目的なら価値があります。

本を選ぶときに確認したい3点

ここまでの内容を、本選びの基準として整理します。

1. 刊行年(最重要)

HTML/CSSの入門書は、目安として刊行から5年を超えたら内容を疑ってください。 特にレイアウトの章は、この10年でfloat → Flexbox → CSS Grid と2回変わっています。

2. 「HTML5対応」ではなく「HTML Living Standard準拠」か

2021年1月に HTML5 の仕様は廃止され、WHATWG の HTML Living Standard に一本化されました。「HTML Living Standard準拠」と明記している本は、少なくとも2021年以降に書かれていることが確認できます。判断材料として分かりやすい指標です。

3. レイアウトの章で何を使っているか

本屋で立ち読みできるなら、目次で「Flexbox」「Grid」の文字を探してください。 見つからずfloatだけで段組みを説明している本は、内容が古いと判断していいです。

本以外で補うもの

本は体系立てて学ぶには最適ですが、仕様の最新状況は本では追えません。次の2つを併用すると穴が埋まります。

  • MDN Web Docs:各プロパティの対応ブラウザと仕様を確認する。本で覚えた書き方が今も推奨されているかを裏取りできます
  • Can I use:新しい機能を使う前に、対応状況を確認する

実際、この記事で扱っている範囲でも、CSSの:has()セレクターHTMLの<dialog>要素のように、2022年以降に使えるようになって実装の常識が変わった機能があります。書籍で土台を作り、こうした個別の機能は都度キャッチアップするのが現実的です。

環境づくりについてはWebコーダーがVSCodeに入れるべき拡張機能にまとめています。

まとめ

  • 1冊目は『プロを目指す人のHTML&CSSの教科書』(2022年・HTML Living Standard準拠)
  • JavaScriptは『1冊ですべて身につくJavaScript入門講座』(2023年)
  • 手を動かしたいなら『HTML5&CSS3標準デザイン講座 30LESSONS【第2版】』(2019年)。初版(2013年)ではなく第2版を選ぶ
  • 『HTML/XHTML & CSSマスターブック』(2008年)は、これから学ぶ人には薦めない
  • 選ぶ基準は刊行年 →「HTML Living Standard準拠」の表記 → 目次にFlexbox/Gridがあるか
  • 最新の仕様は MDN と Can I use で補う

本のタイトルや厚さより、いつ書かれたか。これだけで、遠回りをかなり減らせます。