試験公開中

このエントリーをはてなブックマークに追加

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

マイナビ出版

2,880円+税

HTML5やCSS3を使ったWeb制作が標準となり、またスマートフォンやタブレットの登場によって多彩なデバイスに対応できるWebページが求められるようになってきています。本書はそういう最新動向を踏まえて、現在のWeb制作の手法と技術、テクニックの「スタンダード」を、レシピ方式でまとめたものです。

関連サイト

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

内容紹介

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

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

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

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

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

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

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

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

書誌情報

  • 著者: エ・ビスコム・テック・ラボ
  • 発行日: (紙書籍版発行日: 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 等分割した横幅でリンクを表示する場合 その1
    • 05-E 等分割した横幅でリンクを表示する場合 その2
    • 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 パーツを配置して1段組みのレイアウトでページを形にする
  • NO-FRAMEWORK 02 段組みの設定を追加して2段組みのレイアウトにする
  • NO-FRAMEWORK 03 レスポンシブにして1段組みと2段組みのレイアウトを切り替える
    • TIPS メディアクエリの利用
  • NO-FRAMEWORK 04 コンテンツ全体が横に広がりすぎないようにする
  • NO-FRAMEWORK 05 パーツのデザインをアレンジする
    • TIPS CSSフレームワークのグリッドシステムにおける余白の扱い

CHAPTER 10 レシピ

  • RECIPE 01 プロモーションサイト
  • RECIPE 02 プロモーションサイトのコンテンツページ
  • RECIPE 03 ビジネスサイト
  • RECIPE 04 ショップサイト
Home 書籍一覧 これからの「標準」を身につける HTML+CSSデザインレシピ ▲ ページトップへ戻る