べんりワザ・作業環境をととのえる

初心者におすすめのHTML/CSS・JavaScript入門書

Web制作の独学で「持っていてよかった」と言われつづけている定番の入門書を10冊紹介します。HTML/CSS・JavaScript・WordPressの分野別に、どんな人に合うかの目安と挫折しない読み方つき。

PR:この記事には広告・アフィリエイトリンクを含みます

Webサイトや動画でも学べる時代に、それでも「本」には基礎から応用までの道のりが1本に整理されているという強みがあります。ここでは、Web制作の独学で長く定番でありつづけている入門書を、分野別に10冊紹介します。全部そろえる必要はありません——自分の今の段階に合う1冊を選んで、最後までやり切るのがいちばん効きます。

HTML/CSSの最初の1冊

最初の1冊がいちばん重要で、いちばん好みが分かれるところです。定番の3冊はどれも内容の質に差はないので、進め方の相性で選んでください。

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

Mana/SBクリエイティブ/2024年3月・第2版

「Mana本」の愛称で知られる、この分野でいちばん有名な入門書。シリーズ累計で桁違いに読まれている、迷ったらこれの筆頭です。HTMLとCSSの基本を学びながら、実際にカフェサイトを1つ完成させる構成で、作りながら覚えたい人にぴったり。紙面がフルカラーで、レスポンシブやFlexboxといった今の現場の書き方に加えて、配色やフォント選びまで一緒に学べるので、「動くだけじゃなくきれいなページ」に最短で届きます。

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

これだけで基本がしっかり身につくHTML/CSS&Webデザイン1冊目の本

竹内直人・竹内瑠美/翔泳社/2021年10月

書名のとおり「1冊目」を狙って作られた本。Mana本と同じく1つのサイトを完成させる形式ですが、こちらは手順の途中経過が省略されずに全部載っているのが持ち味で、「本と自分の画面が途中で食い違って迷子になる」事故が起きにくい構成です。演習のダウンロード素材も充実していて、写経がはじめての人でも安心して走り切れます。

これだけで基本がしっかり身につくHTML/CSS&Webデザイン1冊目の本

スラスラわかるHTML&CSSのきほん 第3版

狩野祐東/SBクリエイティブ/2022年7月・第3版

上の2冊より一歩ゆっくり、ひとつずつ確かめながら進みたい人向けの1冊。1つの手順が細かく区切られ、そのたびに画面の確認が入るので、「いま自分が何をしたのか」を見失いません。ファイルの保存やフォルダの扱いなど、パソコン操作そのものから丁寧に説明してくれるため、Web制作が人生初のプログラミングという人はここから入るのがいちばん安全です。

スラスラわかるHTML&CSSのきほん 第3版

2冊目に:見た目の引き出しを増やす

ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座

Mana/SBクリエイティブ/2021年2月

Mana先生による2冊目のための本。基本は分かったけれど、作るものがなんだか野暮ったい——その「一手間」を、見出し・ボタン・画像・レイアウトなどの部品別に、ビフォーアフターつきで教えてくれます。1項目が短く独立しているので、頭から読まなくても「今日はボタンだけ」とつまみ食いできるのも便利。当サイトの「コピペで使えるデザイン素材集」と同じ発想を、もっと体系的に深掘りした1冊です。

ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座

JavaScriptの最初の1冊

JavaScriptはHTML/CSSより一段むずかしいぶん、本の「教え方」の違いが効いてきます。じっくり理解派・作りながら派・遊びながら派の3冊です。

確かな力が身につくJavaScript「超」入門 第2版

狩野祐東/SBクリエイティブ/2019年9月・第2版

JavaScriptの入門書でまず名前が挙がる定番。文法の説明だけで終わらず、「なぜそう書くのか」を初心者の目線で説明してくれるので、コピペではない理解が積み上がります。サンプルも「画像の切り替え」「入力チェック」など実際のWebページで使う場面ばかりで、学んだことがそのまま自分のサイトに持ち帰れます。HTML/CSSをひととおり触ってから読むと、効果がいちばん大きい1冊です。

確かな力が身につくJavaScript「超」入門 第2版

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

Mana/SBクリエイティブ/2023年3月

Mana本のJavaScript版。文法の1つ1つを深掘りするより、「Webページに動きをつける」という目的から逆算して学ぶ構成で、ローディング画面・スライダー・スクロールで現れる要素など「作りたかったあれ」が次々に完成していきます。理屈より先に結果が出るので、モチベーションが続きやすいのが強み。HTML/CSSをMana本で学んだ人は、同じ空気感でそのまま続けられます。

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

ゲームで学ぶJavaScript入門 増補改訂版

田中賢一郎/インプレス/2022年12月・増補改訂版

ブロック崩しやシューティングなどのゲームを作りながらJavaScriptを学ぶ1冊。「Webサイトに動きをつける」より「プログラミングそのものを楽しみたい」人に刺さります。ゲームは変数・条件分岐・ループといった基本文法の使いどころが自然に全部出てくる題材なので、遊んでいるうちに土台が固まる、という仕掛け。お子さんと一緒に学ぶ題材としても人気があります。

ゲームで学ぶJavaScript入門 増補改訂版

WordPressを扱うなら

自分のサイトだけでなく「人に更新してもらうサイト」を作る段階になると、WordPressが避けて通れなくなります。HTML/CSSの本とは別に1冊持っておくと、管理画面の言葉とテーマファイルの中身がつながって一気に見通しがよくなります。

いちばんやさしいWordPressの教本 第7版 6.x対応

石川栄和・大串肇・星野邦敏/インプレス/2023年11月・第7版

WordPress入門書の定番で、サーバー契約からサイト公開までをひととおり走り切れる1冊。専門用語がほとんど出てこない語り口で、「そもそもレンタルサーバーとドメインは何が違うのか」という手前の疑問から拾ってくれます。テーマのカスタマイズよりもまず1つサイトを立ち上げて公開することに焦点があるので、コードを書く前の段階でつまずいている人にいちばん効きます。

いちばんやさしいWordPressの教本 第7版 6.x対応

初心者からちゃんとしたプロになる WordPress基礎入門

エビスコム/マイナビ出版/2021年7月

同じ入門書でも、こちらはテーマを自分で作る側に軸足があります。テンプレートファイルの役割分担やループの考え方といった「WordPressの仕組み」を、図で順を追って説明してくれるので、当サイトのWordPress関連記事で出てくる用語がまとめて回収できます。ひととおりサイトを公開できるようになった人の2冊目にちょうどいい厚みです。

初心者からちゃんとしたプロになる WordPress基礎入門

べんりワザACFとSCF、どっちを入れればいい?カスタムフィールドで管理画面に入力欄を増やす話は、こちらの記事へ1

動いたその先へ:読みやすいコードを書く

リーダブルコード

Dustin Boswell・Trevor Foucher/オライリー・ジャパン/2012年6月

「動くコード」から「読めるコード」へ進むための古典。変数の名前のつけ方、コメントを書くべき場所と書かなくていい場所、条件分岐の並べ方——どれも言われてみれば当たり前なのに、教わらないと一生自己流のままになるところです。分量が薄く1日で読み切れるのも美点。半年後の自分は他人なので、自分のためのコードを読みやすくする本だと思って読むと刺さります。

JavaScriptの入門書を1冊終えたあたりが、いちばん効くタイミングです。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

コードの外側:デザインの目を育てる

「動くようになったのに、なんだか野暮ったい」を抜け出すには、コードとは別の知識が要ります。デザインの原則・配色・フォント・レイアウトの本は、独立した記事にまとめました。

べんりワザデザインを学べる本デザインを学べる本13冊——まず買うべき1冊から、配色・フォント・UIまで分野別に

買う前に中身を確認するコツ

同じ分野でも本によって説明の粒度がまったく違うので、できれば買う前に中身をのぞいておきたいところです。

  • 目次を見る——知りたい範囲(HTML/CSSだけか、JavaScriptまで含むか)が含まれているか確認
  • 発行年を見る——Web制作の教材は情報が古くなりやすいので、改訂版・最新刷を優先
  • 演習の有無を見る——写経して手を動かすページがあるか。読むだけの本は入門書としては定着しにくい

書店なら数ページ立ち読み、ネット書店なら「試し読み」機能やレビューの中身(星の数より、どんな人が何につまずいたと書いているか)を見ると、自分に合うかの判断材料になります。

選び方の目安

  • これから始める(作りながら派) → Mana本か、1冊目の本
  • これから始める(じっくり派・PC操作も不安) → スラスラわかるHTML&CSSのきほん
  • 基本はできた、見た目を良くしたい → ほんの一手間で劇的に変わる
  • サイトに動きをつけたい → JavaScript「超」入門(理解派)か、Mana本JS版(結果先行派)
  • ゲームを作って遊びながら学びたい → ゲームで学ぶJavaScript入門
  • WordPressでサイトを公開したい → いちばんやさしいWordPressの教本
  • WordPressのテーマを自分で作りたい → WordPress基礎入門
  • 自分のコードを読みやすくしたい → リーダブルコード
  • なんか野暮ったい、の正体を知りたい → デザインの本(別記事にまとめました)

挫折しないための読み方3か条

どの本を選んでも、読み方しだいで結果は大きく変わります。

  1. コードは必ず自分で打つ——ダウンロード素材のコピペで済ませると、読み終わっても手が覚えていません。打ちまちがえてエラーを出すことこそが練習です
  2. エラーで止まったら成長のチャンス——本のとおりなのに動かないときは、たいていスペルミスか保存忘れ。エラーの読み方の記事を横に置いておくと安心です
  3. 完走してから次の本へ——7割理解でいいので最後のページまで。2冊を3割ずつより、1冊を1周したほうが確実に力になります

読み終えたら:本の外で1つ作ってみる

本のサンプルどおりに動いた——そこがゴールではなく、じつはスタートラインです。本で身につけた文法や手順を使って、自分で決めたお題を1つ作ってみると、知識が一気に自分のものになります。テーマが決まらないなら、自己紹介ページのような小さな1枚もので十分です。

本のサンプルには正解がありますが、自分のお題には正解がありません。「あれ、本には書いてなかった」というつまずきこそが、次に読む章や検索するキーワードを教えてくれます。

まとめ

  1. 本の強みは道のりが1本に整理されていること——サイトや動画のつまみ食いで空いたすき間を埋めてくれる
  2. 選ぶのは今の段階に合う1冊だけ——並行して何冊も買うより、1冊の完走が力になる
  3. 読み方は「自分で打つ・エラーを恐れない・完走する」——迷ったらHTML/CSSは「Mana本」、JavaScriptは「超」入門から
べんりワザ何から始めればいい?学ぶ順番の地図そもそも何から学ぶかの全体地図は、こちらの記事へ3

本は「買った日」ではなく「やり切った日」に効いてきます。1冊選んだら、最後のページまで一緒に走り切ってください。

よくある質問

Webサイトや動画で学べるのに、本は必要?
必須ではありません。ただ、本は基礎から応用までの道のりが1本に整理されていて、拾い読みした知識のすき間を埋めてくれます。手元に置いて辞書のように引けるのも本の強みです。
何冊も買ったほうがいい?
逆です。同じ分野の入門書を何冊も並行するより、1冊を最後までやり切るほうが力になります。まず1冊、途中の演習も飛ばさずに完走してから次を考えるのがおすすめです。
紙と電子書籍はどっちがいい?
コードを写しながら進める入門書は、画面の隣に開いておける紙が実は使いやすいです。電子はセールで安く買えて持ち運びも楽なので、通読中心のデザイン書は電子、手を動かす入門書は紙、という使い分けがおすすめです。
古い版を中古で買ってもいい?
おすすめしません。入門書は数年ごとに改訂されていて、古い版はツールの画面や書き方が現在と違うことがあります。「本のとおりにやったのに動かない」は挫折のいちばんの原因なので、最新版を選んでください。