MdNCORPORATION

ウェブレイアウトの教科書 PC・スマートフォン・タブレット時代の標準デザイン

ウェブレイアウトの教科書 PC・スマートフォン・タブレット時代の標準デザイン

境祐司 著
本体 2500円(税別) ※電子書籍の価格は各販売ストアにてご確認ください。
発売日 2011-12-21
仕様 B5変型判/240pP
ISBN 978-4-8443-6241-8
スマートフォンやタブレットなど、ウェブを利用・閲覧するためのデバイスは日を追うごとに増え続けています。ウェブレイアウトも、新しいデバイスを考慮したものが求められる時代になりました。本書は、PC・スマートフォン・タブレット時代を迎え、新たに知っておかなければならないウェブレイアウトの知識や技法を体系的にまとめた教科書です。2011年以降のウェブ制作を取り巻く環境や潮流、レイアウトの種類や見せ方・技法、インターフェイスの構造や実装方法など、現在のウェブレイアウトに必要なすべての項目を網羅しました。


■ページ見本










目次

■はじめに
■本書の使い方

■第1章 レイアウトデザインの基本
1.1 レイアウトとは?
1.2 グリッドシステムの概念
1.3 ホワイトスペースを理解する
1.4 装飾と情報のデザイン
1.5 浮動化する新しいレイアウトデザイン

■第2章 ウェブデザインのレイアウト技法
2.1 ウェブレイアウトの基本
2.2 アダプティブ(適応可能)なレイアウトデザイン
2.3 アダプティブ・ウェブデザインの基本を理解する
2.4 CSSの基本概念「ボックスモデル」を理解する
2.5 CSS3を使ったこれからのウェブレイアウト

■第3章 デスクトップ
3.1 最もベーシックなリキッドレイアウト
3.2 フロート処理による段組みレイアウト
3.3 フロート処理の解除と段組みレイアウトの応用
3.4 CSS3グリッドレイアウトによるページデザイン
3.5 グリッドレイアウトによる調整可能なデザイン
3.6 マルチカラムレイアウトとの組み合わせ
3.7 フレキシブルボックスレイアウトとの組み合わせ

■第4章 携帯電話・スマートフォン
4.1 携帯電話用のウェブサイト「ケータイサイト」
4.2 スマートフォン向けのウェブサイト
4.3 コンテキスト・ファーストの考え方
4.4 スマートデバイスとViewport
4.5 コンテンツが優先される小さなスクリーンのレイアウト
4.6 メディアクエリによるレイアウトの切り替え

■第5章 タブレット
5.1 タブレットスクリーンのレイアウト
5.2 ウェブアプリのレイアウト設計
5.3 ネイティブアプリのレイアウト設計
5.4 レイアウトデザインのフレームワーク

■第6章 マルチデバイス対応のレイアウト
6.1 ラフスケッチとモックアップの作成
6.2 固定レイアウトで設計してリキッドレイアウトに変換する
6.3 メディアクエリでスタイルを切り替える
6.4 対象とする閲覧環境で検証する
6.5 アダプティブ・ウェブデザインの実践[1]設計・制作
6.6 アダプティブ・ウェブデザインの実践[2]スタイルの切り替え

さくいん
著者紹介・参考文献

ダウンロードデータ

ウェブレイアウトの教科書
PC・スマートフォン・タブレット時代の標準デザイン

サンプルデータダウンロード

このたびは、「ウェブレイアウトの教科書 PC・スマートフォン・タブレット時代の標準デザイン」をご購入いただきまして、誠にありがとうございます。

●以下に本書の解説で使用したサンプルデータを用意しましたのでご利用ください。


weblayout_sample.zip(41KB)

収録データは下記のページのソースコードが中心です(数行のソースコードは割愛しました。なにとぞご容赦ください)。

【第6章 5節(6.5)アダプティブ・ウェブデザインの実践[1]設計・制作】

HTMLファイル
  step02.html
  step03.html
  step04.html
  step06.html
  step07.html
  step08.html
  step09.html

CSSファイル
  step04.css
  step05.css
  step06.css
  step07.css

【第6章 6節(6.6)アダプティブ・ウェブデザインの実践[2]スタイルの切り替え】

HTMLファイル
  step02.html
  step03.html
  step04.html
  step05.html

CSSファイル
  step04.css
  step07.css

JavaScriptファイル
  respond.src.js



【ダウンロードにあたってのご注意】

ダウンロードファイルは、ZIP形式で圧縮されています。Windows、Macそれぞれの解凍ソフトを使って圧縮ファイルを解凍してください。

ダウンロードファイルを解凍すると、サンプルデータ(テキストデータ)がCHAPTERごとにHTML、CSS、JavaScriptの各種ファイルごとに収録されています。Windows、Macそれぞれのテキストエディタを使ってご利用ください。

サンプルデータには「サンプルファイルについて.txt」が同梱されていますので、ご使用の前に必ずお読みください。

※当サイトからダウンロードできるサンプルデータおよびリンクされたWebサイトを実行した結果につきましては、著者および株式会社エムディエヌコーポレーションは一切の責任を負いかねます。お客様の責任においてご利用ください。

※弊社WebサイトからダウンロードできるサンプルデータおよびリンクされたWebサイトは、本書の解説内容をご理解いただくために、ご自身で試される場合にのみ使用できる参照用データです。その他の用途での使用や配布などは一切できませんので、あらかじめご了承ください。ただし「jQuery」等の一般に公開されているJavaScriptライブラリについては、各ライブラリのライセンス条件に従います。

※弊社WebサイトからダウンロードできるサンプルデータおよびリンクされたWebサイトの著作権は、それぞれの制作者に帰属します。

※本書に掲載されているHTML、CSS、JavaScript等のコメントや改行位置等は、紙面掲載用として加工しているため、ダウンロードしたサンプルデータとは異なる場合があります。

お詫びと訂正

『ウェブレイアウトの教科書 PC・スマートフォン・タブレット時代の標準デザイン』

お詫びと訂正のお知らせ



このたびは『ウェブレイアウトの教科書 PC・スマートフォン・タブレット時代の標準デザイン』をご購入いただきまして、誠にありがとうございました。

本書の170ページ側注の改行位置に誤りがございました。

誤)
The Future of Adaptive Web
Design
https://channel9.msdn.com/

Events/MIX/MIX11/HTM11マー
カス・ミルケ氏のTwitter
https://twitter.com/#!/mwmielke


正)
The Future of Adaptive Web
Design
https://channel9.msdn.com/
Events/MIX/MIX11/HTM11

マーカス・ミルケ氏のTwitter
https://twitter.com/#!/mwmielke

訂正した該当ページのPDFファイルを用意させていただきましたので、ご利用いただけますようお願い申し上げます。



訂正PDFのダウンロード(PDFファイル:3.9MB)
  P108.pdf

このたびはご迷惑をおかけいたしまして誠に申し訳ございません。
訂正してお詫びいたします。

オリジナルグッズ制作がもっと楽しくなる大活躍アイデアシリーズ

今よりぐっと"良い"写真に仕上げる!おすすめ解説書ラインナップ