今求められているHTML/CSSの実践テクニックが丁寧に解説された良書 -HTML+CSS デザインレシピ

HTML5+CSS3でデスクトップ、スマフォ、タブレットなど多様なデバイスに対応できるウェブサイトを制作するための今、そしてこれから必要とされる実践的なテクニックが丁寧にわかりやすく解説されたコーダー必携の良本を紹介します。

本書の対象は中級・上級者。実務でHTML/CSSをバリバリ書いている人です。初級者も入門的な内容は一切無いけど、意欲があれば大丈夫！

Kindle版もお値段ちょっと安めででてるのが嬉しいですね。

• HTML+CSS デザインレシピ -Kindle版

本書の基本構成は、ベースを元にパーツを組み合わせて配置してくいくことで、オリジナルのページを作成していきます。

配置の方法は、Bootstrap, Foundationといった人気のあるフレームワークを使用する方法、そういったフレームワーク無しで作る方法で、それぞれの比較検討にもなると思います。

そんな本書の中身を紙面のキャプチャで少しだけご紹介。

この本は実践的なためHTMLって何とかそういったものは一切ありません。いきなりページ作成の基本となるベースのページ作成から解説が始まります。

Tipsもかなり充実しています。
Windows 8.1, OS X Mavericksに対応したフォントの指定方法、IE11用のmeta設定、Bootstrap使用時のスマフォ用のmeta設定など、制作者がメモしておきたい情報が満載です。

ベースの作成が終わると1章から5章にかけて、さまざまなUIエレメントを実装します。
ここの充実度がすごいです。

まずはヘッダ、ロゴとテキストを並べたレイアウト。
どこで揃えるのか、マージンはどこを確保するのか、キャッチがつくとどうなるのか、などさまざまなバリエーションが解説されています。

解説は本当に丁寧で、親要素でマージンを確保、子要素でマージンを確保、floatの使いどころ、clearfixとoverflowのどちらがよいか、どこを可変にするのか、SVGを利用してみるなど、コーダーの引き出しが増えること間違い無しです。

エレメントが追加される可能性があり、且つレスポンシブ対応にする、といったかなり実践的な情報もありつつ、これらのエレメントがBootstrapやFoundationではどうなのかといった繋がりの情報も網羅されています。

ナビゲーションでは例えば、リンクが機能する範囲を縦方向に広げるテクニックとか。

フッタでは画像にテキストを重ねて、レスポンシブにも対応するテクニックとか。

6章のデザインでは、UIエレメントのさまざまなデザインを実装レベルで解説しています。

テキストなどを囲む枠も矩形のものをはじめ、枠と見出しを一体化したもの、罫線だけで区切るもの、円形のもの、吹き出し状のもの、背景を利用するものなど、さらにそれぞれに多彩なバリエーションがあります。
キャプチャの円形も円形全部の1/4ほどです。

7章からはBootstrapなどのフレームワークを使った実装方法です。

一つ上のキャプチャと同じ絵柄ですが、こちらは8章のFoundation。二つの流れ的には同じなので、どちらが自分にあっているのかもチェックできます。

フレームワークを使わない人には、9章から。ベースのHTMLに1-6章のエレメントを使い、ページを作成していきます。

最後の章ではプロモーションサイト、ビジネスサイト、ショッピングサイトを例にブラッシュアップします。

HTML+CSS デザインレシピの目次

0. 基本

   ページを作成するための下準備

1. ヘッダ

   ヘッダの基本レイアウト

   中央揃えのレイアウト

   ロゴ画像とサイト名を並べたレイアウト

   サイト名を画像で表示したレイアウト

   ヘッダ画像を表示したレイアウト

   ヘッダ画像にテキストを重ねたレイアウト

   ヘッダの右側にパーツを追加したレイアウト

2. 記事

   記事の基本レイアウト

   中央揃えのレイアウト

   画像にテキストを回り込ませたレイアウト

   タイトルの下にパーツを追加したレイアウト

3. メニュー・ナビゲーション

   リンクを縦に並べたメニューの基本レイアウト

   階層構造を持つメニュー

   リストマークを画像で表示したメニュー

   サムネイル画像の横にテキストを並べたメニュー

   リンクを横に並べたメニューの基本レイアウト

   アイコンを横に並べたメニュー

   アイコンにテキストをつけて横に並べたメニュー

4. フッタ

   フッタの基本レイアウト

   中央揃えのレイアウト

   ロゴ画像と複数行のテキストを並べたレイアウト

   フッタ画像にテキストを重ねたレイアウト

   フッタの右側にパーツを追加したレイアウト

5. その他

   ボタン

   フォーム

   テーブル（表組み）

   段組み

   グループ

6. デザイン

   枠で囲むデザイン

   枠と見出しを一体化したデザイン

   罫線で区切るデザイン

   円形の枠で囲むデザイン

   吹き出し型の枠で囲むデザイン

   背景画像を利用したデザイン

   グラデーションを利用したデザイン

   パーツを重ねて表示するデザイン

7. Bootstrapを利用したページ作成

   Bootstrapを利用してページを作成するための下準備

   グリッドの用意とパーツの配置

   CSSに触れることなくBootstrapの機能だけでページを形にする

   Bootstrapで形にしたページをテーマでアレンジする

   Bootstrapで形にしたページをCSSでアレンジする

8. Foundationを利用したページ作成

   Foundationを利用してページを作成するための下準備

   グリッドの用意とパーツの配置

   CSSに触れることなくFoundationの機能だけでページを形にする

   Foundationで形にしたページをCSSでアレンジする

9. フレームワークを利用しないページ作成

   パーツを配置して1段組みのレイアウトでページを形にする

   段組みの設定を追加して2段組みのレイアウトにする

   レスポンシブにして1段組みと2段組みのレイアウトを切り替える

   コンテンツ全体が横に広がりすぎないようにする

   パーツのデザインをアレンジする

10. レシピ

    プロモーションサイト

    プロモーションサイトのコンテンツページ

    ビジネスサイト

    ショップサイト

固定からリキッドへ、パーツのコンポーネント化、CSSフレームワークの活用といった最近のワークフローにあったHTML/CSSのテクニックを学びたい、身につけたいウェブ制作者には是非とも読んでほしい一冊です。

献本の御礼

最後に、献本いただいたマイナビの担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

• お問い合わせ｜コリス