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

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

本のキャプチャ

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

本のキャプチャ

これからの「標準」を身につける
HTML+CSS デザインレシピ
[Amazonでみる]
[楽天でみる]

著:
エ・ビスコム・テック・ラボ
出版社:
マイナビ
発売日:
2014/3/20

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 デザインレシピの目次

  1. 基本
    ページを作成するための下準備
  2. ヘッダ
    ヘッダの基本レイアウト
    中央揃えのレイアウト
    ロゴ画像とサイト名を並べたレイアウト
    サイト名を画像で表示したレイアウト
    ヘッダ画像を表示したレイアウト
    ヘッダ画像にテキストを重ねたレイアウト
    ヘッダの右側にパーツを追加したレイアウト
  3. 記事
    記事の基本レイアウト
    中央揃えのレイアウト
    画像にテキストを回り込ませたレイアウト
    タイトルの下にパーツを追加したレイアウト
  4. メニュー・ナビゲーション
    リンクを縦に並べたメニューの基本レイアウト
    階層構造を持つメニュー
    リストマークを画像で表示したメニュー
    サムネイル画像の横にテキストを並べたメニュー
    リンクを横に並べたメニューの基本レイアウト
    アイコンを横に並べたメニュー
    アイコンにテキストをつけて横に並べたメニュー
  5. フッタ
    フッタの基本レイアウト
    中央揃えのレイアウト
    ロゴ画像と複数行のテキストを並べたレイアウト
    フッタ画像にテキストを重ねたレイアウト
    フッタの右側にパーツを追加したレイアウト
  6. その他
    ボタン
    フォーム
    テーブル(表組み)
    段組み
    グループ
  7. デザイン
    枠で囲むデザイン
    枠と見出しを一体化したデザイン
    罫線で区切るデザイン
    円形の枠で囲むデザイン
    吹き出し型の枠で囲むデザイン
    背景画像を利用したデザイン
    グラデーションを利用したデザイン
    パーツを重ねて表示するデザイン
  8. Bootstrapを利用したページ作成
    Bootstrapを利用してページを作成するための下準備
    グリッドの用意とパーツの配置
    CSSに触れることなくBootstrapの機能だけでページを形にする
    Bootstrapで形にしたページをテーマでアレンジする
    Bootstrapで形にしたページをCSSでアレンジする
  9. Foundationを利用したページ作成
    Foundationを利用してページを作成するための下準備
    グリッドの用意とパーツの配置
    CSSに触れることなくFoundationの機能だけでページを形にする
    Foundationで形にしたページをCSSでアレンジする
  10. フレームワークを利用しないページ作成
    パーツを配置して1段組みのレイアウトでページを形にする
    段組みの設定を追加して2段組みのレイアウトにする
    レスポンシブにして1段組みと2段組みのレイアウトを切り替える
    コンテンツ全体が横に広がりすぎないようにする
    パーツのデザインをアレンジする
  11. レシピ
    プロモーションサイト
    プロモーションサイトのコンテンツページ
    ビジネスサイト
    ショップサイト

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

本のキャプチャ

これからの「標準」を身につける
HTML+CSS デザインレシピ
[Amazonでみる]
[楽天でみる]

著:
エ・ビスコム・テック・ラボ
出版社:
マイナビ
発売日:
2014/3/20

献本の御礼

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

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

sponsors

top of page

©2018 coliss