【2020版】HTML/CSS本「人気ランキング20 / おすすめ参考書9選」

スポンサーリンク

Web制作の基本中の基本である「HTML/CSS」。

PHPやRuby、JavaScriptなどもあれど、結局はWebサイトはHTMLとCSSで表示されています。

Web上でコンテンツを公開・開発するなら、一定以上の知識は必須といえるのがこのHTML/CSS。

Web制作でも、Webデザイナーでも、ブロガーでも、すなわちWebに関わる人全てが知っておきたい「HTML/CSS」、そのの参考書を人気/評価とともに紹介していきまっす。

 

発売したての新書をピックアップ
技術書は情報の鮮度も重要、人気ランキングの前に新しい書籍もチェックしておきましょう。




 

HTML/CSS本「人気ランキング」

HTML/CSSの今売れ筋本を人気ランキングで一覧したのが以下。

ランキングは日々更新されていますので、最新の人気が反映されています。

 

(2020/06/02 更新)
売筋
Rank
製品評価
1
(4.3)
総評価数 141件
2
(3.5)
総評価数 5件
3
(4.3)
総評価数 12件
4
スラスラわかるHTML&CSSのきほん 第2版
発売日 2018/04/14
通常    2,178円
単行本   2,178円
Kindle   1,960円(10%OFF)
(4.3)
総評価数 67件
5
ゲームで学ぶJavaScript入門 HTML5&CSSも身につく!
発売日 2015/12/11
通常    2,640円
単行本   2,640円
Kindle   2,178円(17%OFF)
Kindle Unlimited(読み放題)
(3.7)
総評価数 23件
6
(3.6)
総評価数 17件
7
HTML&CSSとWebデザインが 1冊できちんと身につく本 大型本
発売日 2017/07/21
通常    2,508円
単行本   2,508円
Kindle   2,508円
(4.1)
総評価数 58件
8
(3.5)
総評価数 3件
9
(3.6)
総評価数 47件
10
HTML & CSS3 レイアウトブック
発売日 2016/12/20
通常    2,838円
単行本   557円(80%OFF)
Kindle   2,838円
Kindle Unlimited(読み放題)
(3.3)
総評価数 4件
11
できるポケット HTML5&CSS3/2.1全事典 できるポケットシリーズ
発売日 2015/03/06
通常    1,848円
単行本   1,049円(43%OFF)
Kindle   1,584円(14%OFF)
Kindle Unlimited(読み放題)
(4.3)
総評価数 18件
12
(4.4)
総評価数 24件
13
世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書...
発売日 2019/03/01
通常    2,948円
単行本   2,948円
Kindle   2,801円(5%OFF)
(4.3)
総評価数 30件
14
これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん...
発売日 2017/03/27
通常    2,838円
単行本   2,838円
Kindle   2,696円(5%OFF)
(3.8)
総評価数 19件
15
(3.6)
総評価数 17件
16
HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)...
発売日 2014/10/28
通常    2,860円
単行本   2,860円
Kindle   1,323円(54%OFF)
(3.9)
総評価数 65件
17
よくわかるHTML5+CSS3の教科書【第3版】
発売日 2018/12/03
通常    6,698円
単行本   3,080円(54%OFF)
Kindle   2,772円(59%OFF)
(3.2)
総評価数 8件
18
初心者からちゃんとしたプロになる Webデザイン基礎入門〈HTML、CSS、レスポンシブ〉...
発売日 2019/09/25
通常    6,647円
単行本   2,750円(59%OFF)
Kindle   2,613円(61%OFF)
(4.2)
総評価数 16件
19
HTML5 & CSS3 デザインレシピ集
発売日 2017/02/22
通常    3,025円
単行本   3,025円
Kindle   2,874円(5%OFF)
(3.8)
総評価数 23件
20
HTML5&CSS3レッスンブック
発売日 2013/05/24
通常    2,640円
単行本   2,640円
Kindle   2,444円(7%OFF)
(4.3)
総評価数 35件

 

以降でおすすめ・注目の本をピックアップしていきまっす。

ちなみに、Kindle版のある本ならサンプル送信で試し読み可能。大概目次まで見れるので、内容の概要もつかめるので、サンプル試読おすすめです。

 

基礎から学ぶ!「HTML/CSSおすすめの入門書」

Web制作未経験かつプログラム未経験の方は、まずは何よりもとっつきやすさや、わかりやすさを重視して、途中で折れないこと、意外と簡単なんだと自信をつけることが重要。

そのため、以下のような読みやすい入門書から初めて見るのがおすすめです。

ちなみにぼくは 「いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)」 で最初は勉強しました。

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

ベストセラーが大改訂!

※この電子書籍は、「固定レイアウト型」で配信されております。説明文の最後の「固定レイアウト型に関する注意事項」を必ずお読みください。

4万人が学んだベストセラーが、5年ぶりの大改訂!

小さなサイト作りを通してHTMLとCSSの基礎が学べる入門書の決定版!
第2版ではPCだけでなくスマホやタブレットにも対応したサイトが完成します。
ソースコードは現在のトレンドに合わせ、解説もいっそう丁寧にわかりやすくなりました。

これからWeb制作を始める人にも、HTML/CSSを学び直したい人にもおすすめの、充実の内容です!

最新HTML5.2準拠。Windows/Mac対応

●目次
chapter01 Webサイト制作を始める前に
 01 Webサイトとその構成要素
 02 Webブラウザの機能と種類 ほか
chapter02 HTMLの基礎
 01 HTMLはWebページを制作するための言語
 02 HTMLの基本的な書式 ほか
chapter03 制作の準備と基本のHTML
 01 Webサイト制作の準備
 02 すべてのHTMLで共通するタグ
chapter04 見出し、段落、リスト
 01 見出しテキスト
 02 テキストの段落 ほか
chapter05 リンクと画像の挿入
 01 サイト内リンクと相対パス
 02 外部サイトへのリンクと絶対パス
 03 画像の表示 ほか
chapter06 2ページ目以降を効率的に作成する
 01 index.html以外のファイルの作成
 02 段落にテキストと画像を含める
 03 テキストを太字にする・改行する ほか
chapter07 CSSの基礎
 01 HTMLの「見た目」を整えるCSS
 02 CSSの基本的な書式
 03 主なセレクタと書き方 ほか
chapter08 CSSでページのスタイルを調整
 01 背景色の設定
 02 テキスト色、フォントサイズの設定
 03 マージン、ボーダー、パディング ほか
chapter09 フロートとテーブルのスタイル
 01 テキストの回り込み
 02 テーブルの整形 ほか
chapter10 フォームの作成
 01 フォームの基礎知識
 02 お問い合わせページの概要
 03 フォーム全体の親要素 ほか
chapter11 モバイル端末に対応する
 01 レスポンシブデザイン
 02 ビューポートの設定
 03 画像をレスポンシブデザインに対応させる ほか
chapter12 Webサイトの公開
 01 Webサイト公開までの準備
 02 Webサーバーに接続 ほか

固定レイアウト型に関する注意事項(必ずお読みください)
この電子書籍は、全ページ画像の「固定レイアウト型」で配信されております。以下の点にご注意し、購入前にプレビュー表示をご確認の上、ご購入ください。

■使用できない機能
・文字拡大(ピンチイン・ピンチアウトは可能ですが、画面におさまらない場合は画面をスワイプ)/文字のコピー/マーク/ハイライト/文字列検索/辞書の参照/Web検索/引用

■推奨環境
・タブレットなど大きいディスプレイを備えた端末
・Wi-Fiネットワーク経由でのダウンロード(Kindle端末の場合)

↓全て表示↑少なく表示
 
 
Users Voice
HTMLとCSSの勉強をしようと思って買った本です。
基本的にわかりやすく、説明も丁寧でいいです。しかし、あまりにもスラスラ読まてしまい理解する努力を怠ると、最後の方には何も残りません。
入門書としては完璧ですが読む人の努力度によってどれほどマスターできるかが変わります。しかし1週間ちょっとで1周は読めるので、1か月間でヘビロテすれば完璧です! (参考:Amazon)

↓全て表示 ↓少なく表示
webサイト作成の「体験」をするという意味ではとても簡単でスラスラ進めます。
読み終えた後はなるべく本を見ないで自分だけで同じようなページを作ることでコーディング作業にもそこそこ慣れます。
まずはこの本から入り本格的にHTML、CSS、その他のプログラミング言語を学ぶといいと思います。 (参考:Amazon)

↓全て表示 ↓少なく表示
 
スラスラわかるHTML&CSSのきほん 第2版
発売日 2018/04/14
通常 2,178円
現在 1,960円
218円(10%)OFF!!

  

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

これから本気で学びたい人の最高の教科書!

レスポンシブWebデザインが“当たり前"の時代の、新しいHTML・CSSの書き方ガイド

現在のHTML・CSSの書き方は、少し前までのHTML・CSSの書き方とは大きく変わっています。本書ではスマートフォン時代に求められる、HTMLを組むときの考え方からCSSの実践的なテクニックまでをきちんと解説。たくさんのサンプルコードに触れていただくことで、最新の、実践で役立つ力がきちんと身につきます。

<本書の対象読者>
● これからWebサイト制作を学びたい初心者の方
● 最新のHTML・CSSの書き方を知りたい経験者の方
● フレックスボックスを使ったページレイアウトについて知りたい方

↓全て表示↑少なく表示
 
 
Users Voice
現在web制作の現場では主流になりつつある(もうなっている?)flex-boxのコーディング方法がとても丁寧に解説されています。全体的に初心者向けの言葉を選びながらわかりやすく解説されています。意外とwebサイトのコーディング方法は十人十色で、ルールなどの基礎をしっかり固めたい、といったキャリアのある方にもとてもオススメです。スラスラとページをめくるのが進む書籍です。 (参考:Amazon)

↓全て表示 ↓少なく表示
他の方の評価にもあるように一つ一つの項目について非常に丁寧な説明がなされており、web初心者を想定してか html とはなんぞやというところから解説が始まります。新旧問わず定番のcssタグについてはもちろん、後半では現在主流になってきている「フレックスボックス」の作り方にも触れ、押さえておきたい最新の知識も学べるつくりです。本自体のデザインもオシャレでセンスのある人たちがつくったんだろうなという信頼も置けます。
一見すると欠点がないかのように見えますが、難をあげれば、よほどリリースを急いだのか校正担当者がザルだったのか誤字が多いことと、9章までの「こういう風に記述するんですよ」とサンプルを確認していく流れから、10章では「では実際に作成していきましょう」との文言があり実践的な練習作業ができるかと思いきや、完成したサンプルと工程途中のhtmlが用意されているだけで結局サンプルを眺めるだけで終わってしまうという何とも肩すかしな終わり方になっていることです。9章までも、読者にいくらか手を動かす余地を入れた方がただ読み眺めておしまい♫よりは習得度の実感も湧きやすいと思います。その点で「ー★」ですが、cssの基礎を学べる良書には間違いないと感じました。 (参考:Amazon)

↓全て表示 ↓少なく表示
 
  

初心者からちゃんとしたプロになる Webデザイン基礎入門

初心者からちゃんとしたプロになる Webデザイン基礎入門
(著)栗谷 幸助, おの れいこ, 藤本 勝己, 村上 圭
発売日 2019/09/25
(4.2)

この商品は固定レイアウトで作成されており、タブレットなど大きいディスプレイを備えた端末で読むことに適しています。また、文字列のハイライトや検索、辞書の参照、引用などの機能が使用できません。

〈電子書籍版に関する注意事項〉
本書は固定レイアウト型の電子書籍です。リフロー型と異なりビューア機能が制限されるほか、端末によって見え方が異なりますので、ご購入前にお使いの端末にて「無料サンプル」をお試しください。

【1日30分からはじめる! プロを目指す人の新・スタンダード。】

WebデザインやHTML・CSSの学習を「1日30分からはじめる」をテーマに、やさしくしっかり解説した書籍。初学者の方が、プロのWebデザイナーを目指す上で必要となる基本的な知識や技術を体系的に学べます。“ちゃんとしたプロ”のWebデザイナーとしてスタート地点に立つために、最初に選んでいただきたい1冊です。

Webサイトの実制作のフローに沿い、本書の解説では、Webデザインの概論と制作に必要となるツールや素材・配色について学んだあと、HTML・CSSの基礎と実践を習得し、サイトの公開や運用に関する知識を身につけます。HTML・CSSの書き方を初歩から教えるだけにとどまらず、サイトを制作し、公開・運用していくために必要な基本知識をすべて解説しています。

また、各記事ごとに学習時間の目安を記載しており、授業や独習で学習教材として活用しやすい作りを目指しました。HTML・CSSの実践部分でサンプルサイトとして制作するのは、シングルページのシンプルなお店のサイトと、モバイルファーストの手法を取り入れたサイトの2つです。サンプルは学習用データとしてダウンロード提供します。

〈こんな方にオススメ〉
・初学者からプロのWebデザイナーやマークアップエンジニアを目指す方
・Webデザイン制作やHTML・CSSの知識を身につけたい方
・WebデザインやHTML・CSSの基本情報をアップデートしたい方

〈本書の章構成〉
○Lesson1 Webサイトの成り立ち
○Lesson2 Webサイトの枠組みを知る
○Lesson3 Webデザインに必要な素材
○Lesson4 HTMLをマスターする
○Lesson5 CSSをマスターする
○Lesson6 シングルページのサイトを作る
○Lesson7 レスポンシブ対応サイトを作る
○Lesson8 Webサイトを公開してみよう
○Lesson9 SNS連携とWebサイトの運用

↓全て表示↑少なく表示
 
 
Users Voice
講師業としてwebデザイン+フロントエンドを教えています。
「webデザイン」のタイトルがつく本書には、フォトショップやXD, Sketch等のデザインツールやデザインの作り方の話はなく、「webデザイン」に関連する記述としては「webサイトで使う素材や技術」の基礎知識中心なので、その点は注意です。
「webデザインを学んでみよう」と思った方がHTMLやCSSという技術の壁にぶち当たってしまったときに、まず手にとってみるとよいのが本書です。後半では実際にページを2つ作れますので、理論→実践の流れとしても良いと感じました。
教えている側としても、前半の理論パートでは逆引き的に学生さんに使ってもらいつつ、後半でテストがわりではないですが、チャレンジしてもらえる流れを作れるので、初学者・初心者におすすめしてみようと考えています。 (参考:Amazon)

↓全て表示 ↓少なく表示
これからWebデザインを勉強したい人にオススメなのは言わずもがななのですが、そんな風に学習している最中の人に最適な知識と情報を届けるために、これは本当にバイブルになります。初学者の方だけでなく教える立場の人にもオススメの1冊。
自分にとって既知の知識を、より分かりやすく伝えるためのエッセンスがぎっしりです! (参考:Amazon)

↓全て表示 ↓少なく表示
 
初心者からちゃんとしたプロになる Webデザイン基礎入門
発売日 2019/09/25
通常 6,647円
現在 2,613円
4,034円(61%)OFF!!

  

 

脱初心者!「HTML/CSS全体像をしっかり学ぶ書籍」

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

★★★★★★★★★★★★★★★★★★★★★★★★★★★
【全国の書店員さんがオススメする本「CPU大賞」第1位受賞!】
【感謝を込めて、期間限定 購入者特典!!】
本商品を2020/2/24(火)00: 00から2020/5/29(金)23: 59までにご購入いただくと、「CSS Flexbox チートシート データ」の特典が受けられます。
商品出荷時にダウンロードURLをメールにてお知らせします。ダウンロードURLをお届けするためにメールが送信されますので、ご了承のうえご購入ください。
なお、特典のダウンロード期限は2020/8/27(木)23: 59となります。
お忘れないようにご注意ください。
★★★★★★★★★★★★★★★★★★★★★★★★★★★

今、一番売れているHTML本!
大反響! 9刷突破の大ヒット!
全国の書店員がオススメする本(CPU大賞)第1位!
2019年上半期売上 第1位!※
Web制作に必要な知識がすべて身につく!
※日販売上げランキング: HTML関連書籍

----------------------------------------------------------------------------
Web界隈やデザイナーに大人気!
Web関連の情報やデザインについて記事が学べる『Webクリエイターボックス』の中の人、
Manaによる渾身のHTML & CSSとWebデザインが学べる本
----------------------------------------------------------------------------

今のWebサイトの作り方が一気に学べる!

・知識ゼロから体系的に学べる!HTMLとCSSの基本
・最新の技術に対応!レスポンシブ、Flexbox、CSSグリッド
・手を動かしながら学べる!プロの現場で役立つテクニック
・コードの知識からデザインのことまで1冊ですべて学べる!

WebクリエイターボックスのManaが教える
Webサイト制作の定番&旬のスキル。
この1冊で必要なことがすべて学べる!

コードもデザインも全部学べる!


●本書の対象読者
・これからWebサイトを作り始める初心者
・HTMLとCSSを基本から学びたい人
・美しいデザインのWebサイトを作りたい人
・Webの最新技術を学びたい人


●CONTENTS
-----------------------------------------------
CHAPTER 1 最初に知っておこう!Webサイトの基本
CHAPTER 2 Webの基本構造を作る!HTMLの基本
CHAPTER 3 Webのデザインを作る!CSSの基本
CHAPTER 4 フルスクリーンのWebサイトを制作する
CHAPTER 5 2カラムのWebサイトを制作する
CHAPTER 6 タイル型のWebサイトを制作する
CHAPTER 7 外部メディアを利用する

↓全て表示↑少なく表示
 
 
Users Voice
普段はネット閲覧や通販サイトを利用する程度のIT知識保有者です。このたび自分でWebサイトが作りたくて手に取りました。(特にスマホに対応できるWebサイト)
Webサイトの仕組みや作り方、デザインについて、またテキストエディタやブラウザのダウンロード手順まで、分かりやすく書かれていて、IT初心者にもやさしい本でした。
演習では、スマホでも、パソコンでも見れる(レスポンシブな)素敵なカフェのWebサイトが作れます。
完成品のファイルもサポートページからダウンロードできるので、つまずいたときは(コードのスペル入力ミスなど)見比べてチェックしながらコーディングを進めることができるので、挫折することもなかったです。
演習は2回終えましたが、使わない技術は忘れてしまうので、要素を変更して完成品の変化を確認しながら何度も作りこんでいこうと思います。
Webサイト作りのはじめの一歩に、最適な本となりました。
今後はサイトに動きをつけたいので、JavaScriptの学習も始めました。それから、投稿型のサイトも作ってみたいので、サーバーサイドの言語も知りたいなと...することは盛りだくさんです。
未知の可能性が広がる、デジタルもの作りの世界へつれていってくれるオススメ本です! (参考:Amazon)

↓全て表示 ↓少なく表示
WEBページの仕組みから実際に作る過程まで
程よくまとまっている。
この本も良かったが、WEBデザイナーとして最先端を行き知識を体系立てて丁寧に説明するプロである著者のブログwebcreaterboxがこの本同等以上に素晴らしいから、興味ある記事を全部読んで実践出来る部分は実践すると良いだろう。私が読み込んだブログというのは非常に数少ない。 (参考:Amazon)

↓全て表示 ↓少なく表示
 
  

HTML5&CSS3デザイン 現場の新標準ガイド(特典PDF付き)

HTML5とCSS3をより深く理解し、使いこなしたい人のためのガイドブック

フロントエンドエンジニアの方や、Web制作に関わっていてHTML5/CSS3を使いこなしたい、と思っている人のためのガイドブックです。
思ったようなデザインをどう実現するか、現在の仕様がどのようになっているか、現時点で何に留意して制作を進めていけばよいか、制作の現場で必要不可欠な情報を凝縮しました。

現場でリファレンスとしてぜひ常備しておきたい、「現在」と「これから」の標準をまとめた1冊。
『HTML5スタンダード・デザインガイド』『CSS3 スタンダード・デザインガイド』『これからの「標準」を身につける HTML+CSSデザインレシピ』等でWebの仕様解説に定評のある著者の手による、渾身の最新刊です。

【内容】
Chapter 1 HTML
Chapter 2 Webページの作成とメタデータ
Chapter 3 コンテンツのマークアップ
Chapter 4 CSSの適用
Chapter 5 ボックスのレイアウト
Chapter 6 フレキシブルボックスレイアウト
Chapter 7 グリッドレイアウト
Chapter 8 テーブル
Chapter 9 テキスト
Chapter 10 エンベディッド・コンテンツ
Chapter 11 フォーム
Chapter 12 特殊効果

------------------------
期間限定! 特典PDF付きキャンペーン実施中! !

本書『HTML5&CSS3デザイン 現場の新標準ガイド』をAmazonにて
ご購入いただいた方に、特典PDFをプレゼントします! (Kindle版は対象外)

●特典PDFの申し込み方法や特典の詳細については、
「出版社からのコメント」欄掲載の当該キャンペーン紹介ページにてご確認ください。
当キャンペーンが始まる前に、すでに予約してくださった方もご応募いただけます。

●特典内容紹介
『HTML5&CSS3デザイン 現場の新標準ガイド​』要素/プロパティ&ブラウザ対応一覧(PDF)
今回ページ数の都合で入れられなかった「要素/プロパティ&ブラウザ対応一覧」のPDFをプレゼントします。
本文の参照ページも掲載してありますので、書籍と一緒にご活用ください。
この機会をぜひお見逃しなく!

↓全て表示↑少なく表示
 
 
Users Voice
内容はコーディングに必要な基本的作業方法が得られるものだと思います。
文字も小さすぎず大き過ぎず。カラーを使って説明してありますが、淡い邪魔にならないカラーデザインの図で見易いと思います。
例えば「boxを上部で固定したい!」と思った時に、逆引き辞書の様には使えないと思います(使うコードが分かっていれば索引から引けます)。
時間がある時にパラパラっと目を通して置いて、付箋などで気になる箇所にマークしておき「あれはどうやって書くんだっけ?」となった時にサッと見てみる‥という使い方をしています。
使用したコードの使い方が、どのブラウザに対応してどのブラウザが非対応なのかアイコンで一目で分かるのが便利です。 (参考:Amazon)

↓全て表示 ↓少なく表示
セマンティックマークアップの概念から始まり、メタデータの記述、CSSの仕様の詳細へと、一冊によくまとめられています。
こういった内容はネットでも拾えるようなものだと思いますが、それに対する労力(情報の鮮度の確認や、正確さの判断、また書き手の冗長な文章や知りたいこととは異なる情報を読み飛ばすことなど)を考えるとこの本を一冊持っておく方が断然効率的だと思います。
flexやgridなど情報の鮮度もよく、何より紙面のデザイン、配色、アイコンでの表示などで、情報が認識しやすく良い本だと思います。 (参考:Amazon)

↓全て表示 ↓少なく表示
 
HTML5&CSS3デザイン 現場の新標準ガイド(特典PDF付き)
発売日 2017/08/28
通常 3,289円
現在 3,289円

  

CSS設計完全ガイド ~詳細解説+実践的モジュール集

CSS設計の考え方と実践法が身につく

CSS設計は多くの現場で導入されていますが、いまだに悩みがつきません。プロジェクトの大小や性質によって最適解も変わってきます。
そこで本書は、CSSのさまざまな設計手法を紹介しつつ、考え方や実践のポイントを明確化します。そのうえでボタン、ラベル、カード、テーブル…といったウェブの定番的なモジュールを網羅的に取り上げ、さらにはそれらの組み合わせ方まで、実践的なコードを紹介します。
代表的な設計手法である「BEM」と、著者が開発した設計手法「PRECSS」によって対比的な解説を加えており、思考をなぞることで最適解が炙り出されることでしょう。
駆け出しのウェブ開発者、フロントエンドエンジニアの方に、ぜひ読んでいただきたい1冊です。

↓全て表示↑少なく表示
 
 
Users Voice
以前、某CSS設計本を買いましたが、コードの説明をあまりうまく解説されておらず、
また、BEMなどの説明も少し、著者の提唱するCSS設計手法の宣伝本みたいなイメージを持ってしまい、
半分挫折して、自分流なコーディングルールでやっていました。

この本は違い、著者の提唱するCSS設計手法の話だけでなくBEMなど著者の提唱するCSS設計手法以外の説明を十分にされていること、CSSの基礎から説明しながら、CSS設計とは何ぞやを100ページ以上にわたり説明しています。

また具体的にどういうレイアウトになるかという説明やどういうCSSかというの説明も十分にされており、
横文字ばかりの説明を最小限に抑えているのもプラスです。

概念だけではなく実際に使われる具体的な方法もわかりやすく説明しているため、
CSSをある程度勉強した初心者が1歩進めたいときや、
コーダーの教育にも非常に役立ちそうな本な気がします。 (参考:Amazon)

↓全て表示 ↓少なく表示
前半はCSSの歴史から始まり、どのようなポイントを意識しながら設計すれば大規模な開発でも耐えられるか具体的なコードとともにわかりやすく説明されている。
後半は前半で紹介されたポイントと照らし合わせながら、BEMとPRECSSのコードが大量に記載されており、理解した後はそのままサンプル集としても流用できる作りになっている。

私は趣味でHTML+CSSを使っているがいつもCSSの影響範囲を制御しきれず困っていた。この本で具体的なポイントが理解できたので、今後の開発に活かせると思う。

分厚くてタイトルもお堅いが、中身は非常に読みやすかった。どのようにCSSを定義していけばカオスにならずに済むのか気になっている人は読んで損はない書籍だと思う。 (参考:Amazon)

↓全て表示 ↓少なく表示
 
CSS設計完全ガイド ~詳細解説+実践的モジュール集
発売日 2020/02/27
通常 4,800円
現在 3,608円
1,192円(25%)OFF!!

  

 

サイトデザインのお手本に「デザイン参考書・レシピ本」

HTML5 & CSS3 デザインレシピ集

HTML5 & CSS3 デザインレシピ集
(著)狩野 祐東
発売日 2017/02/22
(3.8)

本書は、HTML5とCSS3によるWebサイト制作のための"おいしい"レシピ集です。
制作の現場で使われる定番テクニックから、プロ技まで余すところなく集めました。

テキスト/リスト/リンク/画像/ボックス/
テーブル/フォーム/ナビゲーション/
レイアウト/レスポンシブWebデザイン…

テーマ別にレシピを整理しているので、引きやすくなっています。
「あのデザインはどう作るんだろう?」が、スグにわかります。
デザイナーからWebプログラマーまで、Web制作に携わるすべての方にお届けします。

↓全て表示↑少なく表示
 
 
Users Voice
現役のウェブデザイナーです。
デザインレシピ集と銘打たれているので高度な事例を期待しましたが、レベルは初心者向けのhtml逆引き事典です。
知っていて当たり前のことばかりですので、残念ながら得るものはありませんでした。
ただ、本自体はきれいにまとまっていて見やすいので初心者の方であれば有用なのかもしれません。

○良い点
・一つの表現でも複数のやり方が提示されている(レイアウトの方法でflexboxとfloat両方のやり方を載せているなど)

✕悪い点
・タイトル 解説詐欺。期待はずれです。基本的な内容で初心者向けであると明示していただきたかった。

本書の想定される活用シュチュエーション
・html cssの入門書1冊は終え本格的に自分のサイトを作ろうという初学者の副読本
かなと思います。 (参考:Amazon)

↓全て表示 ↓少なく表示
"デザインレシピ集" という言葉から通常想像するであろう内容とはかけ離れています。
かなり基本的なコードがほとんどです。むしろ、ここまで基本的なコードがデザインレシピ?
という感想で驚くべき書籍です。

本来ならタイトルと中身のずれもあり、レビュー評価は低くしたいところですが、
いやいや、この書籍は案外使えるのです。
なぜなら、その基本的なコードについて一つ一つかなり詳しく解説されているからです。
特に同じデザインをするにも状況別に数パターン書かれていて、現在主流の方法についても
理由とともに解説されていたりする。
これはWebデザインやコーディングを仕事としている方にも、よく読めば
知らなかったことや新しい発見も多いのではないでしょうか。

【良い点】
・基本コードについての解説が深い
・状況別のコードが用意されている
・基本中の基本が一通り学べる

【悪い点】
・タイトルから連想する書籍の内容と実際の内容にはかなり乖離がある。
あのデザインはどうやるんだろう、とか、魅力的なデザインを表現したりするための内容ではない

【まとめ】
・単純な基本コードをここまで網羅的に掘り下げて解説する書籍は皆無で、その意味で価値は高いです。
・やりたいデザインを逆引きするという使い方ではなく、基本コードの使い方を確認するのに向いています。
・初めてコードを学習する方が1つずつ練習していくのに向いています。 (参考:Amazon)

↓全て表示 ↓少なく表示
 
HTML5 & CSS3 デザインレシピ集
発売日 2017/02/22
通常 3,025円
現在 3,025円

  

6ステップでマスターする 「最新標準」HTML CSSデザイン(固定レイアウト版)


※この商品は固定レイアウト型の電子書籍です。

※この商品はタブレットなど大きいディスプレイを備えた端末で読むことに適しています。また、文字列のハイライトや検索、辞書の参照、引用などの機能が使用できません。

※お使いの端末で無料サンプルをお試しいただいた上でのご購入をお願いいたします。

※本書内容はカラーで制作されているため、カラー表示可能な端末での閲覧を推奨いたします。





フレキシブルボックスレイアウトを使ったレスポンシブWebデザインをきっちり習得!

本書は、マルチデバイスに対応したWebサイトをステップ・バイ・ステップで作成し、最新標準のHTML+CSSをマスターすることを目的とした書籍です。

Webページ制作を取り巻く環境は、ここ数年で大きく変化しています。スマートフォンやタブレットといったモバイルデバイスからのアクセスがPCを凌駕し、それとともにWebページのデザインも1段組みをベースとしたシンプルなものが求められるようになっています。

そこで、本書では古いブラウザに縛られた時代には使い切ることができなかった機能をふんだんに活用し、今どきのWebページをシンプルなステップで形にしていく方法をまとめました。

サンプルサイトの制作工程を6ステップに分け、
CHAPTER1 下準備
CHAPTER2 トップページの作成 - コンテンツ編
CHAPTER3 トップページの作成 - ナビゲーション編
CHAPTER4 コンテンツページの作成
CHAPTER5 記事一覧ページの作成
CHAPTER6 アレンジ

と順に進めていくことで、基本からアレンジの方法まで、効率よくマスターできるカリキュラムとなっています。
本書サポートサイトから学習用のファイルをダウンロードできますので、それを使って学習することができます。

↓全て表示↑少なく表示
 
 
Users Voice
インターネット利用の70%~80%がスマホになっている時代。
モバイルファーストのWEBデザインが必須になってきています。
この時代の流れを先取りした1段組みのフラットデザインの解説。

最新のHTML5とCSS3でレスポンシブWEBデザインが作れる所がすばらしい。
最新技術が習得できます。
(float は一切使われていません。)

Googleなどで昔は上位表示されていた3段組みのデザインのサイトが
どんどん順位が下がってゆき。もう時代遅れのデザインになってきています。
そんな中、検索の上位に表示されるようになってきているのは1段組みのモバイルファーストのWEBサイト。
時代の流れを先取りしている著者に脱帽です。

この本は古いWEBデザインから脱却し、最新の技術で時代の最先端をゆく
WEBデザインを学びたい人のための本だと思います。 (参考:Amazon)

↓全て表示 ↓少なく表示
HTML・CSSが初めての方は、別の書籍で基礎を勉強してからの方がいいかなと思います。
基礎的な細かなことはあまり書かれていないので、基礎がわかった方が、フレキシブルボックスレイアウトを勉強用に使用するといいですよ。
1つのサイトを作成しながら、フレキシブルボックスレイアウトを使って色々なデザインのページを説明している。
おおと感激したのは、メディアクエリを使用せずに画面の横幅に応じて横に並べる要素数が自動的に変わるようにした部分のところ。
考え方がとても役にたった。

出版年月日から年月が経っているので、やってみて違ったところは、「アイコンフォント」
現在は、登録しなくても使用できるみたいで、
・利用するための取得コードは「script」タブじゃなく「link」タブになっている
・アイコンは、「i」タグのコードでクラス名も微妙に違ってる。
・P197のアイコンは、「f105」に変更「FontAwesome」は「Font Awesome 5 Free」に変更、そして、このアイコンは、「font-weight: 900;」を追加しないとアイコンが表示されません。

私は、このP197でハマりました。

「div」タブ、多い気がするけど、1つのサイト作成で、色々なレイアウトが簡単にできているので私は、星5としま~す。 (参考:Amazon)

↓全て表示 ↓少なく表示
 
  

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

フロントエンドエンジニアから学ぶ制作現場の実践的なテクニック!

本書は、HTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ書籍です。現在主流なWebページのデザインスタイル、「スタンダードレイアウト」「グリッドレイアウト」「シングルページレイアウト」を適用した3つのサイトを作りながら、各スタイルの特徴や使い分け、コーディングテクニックを学びます。実際のWeb 制作の現場と同様に、サイトのデザインを基にして骨格を見極め、枠組みから中身までひと通りコーディングするというフローをなぞることで、HTML5/CSS3の実用的なコーディングスキルやテクニックを無理なく身につけることができます。3つのサイトを作成することで、「本格的なレイアウトのサイトを作れた」「こういったレイアウトの場合こうコーディングすればいいという具体的なテクニックがわかった」というような手応えを得やすく、学ぶことへのモチベーションが下がらずに高まる構成にしています。駆け出しのフロントエンドエンジニアや、HTML/CSSコーディングに興味はあっても実践の機会がないデザイナー、バックエンドエンジニアなどが、実際にサイトを作ることを通してスキルアップすることを目標とした一冊です。

↓全て表示↑少なく表示
 
 
Users Voice
1冊でもHTML5/CSS3の入門本を学び終えれば、こちらの本を手に取ることを強くオススメします。
初めのうちは難解と感じるかと思います。インターネットの検索と併用して読み進める必要もあると思います。しかしそれでも初心者の方に強く勧める理由が「保守性の高いCSSのマルチクラス設計」を自然と身につけることが出来るからです。

その他のHTML5/CSS3の入門書は、ひとつひとつの機能を説明することに比重を置いているため、どうしても現実的ではないコードの書き方をしています。
その点本書では、一度作ったwebページの一部が変更になっても大体的に修正を必要とせず、また拡張しやすい綺麗なコードの書き方を自然と身につけることが出来る良書となっています。

これは将来のあなたが、趣味の範疇を超えて職業にする可能性があるならば、いずれ学なくてはならない綺麗なコードの書き方です。それならば、変な癖がついた後から修正するよりも、初学者のうちに自然と吸収できる本書を早い段階で手にしましょう。
この本を2周すれば、初心者を脱出したと自信を持って断言してよいでしょう。

余裕があるならば、「Web制作者のためのCSS設計の教科書」も併せて購入すると良いでしょう。
2冊の相互作用であなたのHTML5/CSS3のレベルは一気に飛躍すること間違いありません。 (参考:Amazon)

↓全て表示 ↓少なく表示
HTML/CSSの勉強の3冊目として購入。
1冊目『いちばんよくわかるHTML5&CSS3デザインきちんと入門 』
2冊目『作りながら学ぶ HTML/CSSデザインの教科書』

スタンダードな2コラムレイアウトとJavascriptライブラリを使った可変グリッドレイアウト、レスポンシブ対応のシングルページレイアウトの3種類を作りながら学べる。

スタンダードレイアウトはこれまでの2冊でも作ってきたので、復習になる。コラムの段組はflexではなく、float。
この本でいちばんよかったのはCSSのアニメーションを少し体験できたこと。

CSSのtransformとtransitionプロパティを使って、回転や移動などの動きをサイトにつけることができると知った。
また、擬似要素を使ったデザインも前の2冊よりもより洗練されていたと思う。

ただ、やはり出版年が少し古いため、レスポンシブデザインの作り方がPCファーストであったり、コラムの段組にfloatを使っていたりするので、少し新しい入門書を読んだ後に利用するのがいいと思う。

全体的には満足できる1冊。 (参考:Amazon)

↓全て表示 ↓少なく表示
 
  
 

おまけ①:HTML/CSS「Kindle Unlmited 読み放題 人気ランキング」

Amazonの「Kindle Unlimited」は、Amazonの定額本読み放題サービス。

実はそこにHTML/CSSの技術書もそこそこはあるんです。すなわち、定額で何冊も学習することも可能

Kindle Unlimitedの主な特徴としては、おおよそ以下の通り。

  • 雑誌がかなり充実
  • 豊富なKindle個人出版本がほとんど読み放題
  • 単行本技術書は少し古いものの一部のみ対応

個人的には雑誌が、IT系(CG WORLD等)、ガジェット系(Get Navi等)、ゲーム(ファミ通等)、など見たい雑誌が幅広く読めるのが決め手で加入。2冊以上読みたいものがあるだけで確実にお得です。

また、30日無料体験も可能なので、体験期間を利用して無料で学習してみるのもお得な学習法です。

以下がKindle Unlimited対応のHTML/CSS関係の本人気ランキング(Best10)です。

(2020/06/02 更新)
売筋
Rank
製品評価
1
(3.5)
総評価数 5件
2
(4.3)
総評価数 12件
3
(4.5)
総評価数 2件
4
ゲームで学ぶJavaScript入門 HTML5&CSSも身につく!
発売日 2015/12/11
通常    2,640円
単行本   2,640円
Kindle   2,178円(17%OFF)
Kindle Unlimited(読み放題)
(3.7)
総評価数 23件
5
(3.6)
総評価数 17件
6
(4.5)
総評価数 2件
7
(3.5)
総評価数 3件
8
HTML & CSS3 レイアウトブック
発売日 2016/12/20
通常    2,838円
単行本   557円(80%OFF)
Kindle   2,838円
Kindle Unlimited(読み放題)
(3.3)
総評価数 4件
9
できるポケット HTML5&CSS3/2.1全事典 できるポケットシリーズ
発売日 2015/03/06
通常    1,848円
単行本   1,049円(43%OFF)
Kindle   1,584円(14%OFF)
Kindle Unlimited(読み放題)
(4.3)
総評価数 18件
10
(3.6)
総評価数 17件

 

おまけ②:新書一覧(2019,2020刊行本)

IT技術・プログラミング言語は、最新情報をキャッチアップも非常に重要、すなわち新書は要チェック

ということで、2019年以降に発売したHTML/CSS参考書の新書を最後に一覧しておきまっす。

 

(2020/06/02 更新)
製品評価
できるデザイン教室 HTML&CSS&Webデザインきほん講座
発売日 2020/08/21
通常    2,420円
単行本   2,420円
(0)
総評価数 0件
今すぐ使えるかんたんEx HTML&CSS 逆引き事典
発売日 2020/04/20
通常    2,398円
単行本   2,398円
Kindle   2,398円
(0)
総評価数 0件
(0)
総評価数 0件
よくわかるHTML/CSS
発売日 2020/04/13
通常    800円
Kindle   800円
Kindle Unlimited(読み放題)
(0)
総評価数 0件
CSS設計完全ガイド ~詳細解説+実践的モジュール集
発売日 2020/02/27
通常    4,800円
単行本   3,608円(25%OFF)
Kindle   3,428円(29%OFF)
(4.3)
総評価数 33件
初心者からちゃんとしたプロになる HTML+CSS標準入門
発売日 2020/02/26
通常    2,750円
単行本   2,750円
Kindle   2,750円
(4.6)
総評価数 3件
(4.4)
総評価数 24件
作りながら学ぶWebプログラミング実践入門
発売日 2020/01/28
通常    2,948円
単行本   2,948円
Kindle   2,801円(5%OFF)
(4)
総評価数 2件
(4.5)
総評価数 2件
(4.5)
総評価数 2件
(0)
総評価数 0件
HTML5&CSS3ワークブック―ステップ30 (情報演習 35)
発売日 2019/12/01
通常    6,218円
単行本   990円(84%OFF)
(0)
総評価数 0件
フレキシブルボックスで作る HTML5&CSS3レッスンブック
発売日 2019/11/22
通常    5,444円
単行本   2,860円(47%OFF)
Kindle   2,599円(52%OFF)
(4.3)
総評価数 5件
(3)
総評価数 1件
(0)
総評価数 0件
初心者からちゃんとしたプロになる Webデザイン基礎入門
発売日 2019/09/25
通常    6,647円
単行本   2,750円(59%OFF)
Kindle   2,613円(61%OFF)
(4.2)
総評価数 16件
(3.1)
総評価数 4件
(0)
総評価数 0件
(1)
総評価数 1件
(1)
総評価数 1件
(0)
総評価数 0件
未経験者のためのHTML/CSS超入門
発売日 2019/07/12
通常    250円
Kindle   250円
Kindle Unlimited(読み放題)
(0)
総評価数 0件
作って楽しむプログラミング HTML5超入門
発売日 2019/06/25
通常    2,200円
単行本   2,200円
Kindle   2,090円(5%OFF)
(2.7)
総評価数 4件
なかしまぁ先生のHTML5教室 オンデマンド (ペーパーバック)
発売日 2019/06/24
通常    2,200円
単行本   2,200円
(4)
総評価数 2件
これから学ぶHTML/CSS
発売日 2019/06/21
通常    2,640円
単行本   2,640円
Kindle   2,376円(10%OFF)
(5)
総評価数 1件
今すぐ使えるかんたん ホームページHTML&CSS入門[改訂2版]...
発売日 2019/06/21
通常    1,738円
単行本   1,738円
Kindle   1,651円(5%OFF)
(4.4)
総評価数 3件
HTML5&CSS3標準デザイン講座 30LESSONS【第2版】
発売日 2019/05/24
通常    3,052円
単行本   2,838円(7%OFF)
Kindle   2,554円(16%OFF)
(4.2)
総評価数 11件
HTMLフォームの基本
発売日 2019/05/21
通常    250円
Kindle   250円
Kindle Unlimited(読み放題)
(4)
総評価数 1件
HTMLコーダー&ウェブ担当者のための Webページ高速化超入門...
発売日 2019/05/01
通常    2,838円
単行本   2,838円
Kindle   2,696円(5%OFF)
(5)
総評価数 6件
HTML&CSS JavaScriptプログラミング基礎演習ワークブック
発売日 2019/05/01
通常    5,820円
単行本   4,180円(28%OFF)
(0)
総評価数 0件
現場で使える最低限の知識がしっかりと身につく HTML/CSSデザインTextBook...
発売日 2019/03/29
通常    3,080円
単行本   3,080円
Kindle   2,851円(7%OFF)
(4.3)
総評価数 3件
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
発売日 2019/03/16
通常    6,980円
単行本   2,486円(64%OFF)
Kindle   2,237円(68%OFF)
(4.3)
総評価数 141件
CSSグリッドで作る HTML5&CSS3レッスンブック
発売日 2019/03/15
通常    2,860円
単行本   2,860円
Kindle   2,648円(7%OFF)
(4.1)
総評価数 5件
(4.3)
総評価数 30件
今すぐ使えるCSSレシピブック
発売日 2019/01/29
通常    3,762円
単行本   3,762円
Kindle   3,386円(10%OFF)
(3.2)
総評価数 5件
(0)
総評価数 0件

 

関連:Web開発(PHP,JavaScript)系の他の書籍

Web開発のベースであるHTML/CSSの基礎が身についたら、よりリッチな表現が可能になるJavaScript、サーバーバックエンド操作も可能になるPHPを学ぶのがおすすめ

それによって、表現や扱えるデータなどの幅が広がり、リッチなコンテンツ作りが可能です。合わせて覗いてみてください。

いじょうでっす。

コメント

タイトルとURLをコピーしました