2020年HTML・CSSの勉強に役立つ書籍・本まとめ

web-code

こんにちは、デザイナー・ブロガーの
ゆっきー(@elcielo_design)です。

今回は、HTML・SCCを
学べる本をまとめた記事になります。

スポンサーリンク

この記事の目次

HTML・CSSを本で学ぶ。

HTML・CSSの学習を始めようと決めた際、
教材として1番手に取り易いのは本ですよね。

ですが、実際に利用する書籍を探しても、
本当に数多くのものが販売されているので
どれを購入するか迷ってしまうと思います。

そこで、HTML・CSSを勉強するのに
役立つ本をレベル別に紹介していきます。

  • HTML
    Webデザイン (ページ) の土台になる言語。
    文字や画像は、この言語で表示されます。

  • CSS 
    サイトの様々な部分の大きさ、

    色、余白などが変更できる言語。
    デザインのビジュアルを装飾していくもの。

HTML・CSSの学習に役立つ書籍・本

「HTML・CSSの書籍の一覧」

 レベル・ジャンル  書籍名
 ① 超初心者向け
 デザインの学校
 これからはじめるHTML & CSSの本
 スラスラわかる HTML&CSSのきほん
 いちばんやさしい HTML&CSS 入門教室
 ② 初心者向け
 1冊ですべて身につく
 HTML&CSSとWebデザイン入門講座
 いちばんよくわかる
 HTML5&CSS3デザインきちんと入門
 世界一わかりやすい HTML5&CSS3
 コーディングとサイト制作の教科書
本当によくわかる HTML&CSSの教科書
インターネット技術の絵本
 ③ 初心者から中級者向け
 HTML&CSSとWebデザインが1冊で
 きちんと身につく本
 HTML5&CSS3 デザインブック
 ④ 中級者向け
 HTML5&CSS3 標準デザイン講座
 30LESSONS
 HTML5/CSS3 モダンコーディング
 HTML5&CSS3 レッスンブック
 HTML5&CSS3 デザインレシピ集
 Webデザイン良質見本帳
 Web制作必携 HTML&CSS全事典改訂版
 ⑤ 中級者から上級者向け
 Web制作者のためのCSS設計の教科書
 Web制作者のためのSassの教科書
 超速! Webページ速度改善ガイド
 これからの「標準」を学ぶ
 マルチデバイス対応サイト構築
 ⑥ HTML・CSSと合わせ 
 JavaScriptも学びたい人向け

 これからWebをはじめる人の
 HTML&CSS、JavaScriptのきほんのきほん
 ゲームを作りながら楽しく学べる
 HTML5+CSS+JavaScriptプログラミング
 ⑦ JavaScriptの本
 いちばんやさしい  JavaScript 入門教室
 本当によくわかるJavaScriptの教科書
 JavaScript コードレシピ集

以下でそれぞれ説明していきます。

スポンサーリンク

HTML・CSS超初心者向けの書籍・本

「HTML・CSS超初心者向けの書籍」

  • デザインの学校
    これからはじめるHTML & CSSの本
  • スラスラわかる HTML&CSSのきほん

  • いちばんやさしい HTML&CSS 入門教室

本当に初めてHTML・CSSを学ぶ人に
おすすめの超初心者向けの3冊です。

当たり前すぎることから解説してあるので
少しはHTML・CSSを知っている人は、
初心者向けの本の中から選びましょう。

デザインの学校
これからはじめるHTML & CSSの本

HTML・CSSの入門書の中でも、
非常に分かりやすい説明が特徴的な本。

 タイトル
 (書籍名)
 デザインの学校
 これからはじめるHTML & CSSの本
 価格  ¥2,178 (税込)
 発売日  2017/5/26
 特徴 ・基礎知識からよく使われるタグまで、
  丁寧に学べてとても分かり易い入門書。
・本自体のレイアウトやデザインも綺麗で
 読み進め易い。
ソフトをインストールする必要もなくて、
 メモ帳のみでも実践できるように構成
 おすすめの人 ・基本の基本からHTML・CSSを学びたい人
・他の本では難しくて挫折してしまった人
・スムーズなステップアップを踏むための
 基盤を作りたい人
 その他  

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

小さなカフェサイト制作を通して、
HTML&CSSを学べる入門書の一冊。

 タイトル
 (書籍名)
 スラスラわかる HTML&CSSのきほん
 価格  ¥2,178 (税込)
 発売日  2018/4/14
 特徴 ・累計4万部突破の前作の大改訂版
・写真や絵本を見るように楽しみつつ読める
・図解が多くて、難しい用語もきちんと補足
・PCだけでなくスマホやタブレットに
 対応したサイトが完成できるようになった。
 おすすめの人 ・サンプルコードも多いので、直感的に
 HTML・CSSのイメージを掴みたい人
 その他 ・「楽しく読めた」と言う口コミも多数
・「いちばんよくわかる
 HTML5&CSS3デザインきちんと入門」と
 同じ著者の本。

いちばんやさしい HTML&CSS入門教室

WebエンジニアでUIデザイナーである
岩田宇史さんが執筆をされた
Webサイトの作り方を学べる書籍。

 タイトル
 (書籍名)
 いちばんやさしい HTML&CSS 入門教室
 価格  ¥2,178 (税込)
 発売日  2018/10/20
 特徴 ・説明がとても丁寧に書かれていて、
 初心者でもきちんと理解して読める。
実際のWeb現場のトレンドが反映してあり
 スマホ向けサイトに重点が置かれている。
 おすすめの人 ・Webデザイナー (プログラマー) として
 これから企業で活躍していきたい人
 その他  

② HTML・CSS初心者向けの書籍・本

「HTML・CSS初心者向けの書籍」

  • 1冊ですべて身につく
    HTML & CSSとWebデザイン入門講座
  • いちばんよくわかる
     HTML5&CSS3デザインきちんと入門

  • 世界一わかりやすい HTML5&CSS3
    コーディングとサイト制作の教科書
  •  本当によくわかる HTML&CSSの教科書

  • インターネット技術の絵本

ある程度HTML・CSSの基礎を
抑えることができるWebデザイン学習本。
特にはじめの3冊の書籍がおすすめです。

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

「Webクリエイターボックス」の
Manaさんが書かれたHTML・CSS入門本。

 タイトル
 (書籍名)
 1冊ですべて身につく
 HTML &CSSとWebデザイン入門講座
 価格  ¥2,486 (税込)
 発売日  2019/3/16
 特徴 Amazonのベストセラー本
・Webサイト制作するための基礎から始まり
 HTML・CSSの基本が初心者に分かり易く
 説明されている。
プロの現場で役立つテクニックのみならず
 使い易く美しいデザインを作るコツも記載
 おすすめの人 ・Webbデザイナーとして活躍したい人
 その他  

いちばんよくわかる
HTML5&CSS3デザインきちんと入門

多数の図解による読みやすさや
項目ごとの詳しい解説が特徴的な一冊。

 タイトル
 (書籍名)
 いちばんよくわかる
 HTML5&CSS3デザインきちんと入門
 価格  ¥2,728 (税込)
 発売日  2016/10/27
 特徴 ・図解が多数使われていて、読み易い上に
 それなりに深い内容まで勉強できる書籍。
・Web制作の全体像を把握しやすい構成。
・1つ1つの項目が丁寧に書かれている。
レスポンシブデザインやフレックス
 ボックスについてもきちんと解説
・情報量もある程度ある。
 おすすめの人 ・1つ1つ納得しながら学習を進めたい人
・タブレットやスマホも意識したサイトを
 作りたい人
 その他  

世界一わかりやすい HTML5&CSS3
コーディングとサイト制作の教科書

基礎から応用まで順序よく学べる
まさに教科書的なHTML&CSS学習本の一冊。

 タイトル
 (書籍名)
 世界一わかりやすい HTML5&CSS3
 コーディングとサイト制作の教科書
 価格  ¥2,948 (税込)
 発売日  2019/3/1
 特徴 ・教科書と言うだけあって、学校学ぶ感覚で
 読み進んでいける書籍。
・ブラウザ、サーバー等とは何かから始まり
 サイト制作の基礎や公開まで15レッスンで
 わかりやすく解説されている。
・各レッスンの章末には練習問題あり。
専門学校の教壇に立つ著者陣が
 実際の講義内容を体系立て構成される。
 おすすめの人 ・HTML・CSSを学ぶ初心者
 その他  

本当によくわかる HTML&CSSの教科書

HTML・CSSが勉強できる一冊。

 タイトル
 (書籍名)
 本当によくわかる HTML&CSSの教科書
 価格  ¥1,958 (税込)
 発売日  2018/9/21
 特徴 ・サンプルサイト作成を通してWeb制作の
 様々なテクニックを身につけられる。
・Webサイトを公開するまでの手順や
 ファイルの設置方法、SNSのogpタグの
 書き方までしっかり説明されている。
この本はコードを書いては
 消す方式なのでテンポは悪い。
 おすすめの人 ・Web制作から公開までの一通りのことを
 学びたい人
 その他  

インターネット技術の絵本

そもそもインターネットがどんな仕組みか
知りたい人に向けて書かれた書籍。

 タイトル
 (書籍名)
 インターネット技術の絵本
 価格  ¥1,848 (税込)
 発売日  2009/8/28
 特徴 ・インターネット全般の基礎知識の解説本
・イラストが豊富に使われていて、
 知識がなくてもスムーズに読み進めれる。
・HTML・ CSSについても書かれているが
 メインという訳ではない。
・発売日が少し古いが、Webの根本的
 技術が取り上げられているので今も役立つ
 おすすめの人 ・インターネットってどういう仕組みなの?
 Webって何?って疑問に思っている人
 その他 あくまでHTML・CSSの勉強本の
 プラスαで
読むのが良い。

③ HTML・CSS初心者から中級者向けの
書籍・本

「HTML・CSS初心者から中級者向けの書籍」

  • HTML&CSSとWebデザインが1冊で
    きちんと身につく本
  • HTML5&CSS3 デザインブック

初心者・中級者どちらの人も役立つ
書籍を紹介しています。

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

Webサイト制作に必要なHTML・CSSの
知識に加え、Webデザインの定番の
レイアウトやデザインを学べる書籍。

 タイトル
 (書籍名)
 HTML&CSSとWebデザインが1冊で
 きちんと身につく本
 価格  ¥2,508 (税込)
 発売日  2017/7/21
 特徴 ・チュートリアル形式で、サンプルサイトを
 作りつつ必要な知識を順番に身につけれる
複数のレイアウトを一冊で学べる。
・実践的なテクニックも多く掲載。
・サンプルサイトは見栄えも拘ってある。
・サンプルデータがダウンロード可能。
 おすすめの人 ・Webデザイナーとして活躍したい人
 その他  

HTML5&CSS3 デザインブック

HTML・CSSが学べる定番の書籍。

 タイトル
 (書籍名)
 HTML5&CSS3 デザインブック
 価格  ¥2,860(税込)
 発売日  2014/10/28
 特徴 ボックスのレイアウト手法を徹底的に解説
・Webサイトを実際に作る流れで内容が進む
・「ブログ・ニュース系サイト」と
 「ビジネス系サイト」の実例を1から作成。
・HTML・CSSのかなり超基礎的な内容なし
 おすすめの人 ・Web制作の流れも慣れておきたい人
 その他  

④ HTML・CSS中級者向けの書籍・本

「HTML・CSS中級者向けの書籍」

  • HTML5&CSS3 標準デザイン講座
    30LESSONS
  • HTML5/CSS3 モダンコーディング

  • HTML5&CSS3 レッスンブック
  • HTML5&CSS3 デザインレシピ集

  • Webデザイン良質見本帳
  • Web制作必携 HTML&CSS全事典改訂版

ある程度Webデザイン (HTML・CSS) の
知識がある人向けの学習本になります。

中級者向けの書籍は、
「今まで何かしらの言語を勉強した人」
「HTMLのコードを少しは知っている人」
そういった人を対象に選んでいます。

初心者向けの書籍を読み終えた人、
上記に当てはまる人はこれから紹介する
書籍を参考に学習をしてみましょう。

HTML5&CSS3 標準デザイン講座
30LESSONS

HTML5&CSS3について
詳しくまとめられた書籍。

 タイトル
 (書籍名)
 HTML5&CSS3 標準デザイン講座
 30LESSONS
 価格  ¥2,838 (税込)
 発売日  2019/5/24
 特徴 ・分かり易さと内容の充実度で好評であった
 入門書の全面改訂版。
・講義パートと実習パートから成る。
 おすすめの人 ・Webデザインを独学してきた人や
 Webデザイン中級者で知識を整理したい人
 その他  

HTML5/CSS3 モダンコーディング

フロントエンジニアと活躍する方が
執筆したおすすめのWebデザイン学習本。

 タイトル
 (書籍名)
 HTML5/CSS3 モダンコーディング
 価格  ¥2,948 (税込)
 発売日  2015/11/3
 特徴 ・主流Webデザインの作り方やテクニックを
 幅広く学べる。
3つのサンプルサイトを実際に作っていく
 学習形式になっている。
・デベロッパーツールの使い方等にも触れて
 結構実用的な良書。
・解説が専門的で画像が少なめ。
 おすすめの人 ・サイト制作の流れから、色々なWeb
 デザインの作り方やテクニックを学びたい人
 その他 ・この本で制作する3つのサンプルは
 ネットで誰でもチェックすることが可能。
 ① スタンダードレイアウト
 ② グリッドレイアウト
 ③ シングルページ

HTML5&CSS3 レッスンブック

Mac・Windowsに付属のソフトを用いて
手を動かしつつ知識を身につけられる本。

 タイトル
 (書籍名)
 HTML5&CSS3 レッスンブック
 価格  ¥2,640 (税込)
 発売日  2013/5/24
 特徴 ・応用テクニックが多数載っている。
・ページ数も全320とボリュームがあるが、
・すぐ理解できるほど解説が分かりやすい。
 おすすめの人 ・Webデザイン中級者
 その他  

HTML5&CSS3 デザインレシピ集

HTML5&CSS3の逆引きに使える
便利なWebデザインテクニック集。

 タイトル
 (書籍名)
 HTML5&CSS3 デザインレシピ集
 価格  ¥3,025 (税込)
 発売日  2017/2/22
 特徴 ・制作現場で使われる定番テクニックから
 プロの技までテーマ別に解説されている。
・実現したいコーディングがすぐ理解できる
 逆引き事典のような構成
 おすすめの人 ・Webデザイン中級者
 その他  

Webデザイン良質見本帳

HTML・CSSの学習本とは言えないですが、
Webデザインの見本が並ぶ書籍。

 タイトル
 (書籍名)
 Webデザイン良質見本帳
 価格  ¥2,530 (税込)
 発売日  2017/6/16
 特徴 ・ただ見本が載っているのでなくて、
 何がどう良いのか?、どんな表現方法があり
 ポイントはどこか?等についてきちんと解説
・デザインパターン、レイアウトも豊富。
具体的にコードについては説明なし
 おすすめの人 ・どんなWebデザインの表現をするか
 迷っている人
 その他  

Web制作必携
HTML&CSS全事典改訂版

手元に置いて引き易い定番の
HTML・CSSの最新仕様版の事典。

 タイトル
 (書籍名)
 Web制作必携 HTML&CSS全事典改訂版
 価格  ¥2,068 (税込)
 発売日  2020/2/14
 特徴 ・HTMLとCSSの要素・プロパティごとの
 サンプルコードがあり、使用例が分かる。
・100以上のプロパティやセレクターが追加
・グリッドレイアウトやCSS4モジュール対応
 おすすめの人 ・日常的な業務でHTMLやCSSを扱う人
 その他 ・参考書として持っておくと良い本

⑤ HTML・CSS中級者〜上級者向けの
書籍・本

「HTML・CSS中級者〜上級者向けの書籍」

  • Web制作者のためのCSS設計の教科書
  • Web制作者のためのSassの教科書

  • 超速! Webページ速度改善ガイド
  • これからの「標準」を学ぶ
    マルチデバイス対応サイト構築

Webデザイン中級者・上級向けの
HTMLとCSSに関する本を中心に、
一人前のデザイナーなら知っておきたい
知識が紹介されてる本を紹介しています。

Web制作者のためのCSS設計の教科書

CSSをより管理しやすいようにするための
設計について解説している書籍。

 タイトル
 (書籍名)
 Web制作者のためのCSS設計の教科書
 価格  ¥2,420 (税込)
 発売日  2014/7/24
 特徴 ・Webデザインの制作だけでなく、
 Webサイトの運用も意識できる本。
・コードを綺麗に書くことで管理や修正が
 しやすくなることを説明してくれる。
 おすすめの人 ・「思い通りに表示させる」だけでなくて、
「修正やメンテナンスしやすい」レベルで
 CSSを使いこなしたい人
 その他  

Web制作者のためのSassの教科書

SassというCSS管理をスムーズに効率的に
書けるための方法を紹介している書籍。

 タイトル
 (書籍名)
 Web制作者のためのSassの教科書
 価格  ¥2,640 (税込)
 発売日  2017/9/15
 特徴 ・SassでのCSSファイル作成方法を学べる。
・ネスト、変数、演算等の基本から
 仕事で使える実践的テクニックまで網羅。
 おすすめの人 ・CSSの記述法やテクニックを一通り学び
 使いこなせるようになった方
 その他 ・Webデザイン制作会社で働きたい人は、
 特にチェックしておきたい一冊。

超速! Webページ速度改善ガイド

Webサイトの表示速度を速くするための
様々な方法が紹介されている書籍。

 タイトル
 (書籍名)
 超速! Webページ改善ガイド
 価格  ¥2,838 (税込)
 発売日  2017/11/23
 特徴 ・レンダリング処理、スクリプト処理、
 ネットワーク処理等のそれぞれの分野での
 知識やテクニックが紹介されている。
 おすすめの人 ・Webでのパフォーマンス改善を学びたい人
 その他  

これからの「標準」を学ぶ
マルチデバイス対応サイト構築

様々なデバイスで思い通り表示するための
マルチデバイスに対応をしたWebサイトの
制作方法を紹介している書籍。

 タイトル
 (書籍名)
 これからの「標準」を学ぶ
 マルチデバイス対応サイト構築
 価格  ¥3,278 (税込)
 発売日  2015/4/23
 特徴 ・サイトのマルチデバイス対応に必要な
 ノウハウとテクニックが多数。
 おすすめの人 ・Googleが提供するモバイルフレンドリー
 テストやPageSpeed Insightsでなかなか
 スコアが上がらない人。
 その他  

⑥ HTML・CSSと合わせJavaScriptも
学びたい人向けの書籍・本

「JavaScriptも同時に学べる書籍」

  • これからWebをはじめる人の
     HTML&CSS、JavaScriptのきほんのきほん
  • ゲームを作りながら楽しく学べる
     HTML5+CSS+JavaScriptプログラミング

HTML&CSSだけでなくJavaScriptも
学習していける本になります。

これからWebをはじめる人の
HTML&CSS、JavaScriptの
きほんのきほん

Webデザインの「きほんのきほん」から
広範囲の内容を掴みたい人向けの書籍。

 タイトル
 (書籍名)
 これからWebをはじめる人のHTML&CSS、
 JavaScriptのきほんのきほん
 価格  ¥2,838 (税込)
 発売日  2017/3/27
 特徴 ・HTML&CSS、JavaScriptの基礎を
 一冊でしっかり学べる本。
・Ajax、jQuery、Vue.jpまで説明してあり
 幅広いWeb技術の知識に触れられる。
Webの設計や公開方法等のサイト制作に
 必要な知識を得るための本ではない。
 おすすめの人 ・HTML&CSS、JavaScript初心者
 その他  

ゲームを作りながら楽しく学べる
HTML+CSS+JavaScript
プログラミング [改訂版]

ゲームを作って学んでいく形の
HTML・CSS・JavaScriptの学習本。

 タイトル
 (書籍名)
 ゲームを作りながら楽しく学べる
 HTML5+CSS+JavaScriptプログラミング
 価格  ¥2,750 (税込)
 発売日  2017/4/4
 特徴 ・一般的なHTML&CSS学習本と違って、
 簡単なゲームを作りながら学べる本
・初心者に易しい構成で、基本的なことから
 解説してくれる。
・習得した知識を確認する演習も豊富。
・改訂版なのでソースコードやゲーム制作に
 使える画像もダウンロード可能。
 おすすめの人 ・ゲーム好きでHTML&CSS、JavaScriptを
 学びたい人。
 その他  

⑦ JavaScriptの書籍・本

「JavaScriptの書籍」

  • いちばんやさしい JavaScript 入門教室
  • 本当によくわかる JavaScriptの教科書

  • JavaScript コードレシピ集

JavaScriptを別で学びたい人向けの本。

いちばんやさしい JavaScript入門教室

上記で紹介した「いちばんやさしい
 HTML&CSS 入門教室」
のJavaScript版。

 タイトル
 (書籍名)
 いちばんやさしい JavaScript 入門教室
 価格  ¥2,728 (税込)
 発売日  2018/6/21
 特徴 ・複雑なアニメーションや処理を行うための
 JavaScriptの基礎が学べる本。
 おすすめの人 ・HTML・CSSを学んだあと、JavaScriptを
 学びたい人。
 その他  

本当によくわかる JavaScriptの教科書

上記で紹介した「本当によくわかる
 HTML&CSSの教科書」のJavaScript版。

 タイトル
 (書籍名)
 本当によくわかる JavaScriptの教科書
 価格  ¥2,178 (税込)
 発売日  2018/6/8
 特徴 ・丁寧で分かり易い文章と多くの図解
・本を読みながらサンプルファイルに
 コードを書いていく形式で学べる。
・スライドショー、ギャラリー、地図、
 ハンバーガーメニュー、背景に動画を流す等
 機能の作り方が載っている。
 おすすめの人 ・HTML・CSSを学んだあと、JavaScriptを
 学びたい人。
 その他  

JavaScript コードレシピ集

上記で紹介した「HTML5&CSS3
デザインレシピ集」
のJavaScript版。

 タイトル
 (書籍名)
 JavaScript コードレシピ集
 価格  ¥3,278 (税込)
 発売日  2019/1/25
 特徴 ・制作現場で使われる定番テクニックから
 プロの技までテーマ別に解説されている。
・実現したいコーディングがすぐ理解できる
 逆引き事典のような構成
 おすすめの人 ・Webデザイン中級者
 その他  

HTML・CSSの書籍の選び方

HYMLとCSSは色んな本が発売されていて
どの本を選択すればいい分からない人も
いるかもしれませんが、書籍を選ぶ際は
次のポイントに気をつけると良いです。

  • 自分のレベルに相応しいこと
  • 最後までやりきれそうな書籍を選ぶこと

まずは、自分のレベルに相応しい書籍
選ぶようにしましょう。

自分のレベルより難しい書籍を選ぶと、
内容をしっかり理解することができず、
最後までやりきれたとしても
知識が限れれてしまう恐れがあります。

逆に自分のレベルより簡単な書籍を選ぶと、
知ってることだらけで途中で飽きてしまい
すぐ読み飛ばしてしまう可能性もあります。

また、最後までやりきれそうな書籍
選ぶというのもとても重要なポイント。

分厚い書籍を選択してしまうと、
途中で投げ出してしまうこともあります。

なるべく、最初は手に取り易いような簡単な
書籍を選ぶようにして、それをやり終えたら、
もう少しステップアップした内容の書籍で
勉強するという風に是非してみましょう。

そのように1つ1つの書籍をこなすことで、
知識を得ていった方が偏りなく着実に
スキルを身につけることができるでしょう。

まとめ

以上が、HTML・SCC、JavaScriptの
学べる本と選び方のまとめでした。

Web制作にはHTMLとCSS以外にも
様々な言語が存在していますが、
基本はこの「HTML」と「CSS」です。

まずはHTML・CSSのスキルを身につけて、
Webデザイン (プログラミング) 学習の
第一歩を是非踏み出してみて下さい。

なお、その他のWebデザインに関する
本は次の記事に一通りまとめています。

スポンサーリンク

シェアする