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

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

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

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

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

 

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




 
Kindle Paperwhite
発売日 2018/11/07
(2021/09/17 15:15時点)

 

 

Kindle Unlimited 1ヶ月無料

kindle_unlimited_sale
 
  • 1ヶ月無料で読み放題
  • 1ヶ月以内でも解約可能
  • 解約後も1ヶ月まで利用可


 

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

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

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

 

(2021/09/17 12:02 更新)
Rank製品価格
1
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
発売日 2019/03/16
Mana (SBクリエイティブ)
総合評価
2,486円
2,237円
2,486円
2,486円
2
4,580円
2,653円
2,948円
2,948円
3
2,068円
1,861円
2,068円
2,068円
4
ゲームで学ぶJavaScript入門 HTML5&CSSも身につく!
発売日 2015/12/11
田中 賢一郎 (インプレス)
Kindle Unlimited対象
総合評価
2,640円
2,178円
2,420円
2,640円
5
スラスラわかるHTML&CSSのきほん 第2版
発売日 2018/04/14
狩野 祐東 (SBクリエイティブ)
総合評価
2,178円
1,960円
2,178円
2,178円
6
できるホームページHTML&CSS入門 Windows 10/8.1/7対応 できるシリーズ...
発売日 2017/02/17
佐藤 和人, できるシリーズ編集部 (インプレス)
Kindle Unlimited対象
総合評価
1,738円
1,406円
1,562円
1,738円
7
教科書では教えてくれないHTML&CSS
発売日 2021/07/17
狩野 祐東 (技術評論社)
総合評価
2,992円
2,992円
2,992円
2,992円
8
Webを支える技術 ―― HTTP,URI,HTML,そしてREST WEB+DB PRESS plus...
発売日 2018/11/14
山本 陽平 (技術評論社)
総合評価
2,827円
2,686円
2,827円
2,827円
9
ほんの一手間で劇的に変わるHTML&CSSとWebデザイン実践講座
発売日 2021/02/20
Mana (SBクリエイティブ)
総合評価
2,728円
2,455円
2,728円
2,728円
10
CSS設計完全ガイド ~詳細解説+実践的モジュール集
発売日 2020/02/27
半田 惇志 (技術評論社)
総合評価
3,608円
3,428円
3,608円
3,608円
11
作って学ぶ HTML&CSSモダンコーディング
発売日 2021/09/16
エビスコム (マイナビ出版)
3,168円
(+124pt)
3,168円
3,168円
3,168円
12
HTML&CSSとWebデザインが 1冊できちんと身につく本
発売日 2017/07/21
服部 雄樹 (技術評論社)
総合評価
2,508円
2,508円
2,508円
2,508円
13
3,289円
3,289円
3,289円
3,289円
14
世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書...
発売日 2019/03/01
赤間 公太郎, 狩野 咲, 鈴木 清敬 (技術評論社)
総合評価
2,948円
2,801円
2,948円
2,948円
15
2,420円
1,881円
2,090円
2,420円
16
HTML & CSS3 レイアウトブック
発売日 2016/12/20
外間 かおり (ソーテック社)
Kindle Unlimited対象
総合評価
4,938円
2,838円
2,838円
200円
17
HTML5+CSS3の新しい教科書 改訂新版 基礎から覚える、深く理解できる。...
発売日 2018/08/27
赤間 公太郎, 原 一宣。 (エムディエヌコーポレーション(MdN))
Kindle Unlimited対象
総合評価
2,750円
2,613円
2,750円
2,750円
18
2,640円
2,138円
2,376円
2,640円
19
これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん...
発売日 2017/03/27
たにぐちまこと (マイナビ出版)
総合評価
2,838円
2,554円
2,838円
2,145円
20
デザインの学校 これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版]...
発売日 2017/05/26
千貫 りこ (技術評論社)
総合評価
2,178円
2,178円
2,178円
2,178円

 

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

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

 

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

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

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

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

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

スラスラわかるHTML&CSSのきほん 第2版
(著)狩野 祐東
発売日 2018/04/14
総合評価
(2021/09/13 12:15時点)
ベストセラーが大改訂!

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

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端末の場合)

↓全て表示↑少なく表示
 
内容サンプル

(引用元楽天Books)

 
目次
chapter01 Webサイト制作を始める前に
01 Webサイトとその構成要素
02 Webブラウザの機能と種類
03 Webサイトを公開するまで
04 制作に使うソフトのインストール
chapter02 HTMLの基礎
01 HTMLはWebページを制作するための言語
02 HTMLの基本的な書式
03 親子、子孫、兄弟 ~HTMLの階層関係
chapter03 制作の準備と基本のHTML
01 Webサイト制作の準備
02 すべてのHTMLで共通するタグ
chapter04 見出し、段落、リスト
01 見出しテキスト
02 テキストの段落
03 ナビゲーションの設置
04 番号なしリスト(非序列リスト)
chapter05 リンクと画像の挿入
01 サイト内リンクと相対パス
02 外部サイトへのリンクと絶対パス
03 画像の表示
04 キーボードで入力しにくい文字の表示
05 ページの部分ごとに要素をまとめる
06 class属性
07 コメント文
chapter06 2ページ目以降を効率的に作成する
01 index.html以外のファイルの作成
02 段落にテキストと画像を含める
03 テキストを太字にする・改行する
04 id属性と特定の場所へのリンク
05 テーブル(表)
06 番号付きリスト(序列リスト)
07 CSS適用を考えた要素のグループ化
chapter07 CSSの基礎
01 HTMLの「見た目」を整えるCSS
02 CSSの基本的な書式
03 主なセレクタと書き方
04 CSSを書く場所
05 CSSファイルを作成する
06 HTMLファイルとCSSファイルを関連付ける
chapter08 CSSでページのスタイルを調整
01 背景色の設定
02 テキスト色、フォントサイズの設定
03 マージン、ボーダー、パディング
04 行間の調整
05 リンクテキスト色の変更
06 コンテンツの行揃え
07 ブロック表示/インライン表示の変更
08 背景画像の指定
09 スタイルを上書きする
10 繰り返さない背景画像
11 ページの最大幅の設定
12 ページに固有のスタイルを適用
chapter09 フロートとテーブルのスタイル
01 テキストの回り込み
02 テーブルの整形
03 フレックスボックスで2コラムレイアウト
04 <練習>access.htmlのスタイルを作成しよう
chapter10 フォームの作成
01 フォームの基礎知識
02 お問い合わせページの概要
03 フォーム全体の親要素
04 プルダウンメニュー
05 ラジオボタンとチェックボックス
06 テキストフィールド
07 テキストエリア
08 送信ボタン
09 ラベル
10 フォームのスタイルと属性セレクタ
chapter11 モバイル端末に対応する
01 レスポンシブデザイン
02 ビューポートの設定
03 画像をレスポンシブデザインに対応させる
04 メディアクエリとブレイクポイント
05 ページ全体とナビゲーションのモバイル対応
06 コラムレイアウトの調整
07 フォームの調整
chapter12 Webサイトの公開
01 Webサイト公開までの準備
02 Webサーバーに接続
03 ファイルのアップロード
04 Webサイトの最終確認

↓全て表示↑少なく表示
Users Voice
仮想の喫茶店のホームページを一から作ることでHTMLやCSSの技術を理解できる仕掛けになっている。 開発環境もフリーのソフトを使っているので、実習環境を安価に入手できるのも良い。(秀丸エディタ) (参考:YahooShopping)

↓全て表示 ↑少なく表示
実際にホームページを作成する手順を学ぶので、とっつき易いというメリットがあります。ところどころコードの意味合いまでは踏み込んでいない為、別途調べる必要もありました。 (参考:YahooShopping)

↓全て表示 ↑少なく表示
とてもわかりやすく読みやすい本です。初心者でも理解できました。友人にもすすめようと思っています。おすすめです。 (参考:YahooShopping)

↓全て表示 ↑少なく表示
内容サンプル

(引用元楽天Books)

 
著者略歴

著:狩野 祐東
Web/アプリケーションUIデザイナー、エンジニア。執筆家。早稲田大学卒。アメリカ・サンフランシスコに留学、UIデザイン理論を学ぶ。帰国後会社勤務を経て現在フリーランス。Webサイトやアプリケーションのインターフェースデザイン、インタラクティブコンテンツの開発を数多く手がける。各種セミナーや研修講師としても活躍。


  

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

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

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

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

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

(引用元Amazon)

 
目次
CHAPTER 1 Webサイトの仕組みを知ろう
SECTION 1 Webサイトが表示される仕組み
SECTION 2 URL
SECTION 3 Webサイトに使われるファイルの種類
SECTION 4 Webサイトのファイル・フォルダ構造
SECTION 5 Webサイトの制作環境を整えよう
CHAPTER 2 HTMLの基礎知識とマークアップの実践例
SECTION 1 HTMLとは
SECTION 2 HTMLの書式
SECTION 3 HTMLドキュメントの構造
SECTION 4 マークアップの考え方トレーニング
CHAPTER 3 CSSの基礎知識とページデザインの実践例
SECTION 1 CSSの基礎知識
SECTION 2 CSSの書式
SECTION 3 ページにCSSを適用するトレーニング
CHAPTER 4 テキストの装飾
SECTION 1 見出しや本文のフォントサイズを調整する
SECTION 2 読みやすい行間にする
SECTION 3 段落のテキストをリード文だけ太字にする
SECTION 4 表示するフォントを設定する
SECTION 5 テキストの行揃えを変更する
SECTION 6 2行目以降を1文字下げる
SECTION 7 テキスト色を変更する
SECTION 8 見出しにサブタイトルをつける
CHAPTER 5 リンクの設定と画像の表示
SECTION 1 テキストにリンクを追加する
SECTION 2 テキストリンクにCSSを適用する
SECTION 3 画像を表示する
SECTION 4 画像にリンクをつける
SECTION 5 画像にテキストを回り込ませる
CHAPTER 6 ボックスと情報の整理
SECTION 1 インラインボックスとブロックボックス
SECTION 2 箇条書き(リスト)のマークアップ
SECTION 3 リストを情報の整理に使う
SECTION 4 上手な
の使い方
SECTION 5 CSSのボックスモデル
SECTION 6 パディング、ボーダー、マージンの設定
SECTION 7 2つ以上のボックスを並べる
SECTION 8 ボックスのデザインを調整する
CHAPTER 7 テーブル
SECTION 1テーブルを作成する
SECTION 2アクセシビリティを考慮したテーブル
SECTION 3 テーブルのデザインバリエーション
CHAPTER 8 フォーム
SECTION 1 フォームとデータを送受信する仕組み
SECTION 2 さまざまなフォーム部品
SECTION 3 標準的なフォームの例
CHAPTER 9 ページ全体のレイアウトとナビゲーション
SECTION 1 実践的なコーディングのために知っておきたいCSSの知識
SECTION 2 シングルコラムレイアウト
SECTION 3 フレックスボックスを使ったコラムレイアウト
SECTION 4 ナビゲーションメニューを作成する
CHAPTER 10 レスポンシブWebデザインのページを作成しよう
SECTION 1 レスポンシブWebデザインとは
SECTION 2 レスポンシブWebデザインのサイトを作る

↓全て表示↑少なく表示
Users Voice
とてもわかりやすい内容でよかったです。 順序立てて解説してあり 初心者むけの良い本だと思います。 サンプルの配布がもっとあったらよかったかなと思いますが、贅沢でしょうか とても満足できてオススメできる内容だと思います。 (参考:YahooShopping)

↓全て表示 ↑少なく表示
内容サンプル

(引用元Amazon)

 
著者略歴

著:狩野 祐東
狩野祐東(かのうすけはる)UIデザイナー/エンジニア/執筆家アメリカ・サンフランシスコでUIデザイン理論を学ぶ。帰国後会社勤務、フリーランスを経て、2016年株式会社Studio947設立。Webサイトやアプリケーションのインターフェースデザイン、インタラクティブコンテンツの開発を数多く手がける。各種セミナーや研修講師としても活動中。主な著書に『確かな力が身につくJavaScript「超」入門』『スラスラわかるCSSデザインのきほん』『作りながら学ぶjQueryデザインの教科書』『スラスラわかるHTML&CSSのきほん」(SBクリエイティブ)など。http://studio947.net@deinonychus947著者の書籍サポートサイト『狩野祐東の本』http://www.solidpanda.com/book/


↓全て表示↑少なく表示

  

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

初心者からちゃんとしたプロになる Webデザイン基礎入門
(著)栗谷 幸助, おの れいこ, 藤本 勝己, 村上 圭
発売日 2019/09/25
総合評価
(2021/09/17 12:02時点)
この商品は固定レイアウトで作成されており、タブレットなど大きいディスプレイを備えた端末で読むことに適しています。また、文字列のハイライトや検索、辞書の参照、引用などの機能が使用できません。

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

【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サイトの運用

↓全て表示↑少なく表示
 
内容サンプル

(引用元Amazon)

 
Users Voice
モニタのことをパソコン本体だと思っていた妻でも読んで理解が進んでいるようです(笑) これ一冊の読了理解ではWebデザイナーには到底なれないと思いますが、 Webとはなんぞやの知識段階の方への入り口の本としては丁寧で良いと思います。 (参考:YahooShopping)

↓全て表示 ↑少なく表示
ちょっと難しいけど、勉強になります。 なかなか読み進められませんが、少しずつ理解して、知識を吸収していきたいと思います。 (参考:YahooShopping)

↓全て表示 ↑少なく表示
こちらの本を拝読して Webサイトの基本となることをマスター出来ました こちらの本で習った物を活かせるように身に覚えさせます (参考:YahooShopping)

↓全て表示 ↑少なく表示
内容サンプル

(引用元Amazon)

 
  

 

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

HTML5&CSS3デザイン 現場の新標準ガイド

HTML5&CSS3デザイン 現場の新標準ガイド
(著)エビスコム
発売日 2017/08/28
総合評価
(2021/09/06 12:02時点)
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をプレゼントします。
本文の参照ページも掲載してありますので、書籍と一緒にご活用ください。
この機会をぜひお見逃しなく!

↓全て表示↑少なく表示
 
内容サンプル

(引用元Amazon)

 
内容サンプル

(引用元Amazon)

 
  

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

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

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

(引用元Amazon)

 
目次
------------------------------------------------
Chapter 1 CSSの歴史と問題点
------------------------------------------------
1-1 CSSの始まり
 CSSの役割と目的
1-2 CSSの問題点
 「カオス」になるCSS
 CSSはすべてがグローバルスコープ
1-3 複雑化するWeb開発
 変更不可能なHTML/CSSと付き合う
 増加するページ数
 頻繁に変更される「状態」
1-4 解決策として生まれたCSS設計
1-5 CSS設計とデザインシステムとの連携
------------------------------------------------
Chapter 2 CSS設計の基本と実践
------------------------------------------------
2-1 【CSS設計の前に】CSSの基本 詳細度とセレクター
 セレクターの種類と、本書における呼称
 カスケーディングの基礎
 詳細度の基礎
2-2 【CSS設計の前に】リセットCSS
 ブラウザのデフォルトスタイル
 ハードリセット系CSS
 ノーマライズ系CSS
 リセットCSSはCSS設計にどのような影響を及ぼすか?
2-3 【CSS設計の前に】英単語を結合する方式の名前
2-4 よいCSS設計が目指す4つのゴール
 予測できる
 再利用できる
 保守できる
 拡張できる
2-5 CSS設計の実践と8つのポイント
 1. 特性に応じてCSSを分類する
 2. HTMLとスタイリングが疎結合である
 3. 影響範囲がみだりに広すぎない
 4. 特定のコンテキストにみだりに依存していない
 5. 詳細度がみだりに高くない
 6. クラス名から影響範囲が想像できる
 7. クラス名から見た目・機能・役割が想像できる
 8. 拡張しやすい
2-6 モジュールの粒度を考える
 改めてモジュールとは
 モジュールの粒度のばらつきが引き起こす問題
 モジュール粒度の指針
2-7 CSS設計の必要性
------------------------------------------------
Chapter 3 さまざまな設計手法
------------------------------------------------
3-1 本Chapterの前提
3-2 OOCSS
 ストラクチャーとスキンの分離
 コンテナとコンテンツの分離
 OOCSSのまとめ
3-3 SMACSS
 ベースルール
 レイアウトルール
 モジュールルール
 ステートルール
 テーマルール
 SMACSSのまとめ
3-4 BEM
 BEMの基本
 Blockの基本
 Elementの基本
 Modifierの基本
 Blockのネスト
 Mix
 Mixでは対処できない場合
 Modifier名は省略してはいけない
 BEMのその他の命名規則
 BEMのまとめ
3-5 PRECSS
 基本的な指針
 ベースグループ
 レイアウトグループ
 モジュールグループ
 ヘルパーグループ
 ユニークグループ
 プログラムグループ
 オリジナルグループ
 PRECSSのまとめ
------------------------------------------------
Chapter 4 レイアウトの設計
------------------------------------------------
4-1 Chapter 4~Chapter 7のコードの前提
 使用するリセットCSS
 独自に定義したベーススタイル
 使用する設計手法
4-2 本Chapterで扱うサンプル
4-3 ヘッダー
 ①.header__inner / .ly_header_innerに対するスタイリング
4-4 フッター
 ①ボーダーの実装方法の違い
 ヘッダーの内側とフッターの内側のスタイリングは共通化すべきか?
4-5 コンテンツエリア
 1カラム設計
 2カラム設計
------------------------------------------------
Chapter 5 CSS設計モジュール集① 最小モジュール
------------------------------------------------
5-1 本Chapter以降のモジュール集の進め方
 拡張パターンについて
 バリエーションについて
 BEMとPRECSSの差違について
5-2 最小モジュールの定義
5-3 ボタン
 基本形
 拡張パターン
 バリエーション
5-4 アイコン付き小ボタン
 基本形
 拡張パターン
5-5 アイコン
 基本形
 拡張パターン
 バリエーション
5-6 ラベル
 基本形
 拡張パターン
 バリエーション
5-7 見出し
 基本形
 バリエーション
5-8 注釈
 基本形
 バリエーション
------------------------------------------------
Chapter 6 CSS設計モジュール集② 複合モジュール
------------------------------------------------
6-1 複合モジュールの定義
6-2 メディア
 基本形
 拡張パターン
 バリエーション
6-3 カード
 基本形
 拡張パターン
6-4 テーブル(水平)
 基本形
 拡張パターン
6-5 テーブル(垂直)
 基本形
6-6 テーブル(交差)
 基本形
6-7 ページャー
 基本形
6-8 タブナビゲーション
 基本形
6-9 CTA
 基本形
6-10 料金表
 基本形
 バリエーション
6-11 FAQ
 基本形
6-12 アコーディオン
 基本形
6-13 ジャンボトロン
 基本形
6-14 ポストリスト
 基本形
6-15 順序なしリスト
 基本形
 拡張パターン
 バリエーション
6-16 順序ありリスト
 基本形
 バリエーション
------------------------------------------------
Chapter 7 CSS設計モジュール集③ モジュールの再利用
------------------------------------------------
7-1 最小モジュールを利用した複合モジュールの作成
 水平ボタンリスト
7-2 最小モジュールと複合モジュールの組み合わせ
 ボタン + 画像半分サイズメディア
 ボタン + CTAエリア
 ラベル + ポストリスト
7-3 複合モジュール同士の組み合わせ
 FAQ + リスト
 アコーディオン + カード + CTAエリア
------------------------------------------------
Chapter 8 CSS設計をより活かすためのスタイルガイド
------------------------------------------------
8-1 スタイルガイドとは
8-2 なぜスタイルガイドが必要か?
8-3 スタイルガイドを作成する
 スタイルガイドジェネレーターを使用する
 手動で作成する
8-4 スタイルガイドを作成する方針のまとめ
------------------------------------------------
Chapter 9 CSS開発に役立つその他の技術
------------------------------------------------
9-1 CSS開発を効率化する、ミスを減らす
 Sass
 Browsersync
 Autoprefixer
9-2 人による差異をなくす
 CSScomb
 EditorConfig
 Prettier
9-3 リファクタリングのヒントを得る
 Stylelint
 CSS Stats
9-4 CSSを軽量化する
 CSS MQPacker
 cssnano
9-5 HTML開発を効率化する
 Nunjucks
 EJS
 Pug
9-6 開発にまつわるタスクを自動処理する
 Prepros
 Gulp
 webpack

↓全て表示↑少なく表示
Users Voice
娘用に買いました。 CSS設計についてしっかり学びたかったらしく、よく調べて購入を希望していました。娘にとってはとても良かったようです。最初に使用するには良い参考書だと思います (参考:YahooShopping)

↓全て表示 ↑少なく表示
煩雑になりがちなCSSのまとめ方がとても参考になりました (参考:YahooShopping)

↓全て表示 ↑少なく表示
書かれている内容は良いのですが、まとめ方、文章力、掲載方法等に、工夫が必要。 (参考:YahooShopping)

↓全て表示 ↑少なく表示
内容サンプル

(引用元Amazon)

 
著者略歴

著:半田 惇志
半田惇志(はんだ あつし)
株式会社24-7/テクニカルディレクター・株式会社パンセ/シニアエンジニア。
主に受託制作のフロントエンドの開発から業務全体のワークフロー設計・改善、マーケティングオートメーション、コンテンツ制作まで幅広く業務を行う。特に強い専門領域はHubSpot CMSとCSS設計。好きな言葉は人間万事塞翁が馬。

著作物 : Webのための次世代エディタ Bracketsの教科書(Kindle版のみ取り扱い)
PRECSS(http://precss.io/ja/)
ブログ : Thinking Salad(https://thinkingsalad.com/)
Twitter : @assialiholic


↓全て表示↑少なく表示

  

 

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

HTML5 & CSS3 デザインレシピ集

HTML5 & CSS3 デザインレシピ集
(著)狩野 祐東
発売日 2017/02/22
総合評価
(2021/09/01 12:02時点)
本書は、HTML5とCSS3によるWebサイト制作のための"おいしい"レシピ集です。
制作の現場で使われる定番テクニックから、プロ技まで余すところなく集めました。

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

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

(引用元Amazon)

 
Users Voice
急いでいたので、対応が早く助かりました。 (参考:YahooShopping)

↓全て表示 ↑少なく表示
内容サンプル

(引用元Amazon)

 
  

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


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

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

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

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



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

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

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

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

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

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

↓全て表示↑少なく表示
 
内容サンプル

(引用元Amazon)

 
Users Voice
フレキシブルボックスレイアウトに関してはこれ一冊でほぼ賄えると言っても良いと思います。レスポンシブWebデザインにも触れられているため、両方をカバーしたい方にはおすすめの良書です。
CSSも決して難しいわけではなく、読み終わる頃には実践で再現できる内容です。Webサイトのベーシックなレイアウトを始め、ブログやコーポレートサイトで良く使われるカード型、サムネイル型レイアウトのCSSも記載されています。
巻末にはフレキシブルボックスレイアウトの項を設け、仕様や使い方が分かりやすくまとめられており、私自身、読み終わった今もたまに読み返しています。 (参考:honto)

↓全て表示 ↑少なく表示
内容サンプル

(引用元Amazon)

 
  

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

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

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

↓全て表示↑少なく表示
 
内容サンプル

(引用元Amazon)

 
Users Voice
今勉強中なので、もう少しちゃんとコーディングできるようになったら活用したいと思います。 (参考:YahooShopping)

↓全て表示 ↑少なく表示
ページがカラーで、とても見やすい本だと思います。 (参考:YahooShopping)

↓全て表示 ↑少なく表示
内容サンプル

(引用元Amazon)

 
  
 

HTML/CSS本「Kindle Unlmited 読み放題 人気ランキング」

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

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

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

  • 雑誌がかなり充実
  • 豊富なKindle個人出版本がほとんど読み放題
  • 最近は出版社単行本も対応増加

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

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

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

(2021/09/17 12:02 更新)
Rank製品価格
1
4,580円
2,653円
2,948円
2,948円
2
売り切れ
3
2,068円
1,861円
2,068円
2,068円
4
800円
5
ゲームで学ぶJavaScript入門 HTML5&CSSも身につく!
発売日 2015/12/11
田中 賢一郎 (インプレス)
Kindle Unlimited対象
総合評価
2,640円
2,178円
2,420円
2,640円
6
880円
7
できるホームページHTML&CSS入門 Windows 10/8.1/7対応 できるシリーズ...
発売日 2017/02/17
佐藤 和人, できるシリーズ編集部 (インプレス)
Kindle Unlimited対象
総合評価
1,738円
1,406円
1,562円
1,738円
8
780円
9
HTML & CSS3 レイアウトブック
発売日 2016/12/20
外間 かおり (ソーテック社)
Kindle Unlimited対象
総合評価
4,938円
2,838円
2,838円
200円
10
498円

 

おまけ①:本より高コスパ?「UdemyのHTML/CSS動画講座」

UdemyではHTML/CSSを基礎から応用までトータルで学べる学習講座があります。

こちらが、セール時には2千円程度で購入可能で、講座によっては本よりコスパよく学習が可能です。

講座は、買い切り型ながら更新あり、質問可能、30日間返金も可能、という本以上の手厚いサポートがあるのが魅力。

以下の表が、HTML/CSSの学習講座例。セールの場合、かなりおすすめなのでぜひトライしてみください。

Udemyについては、以下のページでも詳しく紹介しているので覗いてみてください。

人気
Rank
学習コース評価
1
(4.5)
総評価数 7663件
2
(4.5)
総評価数 3900件
3
(4.4)
総評価数 4831件
4
(4.4)
総評価数 523件
5
(4.6)
総評価数 75件

 

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

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

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

 

(2021/09/17 12:02 更新)
製品価格
できるデザイン教室 HTML&CSS&Webデザインきほん講座
発売日 2021/10/20
岩本 修 (インプレス)
2,420円
2,420円
2,420円
作って学ぶ HTML&CSSモダンコーディング
発売日 2021/09/16
エビスコム (マイナビ出版)
3,168円
(+124pt)
3,168円
3,168円
3,168円
3,289円
3,289円
3,289円
3,289円
テンプレートですぐできる すぐに身につく! HTML&CSS
発売日 2021/08/24
ガタガタ (マイナビ出版)
2,695円
2,695円
2,695円
2,695円
教科書では教えてくれないHTML&CSS
発売日 2021/07/17
狩野 祐東 (技術評論社)
総合評価
2,992円
2,992円
2,992円
2,992円
498円
1,280円
Webデザインの新しい教科書 改訂3版 基礎から覚える、深く理解できる。...
発売日 2021/05/28
こもりまさあき, 赤間 公太郎 (エムディエヌコーポレーション)
総合評価
2,750円
2,750円
2,750円
2,750円
800円
780円
800円
ほんの一手間で劇的に変わるHTML&CSSとWebデザイン実践講座
発売日 2021/02/20
Mana (SBクリエイティブ)
総合評価
2,728円
2,455円
2,728円
2,728円
図解! HTML&CSSのツボとコツがゼッタイにわかる本
発売日 2021/02/19
中田亨 (秀和システム)
総合評価
2,420円
2,178円
2,178円
2,420円
800円
売り切れ
800円
HTML5とJavaScriptで作る タワーディフェンス 全コード るてんのプチ技術書...
発売日 2020/11/18
柳井 政和 (るてんのお部屋)
総合評価
1,000円
HTML5&CSS3デザイン 現場の新標準ガイド【第2版】 (Compass Booksシリーズ)...
発売日 2020/10/23
エビスコム (マイナビ出版)
総合評価
3,289円
3,125円
3,289円
3,289円
100円
880円

 

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

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

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

関連:最新おすすめのKindle端末

以下では最新のKindle端末について比較、おすすめ紹介しています、合わせてのぞいて見てください。

いじょうでっす。

コメント

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