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

  • 著作者名:エ・ビスコム・テック・ラボ
    • 書籍:3,110円
    • 電子版:3,110円
  • B5変型判:320ページ
  • ISBN:978-4-8399-4887-0
  • 発売日:2014年03月20日
  • シリーズ名:Web Designing Books
  • 備考:初中級/Win&Mac
  • 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,110
PDF 3,110 当商品は発送を伴いません。ご購入後、「マイページ」から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 ショップサイト

この商品を買った人はこんな商品も買っています


最近チェックした商品

Tポイント利用手続き

         Tポイント利用手続きに関する同意事項

                                株式会社マイナビ出版

株式会社マイナビ出版が提供するマイナビBOOKSにおいてTポイントご利用続きをされる方は、以下に掲げるお客様の個人情報の取り扱いについてご確認の上、ご同意下さい。

マイナビBOOKSにおいてTポイントサービスをご利用いただいた場合に、当社から、次に掲げる<提供情報>を、<提供目的>のためにカルチュア・コンビニエンス・クラブ株式会社(以下「CCC」といいます)へ提供します。

  <提供目的>:CCCの定める個人情報保護方針及びマイナビBOOKSにおけるT会員規約第4条に定める利用目的で利用するためTポイントサービスを利用するため
  <提供情報>:
   1)お客様が【マイナビBOOKS】の正当な利用者であるという情報
   2)ポイント数・利用日
   3)その他、Tポイントサービスを利用するにあたり必要な情報

  <提供方法>: 電磁的記録媒体の送付またはデータ通信による。ただし、提供するデータについては暗号化を施すものとする。

なお、CCCに提供された、以下の情報の利用については、CCCの定める個人情報保護方針及びT会員規約 に沿って取り扱われます。
上記の情報提供の停止をご希望される場合には、【マイナビBOOKS】におけるTポイント利用手続きの解除を実施していただく必要があります。
Tポイント利用手続きの解除、およびTポイントサービスにおける個人情報に関するお問い合わせ先は、以下のとおりです。
お客様お問い合わせ先:Tサイト(http://qa.tsite.jp/faq/show/22612)

 なお、Tポイント利用手続きの解除が完了しますと、マイナビBOOKSにおけるTポイントサービスをご利用いただけなくなりますので、予めご了承ください。

Tポイント利用手続きを行いますか?