レスポンシブWebデザイン（HTML5・CSS3）のお勧め本

ご覧のサイト、SEO塾.comを1カ月足らずの突貫で作成するという身の程知らずの試みで、ほんとうに助けてもらった3冊の本。

具体的なコーディングのサンプルがなかったら、これらモダンWebの3冊なくして、サイトは完成しなかっただろうとも言える。

見本のサイト

レスポンシブWebデザインやフラットデザイン（Material DesignやModern UIなども）などは、他の本やApple、Google、Microsoftのサイトなどで勉強して、

下記が非常に気になる見本のサイトだった。

もちろん、ビジネスサイトとしても、デザインとしても、足元におよばないが、とにかく目指したかったサイトである。

デバイスの種類

昔のNetscapeや、MS独自レンダリングIEなどの対応を思い出すほど、ウンザリしたが、
とくに、Appleが新しいデバイスを出すごとに、表示確認に追われ、胃の痛い日々である。

左がデバイス、右がブレイクポイントである。
（スマートフォンの縦では、下記表は、左右が上下に変わる）

Androidのほうはいい加減であるが、iPadやiPhoneは手元にあるから仕方ない…

デバイスの横縦でボックスの4カラム・2カラム・1カラムを自在に

SEO目的では、ボックスの中にキーワード入りの見出しと段落のセットを格納する。
これらが、コンテンツとなり、内部リンクのタップターゲットとなる。

デバイスごとに、横縦ごとに、4カラムから3カラムに、最後は1カラムに、表示させたいわけだ。

4カラムは、パソコンと、タブレットの横縦、ファブレット（大画面スマホ）の横で、
スマホ横では、4カラムを2カラム×2に変化させたい。

ファブレットの縦でも、2カラムにするべきときもある。

そして最後はスマホ縦で、1カラム。

ここまでこだわると、いろいろなデバイスのブレイクポイントごとにCSSを書き足していくことになり、阿鼻叫喚。

ベースはSEOテンプレート

SEO塾.comのベースは、絶賛販売中のSEOテンプレートである。

イーティーネット社製で、よくできている。
それだけに、やりたいようにやるには、HTMLコーディングとCSSの変更追記が大ごとになってしまった。

具体的には、別CSSを後読みするようにして、これにもリセットCSSを設定している。

画像中心ページ（あるいはページ内コンテンツパーツ）と、テキスト中心ページで、デザインやフォントサイズ、インデントなどをいじりまくっているので、これまた泣きの涙が止まらない。

画像は作成する暇もスキルもないので、購入して済ませた。
大散財である…

このような目標を、まがりなりにも実現できたのは、次のモダンWeb本たちのお陰である。

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

何をレスポンシブにしたいかはケースバイケースだろうが、まずミニコンテンツをボックスに入れて、この段組を変化させることが一番だろう。

いろいろ見回ったが、ボックスのフロートなら、この『HTML5&CSS3デザインブック』が最適だった。

HTML5&CSS3デザインブック 目次

Chapter 1　Webページにおける段組み
Chapter 2　Webページを作成する準備
Chapter 3　ブログ・ニュース系サイトのコンテンツページ
Chapter 4　ブログ・ニュース系サイトのトップページ
Chapter 5　ビジネスサイト風のトップページ
Chapter 6　ビジネスサイト風のコンテンツページ

ボックスフロートの完全版

著者のエ・ビスコム・テック・ラボの、書籍解説ページ↑
詳細な目次と、簡単な解説もあるので、ご覧いただければと思う。

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

上記と同じエ・ビスコム・テック・ラボの本

内容的に被るものもあるが、こちらはレスポンシブについて、非常に詳しく解説されている。

ボックスのフロートはもとより、画像のレスポンシブ化、スマホ対応で高速読込など、モダンWebのコーディングが実例入りで分かりやすく書かれている。

マルチデバイス対応サイト構築 目次

Chapter 1 マルチデバイス対応の指標
Chapter 2 ビューポートの設定
Chapter 3 デバイスに合ったページの用意
Chapter 4 デバイスの判別
Chapter 5 パーツのマルチデバイス対応
Chapter 6 画像の最適化
Chapter 7 Webページの高速化

レスポンシブWebデザインの完全版

とにかく、レスポンシブWebデザインの意味や、具体的な実装方法が、この本で完全に理解できるだろう。

同じく、著者のエ・ビスコム・テック・ラボの、書籍解説ページ↑
詳細な目次と、簡単な解説もあるので、ご覧いただければと思う。

標準HTML5タグリファレンス (WEB PROFESSIONAL)

こちらは、2012年1月刊なのに、未だにそばに置きっぱなし、代替本も見当たらない。
迷ったときにすぐにページをめくって目当てものにたどり着くので、ありがたい。

タグリファレンスで、左に解説、右にソース、見開き2ページで用が済む、親切なつくり方でもある。

標準HTML5タグリファレンス 目次

第1章 HTML5の概要
第2章 ルート要素とドキュメントメタデータ
第3章 セクション
第4章 コンテンツのグループ
第5章 テキスト
第6章 編集
第7章 埋め込みコンテンツ
第8章 テーブル
第9章 フォーム
第10章 インタラクティブ
第11章 スクリプティング

目次を書いても意味はあまりないのだが、念のため。

HTML5&CSS3ポケットリファレンス

2014年5月刊、上記『標準HTML5タグリファレンス』と同じ著者、藤本壱氏（および森史憲氏）の、より新しい本。

この書評を書いて、あらためてAmazonであれこれ比較して、この本を選んで通読したところ。

もちろん、HTML5プラスCSS3で、ポケットリファレンスのとおり、コンパクトな辞典のようなもの。
1ページに簡潔明瞭に解説が載っており、ちょっとした調べものでは利便性が高い。

カラーで見やすく、通読しても参考になることが多く、CSS3などはWebを検索してもまかなえるのだが、やはり本が手元にあると仕事もはかどる。

HTML5&CSS3ポケットリファレンス 目次

CSS3は、このようなポケット版でも辞典めいたものがなかったので、大変嬉しい。

レスポンシブWebデザイン（HTML5・CSS3）のお勧め本

とにかく新しいWebサイトをつくるなら、HTML5、CSS3、レスポンシブWebデザイン、スマホ対応サイト、モダンWebなどを勉強するなら、これらの本をお勧めしたい。