副題の「WebサイトのUI設計・情報デザイン良い・悪いが比べてわかる」の通り、テーマ毎にページの見開きでBadデザイン、Goodデザインを比較し、改善方法を解説する教科書です。
【Webサイト制作】服部雄樹『HTML & CSSとWebデザインが1冊できちんと身につく本』
ご覧いただいているWebサイトはWordPressで制作しているのですが、見てくれを工夫しようとすると、どうしてもHTML、そしてCSSの知識が必要です。もっとも、いちからエディタでガリガリ書くわけではないので、不明点をピンポイントで参照できる程度の教科書があれば用は足ります。HTML、CSSのおらさい(およびHTML5、CSS3の理解)を兼ねて、服部雄樹『HTML & CSSとWebデザインが1冊できちんと身につく本』を手に取りました。
本書のアピールポイントにあるとおり、4つのレイアウトパターン(フル・スクリーン、シングルカラム、2カラム、グリット)がサンプルをもとに学べるようになっています。レスポンシブデザインにもページを割いていて、(内容をすっかり忘れたとしても)Webデザインで躓いた時に参照するには十分です。
Chapter1「知っておきたいサイトでデザインの基本」は、Webサイトの仕組みから、Webデザインって何?、フォントや色に関する知識まで概説されています。知識をもたない読者のための導入部ですね。カラーでわかりやすく図解されているので、理解が進むと思います(その分、本書はいいお値段がします)。
Chapter2「サイト制作の前に準備しておくこと」は、本書で使うエディター Branckets のインストールと使い方、実習用サンプルの概要が記載されています。
Chapter3「知っておきたいHTMLのきほんと書き方」は、そもそもHTMLとは、Chapter4「知っておきたいCSSのきほんと書き方」は、そもそもCSSとは、が解説されています。ここまでは、既に知識をお持ちの方には不要でしょうか。分かり易いかどうかは別として、ネットで地道に調べれば得られる内容とは思います。自分は、Webフォントについて曖昧だったので、この説明は有益でした。
Chapter4までで122ページ(索引を含む全ページ287)を費やすので、ここにメリットを見出せないなら、他の書籍をあたった方が良いかもしれません。
Chapter5「フルスクリーンページを制作する」から実習が始まります。サンプルコードを試しながら読み進めると、HTMLやCSSの変更で、実際に見た目がどう変化していくのかが体感できるでしょう。Chapter6「シングルカラムページを制作する」、Chapter7「2カラムぺージを制作する」、Chapter8「グリッドレイアウトページの制作と動画の埋め込み」と、レイアウトパターン毎に実習が進みます。それぞれの特性に合わせたデザイン上のポイントが明示されているのが嬉しいですね。
Chapter9「問い合わせページを制作する」、Chapter10「マルチデバイス対応ページを制作する」までで実習は完了です。 CGI、PHP等、プログラミングの詳細はありませんので、こちらは別の書籍を参考とすることになります。
自分は、ネットを調べながらHTMLやCSSに手を加えているのですが、そもそもコレなんだっけ?に立ち戻るには良い書籍です。ただ、(どの書籍も同様ですが) お困り事からインデックスを探すことは難しいので、巻末のHTMLのタグやCSSのプロパティから解説ページを参照する使い方をしています。
この手の書籍は、慣れればネットで十分なのでしょうが、本を置いておくと安心する自分のような方には最適です。
- その他のWebサイト制作に役立つ書籍(参考書・教科書、ワードブレス、デザイン)については関連記事をご覧下さい。