これからの「標準」を身につける HTML+CSSデザインレシピ
- 著作者名：エ・ビスコム・テック・ラボ
-
- 書籍：3,168円
- 電子版：3,168円
- B5変型判：320ページ
- ISBN：978-4-8399-4887-0
- 発売日：2014年03月20日
- シリーズ名：Web Designing Books
- 備考：初中級/Win&Mac
- Tweet
- mixiチェック
内容紹介
HTML5とCSS3によるサイト制作の“標準手法”をマスターしよう！
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例です。
パーツやレシピのデータは本書サポートサイトからダウンロードできます。
続きを読む
充実のラインナップに加え、割引セールも定期的に実施中！
商品を選択する
| フォーマット | 価格 | 備考 | |
|---|---|---|---|
| 書籍 | 3,168円 | ||
| 3,168円 | ※当商品は発送を伴いません。ご購入後、「マイページ」から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 ショップサイト
