これからの「標準」を身につける　HTML+CSSデザインレシピ

関連サイト

本書の関連ページが用意されています。

• これからの「標準」を身につける HTML+CSSデザインレシピ｜マイナビブックス

内容紹介

HTML5＋CSS3で多様なデバイスに対応できるWebサイトを制作するために。これから必要とされるデザインの「スタンダード」手法をレシピ方式で徹底解説しました。

スマートフォンやタブレットの登場により、多様なデバイスに対応できるWebページが求められるようになっています。その中で、レスポンシブWebデザインをはじめとする考え方が生まれ、Webページに当然のように組み込まれる時代になってきました。その結果、多様なデバイスに対応したページを効率よく作成していくため、Webページ制作の現場ではワークフローの変化も起きています。PCブラウザという１つの環境をターゲットに制作できた時代と異なり、現在は膨大な数のデバイスをターゲットに、さまざまな切り口で最大公約数を考えながらページを作成しなければなりません。従来のデザインカンプを再現する作り方では対応が難しく、ページを動かしながら作り込んでいく必要があります。

そのような現状をふまえ、本書にはこれからのWebページ制作に必要なレシピをできるかぎり詰め込みました。

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

Chapter1～6では、そのパーツの作成について解説します。ヘッダー、記事、メニュー、フッター、ボタン、フォーム、テーブル、段組みなどそれぞれのパーツと、そのパーツを組み合わせる際のデザインのレシピを、多数のTipsを交えて紹介していきます。

Chapter7～9では、それらのパーツを使って実際にページを作成していく方法を解説しています。レスポンシブWebデザインをはじめとする考え方が当然のものとして扱われている現状に合わせて、CSSフレームワークを利用せずに作るのか、CSS フレームワークを利用して作るのかを選択できるようにしています。CSS フレームワークとしてBootstrapとFoundationを利用する方法を解説しています。

Chapter10では、本書収録のパーツとCSSフレームワークを組み合わせて使うことで、どのようなことができるのか、どのくらい作り込むことができるのかを、4例紹介しています。プロモーションサイト、プロモーションサイトのコンテンツページ、ビジネスサイト、ショップサイトの4例です。

パーツやレシピのデータは本書サポートサイトからダウンロードできます。

書誌情報

• 著者: エ・ビスコム・テック・ラボ
• 発行日: 2014-03-20 (紙書籍版発行日: 2014-03-20)
• 最終更新日: 2014-04-23
• バージョン: 2.0.0
• ページ数: 322ページ(PDF版換算)
• 対応フォーマット: PDF
• 出版社: マイナビ出版

対象読者

著者について

エ・ビスコム・テック・ラボ

さまざまなメディアにおける企画制作を世界各地のネットワークを駆使して展開。コンピュータ、インターネット関係では書籍、CD-ROM、デジタル映像、CG、ソフトウェアの企画制作、WWWシステムの構築などを行う。
主な編著書： 『HTML5　スタンダード・デザインガイド』マイナビ刊
『CSS3　スタンダード・デザインガイド【改訂第2版】』同上
『スマートフォンサイトのためのHTML5+CSS3』同上
『XHTML/HTML+CSS　スーパーレシピブック』同上
『WordPress3　サイト構築スタイルブック』同上
『WordPress3　デザイン＆カスタマイズ　スタイルブック』同上
『Movable Type　サイトデザイン＆レシピ事典』同上
『WordPress ステップアップブック』ソシム刊
『HTML5&CSS3レッスンブック』同上
『Dreamweaver+HTML5&CSS3レッスンブック』同上
『HTML5 & CSS3ステップアップブック』同上
『WordPressデザインブック3.x対応』同上
『HTML/XHTML&スタイルシート レッスンブック』同上
『HTML/XHTML&スタイルシート デザインブック』同上

目次

BASE　基本

• BASE　ページを作成するための下準備
  • TIPS　<meta name="viewport">のinitial-scaleの指定
  • TIPS　游ゴシックで表示する場合
  • TIPS　Internet Explorerが互換表示モードになるのを防ぐ
  • TIPS　IE8/IE7をメディアクエリに対応させる
• About CSS　CSSについて

CHAPTER 1　ヘッダー

• HEADER 01　ヘッダーの基本レイアウト
• HEADER 02　中央揃えのレイアウト
• HEADER 03　ロゴ画像とサイト名を並べたレイアウト
  • TIPS　vertical-align: middleの利用
  • 03-A　ロゴ画像とサイト名を上下に並べて中央揃えにする
• HEADER 04　ロゴ画像と複数行のテキストを並べたレイアウト
  • TIPS　floatを利用したレイアウトの仕組み
  • TIPS　clearfix（クリアフィックス）の設定
  • TIPS　overflowでより簡単にclearfix（クリアフィックス）の設定を行う
  • 04-A　ロゴ画像と複数行のテキストを垂直方向で中央揃えにする
• HEADER 05　サイト名を画像で表示したレイアウト
  • 05-A　高解像度な閲覧環境で画像がぼけるのを防ぐ
  • TIPS　レスポンシブイメージの設定
  • 05-B　SVGフォーマットの画像を利用する
• HEADER 06　ヘッダー画像を表示したレイアウト
• HEADER 07　ヘッダー画像にテキストを重ねたレイアウト
• HEADER 08　ヘッダーの右端にパーツを追加したレイアウト
  • TIPS　右端のパーツのレイアウトをレスポンシブにするには

CHAPTER 2　記事

• ENTRY 01　記事の基本レイアウト
  • 01-A　パーツ内の最後の要素の下マージンを削除する
  • 01-B　フォントの構成
  • TIPS　行の構成
• ENTRY 02　中央揃えのレイアウト
  • 02-A　中央揃えの中で本文だけを左揃えにする場合
  • 02-B　画像だけを中央揃えにする場合
• ENTRY 03　画像にテキストを回り込ませたレイアウト
  • 03-A　画像の下にテキストを回り込ませない場合
• ENTRY 04　タイトルの下にパーツを追加したレイアウト

CHAPTER 3　メニュー

• MENU 01　リンクを縦に並べたメニューの基本レイアウト
  • 01-A　縦に並べたリンクを罫線で区切る
• MENU 02　階層構造を持つメニュー
• MENU 03　リストマークを画像で表示したメニュー
  • 03-A　リストマークを垂直方向の中央に揃える
  • 03-B　リストマークを文字で表示する
  • 03-C　リストマークをアイコンフォントで表示する
  • 03-D　リンクの右端に右向きの矢印アイコンを表示する
  • 03-E　リストマークを連番で表示する
• MENU 04　サムネイル画像の横にテキストを並べたメニュー
  • 04-A　日付の横にタイトルを並べたメニュー
• MENU 05　リンクを横に並べたメニューの基本レイアウト
  • 05-A　メニューをコンパクトに表示する
  • 05-B　横に並べたリンクを罫線で区切る
  • 05-C　リンクの横幅を固定する場合
  • 05-D　等分割した横幅でリンクを表示する場合　その１
  • 05-E　等分割した横幅でリンクを表示する場合　その２
  • 05-F　各リンクに付加情報を追加する
  • 05-G　横に並べたリンクをパンくずリストとして利用する
• MENU 06　アイコンを横に並べたメニュー
  • 06-A　アイコンを画像で表示する場合
• MENU 07　アイコンにテキストをつけて横に並べたメニュー
  • 07-A　アイコンを画像で表示する場合
  • TIPS　ドロップダウンメニューやタブメニューの設定について

CHAPTER 4　フッター

• FOOTER 01　フッターの基本レイアウト
• FOOTER 02　中央揃えのレイアウト
• FOOTER 03　ロゴ画像と複数行のテキストを並べたレイアウト
• FOOTER 04　フッター画像にテキストを重ねたレイアウト
  • 04-A　ページの背景色で表示する
  • TIPS　レスポンシブイメージの設定（背景画像の場合）
• FOOTER 05　フッターの右端にパーツを追加したレイアウト
  • TIPS　フッターを段組みにしてメニューなどを配置する場合

CHAPTER 5　その他

• OTHER 01　ボタン
  • 01-A　フォームを利用したボタン
  • 01-B　配置した場所の横幅に合わせてボタンを表示する
  • TIPS　CSSフレームワークによるボタンの表示
  • 01-C　ラベルの表示
• OTHER 02　フォーム
  • TIPS　CSSフレームワークによるフォームの表示
• OTHER 03　テーブル（表組み）
  • 03-A　横方向の罫線のみで区切る
  • 03-B　テーブルの行をストライプにする
  • 03-C　テーブルの列をストライプにする
  • 03-D　列ごとに位置揃えを変更する
  • 03-E　レスポンシブテーブル
  • TIPS　CSSフレームワークによるテーブルの表示
• OTHER 04　段組み
  • 04-A　段ごとに横幅を変える
  • 04-B　段数を変える
• OTHER 05　グループ

CHAPTER 6　デザイン

• DESIGN 01　枠で囲むデザイン
  • 01-A　枠のデザインのアレンジ
  • 01-B　枠のデザインで見出しやボタンをアレンジする
  • TIPS　デザインの設定の適用方法： プロパティの指定が重複しないようにする場合
  • TIPS　デザインの設定の適用方法： クラス名で指定できるようにする場合
  • TIPS　デザインの設定の適用方法： Sassのミックスイン（@mixin）として利用する場合
  • TIPS　枠やボタンの設定を簡単に作成できるCSSジェネレータ
• DESIGN 02　枠と見出しを一体化したデザイン
  • 02-A　枠と見出しを一体化したデザインのアレンジ
  • 02-B　枠とメニューを一体化したデザイン
• DESIGN 03　罫線で区切るデザイン
  • 03-A　罫線で区切るデザインのアレンジ
• DESIGN 04　円形の枠で囲むデザイン
  • 04-A　円形の枠のデザインのアレンジ
  • 04-B　ボタンを円形にする
  • 04-C　画像を円形に切り抜く
  • 04-D　半円形の枠で囲む
• DESIGN 05　吹き出し型の枠で囲むデザイン
  • 05-A　罫線で囲んだ枠を吹き出し型にする
  • 05-B　吹き出し型の枠に影をつける
  • TIPS　吹き出しの設定を簡単に作成できるCSSジェネレータ
• DESIGN 06　背景画像を利用したデザイン
  • 06-A　背景画像に重ねたテキストに影をつけて読みやすくする
  • 06-B　背景画像に重ねたテキストを半透明の枠で囲んで読みやすくする
• DESIGN 07　グラデーションを利用したデザイン
  • 07-A　古いブラウザに対応するためのグラデーションの設定
  • 07-B　SVGを利用したグラデーションの設定
  • TIPS　グラデーションの設定を簡単に作成できるCSSジェネレータ
• DESIGN 08　パーツを重ねて表示するデザイン
  • TIPS　色の選択
  • TIPS　ネット上のリソースを活用してデザインする

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

• BOOTSTRAP 01　Bootstrapを利用してページを作成するための下準備
  • TIPS　BootstrapをCDNで利用する
  • TIPS　必要な機能のみを含んだBootstrapをダウンロードする
• BOOTSTRAP 02　グリッドの用意とパーツの配置
  • 02-A　Bootstrapのグリッドシステム
  • 02-B　グリッドのネスト
  • 02-C　小さい画面でメニューを上に表示する
• BOOTSTRAP 03　CSSに触れることなくBootstrapの機能だけでページを形にする
  • 03-A　ナビゲーションバーのアレンジ
  • TIPS　適用されたCSSの設定を確認する方法
• BOOTSTRAP 04　Bootstrapで形にしたページをテーマでアレンジする
• BOOTSTRAP 05　Bootstrapで形にしたページをCSSでアレンジする
  • TIPS　LESSやSassを利用したデザインのアレンジ
  • TIPS　ナビゲーションバーにドロップダウンメニューを追加する

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

• FOUNDATION 01　Foundationを利用してページを作成するための下準備
  • TIPS　必要な機能のみを含んだFoundationをダウンロードする
• FOUNDATION 02　グリッドの用意とパーツの配置
  • 02-A　Foundationのグリッドシステム
  • 02-B　グリッドのネスト
  • 02-C　小さい画面でメニューを上に表示する
• FOUNDATION 03　CSSに触れることなくFoundationの機能だけでページを形にする
  • 03-A　トップバーのアレンジ
• FOUNDATION 04　Foundationで形にしたページをCSSでアレンジする
  • TIPS　Sassを利用したデザインのアレンジ
  • TIPS　トップバーにドロップダウンメニューを追加する

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

• NO-FRAMEWORK 01　パーツを配置して１段組みのレイアウトでページを形にする
• NO-FRAMEWORK 02　段組みの設定を追加して２段組みのレイアウトにする
• NO-FRAMEWORK 03　レスポンシブにして１段組みと２段組みのレイアウトを切り替える
  • TIPS　メディアクエリの利用
• NO-FRAMEWORK 04　コンテンツ全体が横に広がりすぎないようにする
• NO-FRAMEWORK 05　パーツのデザインをアレンジする
  • TIPS　CSSフレームワークのグリッドシステムにおける余白の扱い

CHAPTER 10　レシピ

• RECIPE 01　プロモーションサイト
• RECIPE 02　プロモーションサイトのコンテンツページ
• RECIPE 03　ビジネスサイト
• RECIPE 04　ショップサイト