最強のエビスコム・メソッド見参！『ボックス（div要素）』でレスポンシブWeb思考を学ぶ！！！

「WebデザインのレイアウトとレスポンシブWebデザイン（RWD）の概念・思考が素晴らしく分かり易い」

このような書籍、
2年位前に出て欲しかった。

見開きでパッと頭に入りやすい、
最強で見事なレイアウト「エビスコム・メソッド」。

私は可能な限り、
色々なWeb制作の書籍を拝見させて頂いているが、

これほど、
適度な解説文と見やすい図解とキャプチャの構成は他にはない。

HTMLとCSSの基本が理解でき、
Webサイトを自力で作れる人ならほぼ挫折しない。


他のWeb制作関連の技術書だと、
専門なだけに解説文が長文になり、

ソースコードも長く深い。
カラーでなく、
ページ数も300ページ以上あるため
人によっては、
学習するのに苦労するでしょう。

前述の通り、
本書はゴチャゴチャせず「パッと見やすい」内容で頭に入っていく。


まずは、
HTML5の基本構成を簡単に紹介、
body要素の中にdiv要素をボックスとして上から順に4つ配置。

その中の2つを2カラム（回り込み）にし、
主要のWebサイトの基本レイアウト構成である
「ヘッダー、
メインコンテンツ、
サイドメニュー、
フッター」の外枠のボックスが完成する。

これが「Chapter 1」だ。
※メディアクエリーも解説済み。


それ以降のChapterは、
「Chapter 1」で解説した外枠ボックスのHTMLを使い、

外枠の各ボックスの中身を埋めていく作業（CSSの装飾とマークアップ）を行なって、

ブログ・ニュース系サイトとビジネスサイトのトップとコンテンツページの全4パターンを作成していくのだ。


これら完成後、
ブラウザのウィンドウを狭めてみたらわかるが、
ブレークポイントごとで、

各デバイス用のレイアウトに切り替わる。
なんと簡単にRWDのサイトができてしまう。

こんなに簡単にできてしまっていいものなのか・・・もう、
驚きです。


本書の以前のRWD本の説明は複雑で難しい。
いかにも「これがプロ仕様だ」って感じ。