エビスコム - HTML5&CSS3デザインブック(ステップバイステップ形式でマスターできる)
★★★★☆
直感的で分かりやすく、しかもソースは全て本の中にある
HTML5/CSS3のごく基本的な知識を前提に、レスポンシブWebデザインを導入したサイトをどうやって作ればいいか、その一例を順序立てて丁寧に書いてある本。ソースと画面表示を対応させながらサブタイトル通りステップバイステップで少しずつ進んでいく。
例えばULタグで作成したリストは次のように黒丸がつく。
--
<ul>
<li>東京最高</li>
<li>神奈川なめんな</li>
</ul>
--
- 東京最高
- 神奈川なめんな
これの黒丸をなくし、左側の余白をなくすためにスタイルシートに次のように設定すると、単純な列挙になる。
--
ul {
margin:0;
paddiing:0;
list-style: none
}
--
- 東京最高
- 神奈川なめんな
このように一々すべてのデザインの適用について、すべてソースと表示の対応がされている。CSSをどのように書けば、どこのデザインが変わるのか直感的に分かりやすい構成だ。ほんの少しずつのデザインの積み重ねが、気が付くと立派なサイトになっている様を順序良く見せられるさまは感動的である。ソースは全て本の中に書いてある。あなたもメモ帳で同じソースコードを書けば、全く同じデザインをブラウザで表示させることができる。本と同じ場所を変更すれば、同じ場所のデザインが変わる。これぞステップバイステップ形式の醍醐味である。
また、ブロック要素を使ったボックスの配置方法を詳しく解説している記述を本の先頭に持ってきたところも上手い。1つのボックスの下に3つのボックスを配置し、さらにフッターを配置する。このようなボックスの配置は昨今のwebデザインの最も基本かつ重要なことではないかと思う。古いHTMLの知識しかなかった私はテーブル使うんじゃないの？なんてアホなことを考えていたが、divをはじめとするボックス要素の力の大きさを見せつけられる内容であった。
網羅性がなく、内容は薄い
しかし欠点もある。まず網羅性がない。実践的な解説に終始しており、CSSの機能を逐次解説することはない。ここで紹介されているデザインはあくまで一例であって、絶対的なものでは決してない。筆者の思想も全く見えてこない。また、例えばリンク先が全部 A HREF="#" だったりと完成したページを紹介しているわけでもなく、今後記事を追加していったときにどのようにデザインを変えるべきか、などということは全く考慮されていない。この本の範疇に敢えて含めなかったのかもしれないが。
ビジュアル的分かりやすさ重視のため、この分厚さでページを4つ作って終わり、というのもややバリエーションに欠ける。
総合的には買って損はない
とはいえ、分かりやすさにかけては類書と比べて群を抜く。この本を参考にして私は先週、別サイトのトップページをデザインすることができた。webデザイン入門者にとってはうってつけの本と言えるだろう。ただし、一度マスターしてしまえばあまり読み返すことはないかもしれない。ステップアップのためには、他のデザイン書や様々なウェブサイトのHTMLやCSSを読んで、デザイン術を盗む必要がある。
買って損はない。私は新本で購入したが、2808円はやや高く感じる。しかし古本が出回る頃には陳腐化している可能性もあるので、出費としては仕方ないと割り切るしかなさそうだ。
