購入前に目次をご確認ください
MdN Web Mook これからのWebサイト設計の新しい教科書
エムディエヌコーポレーション / 2015年03月23日 / 全290ページ
【複数デバイス対応を効率化するフロー＆ノウハウがわかる!】
本書は、Webサイトをマルチデバイス対応（レスポンシブWebデザイン対応）させる上での、設計の考え方とCSSフレームワーク（Bootstrap）を利用した実装方法を伝える解説書です。前半では「コンポーネント」の概念を取り入れた新しいサイト設計の考え方、フレームワークの特徴などを丁寧に紹介。後半では、Bootstrapを用いたサンプルをもとに、マルチデバイス対応サイトを設計・制作する手法やカスタマイズ方法などを解説。最終章では実装をより効率化・チューニングする手法も紹介しています。なお、本書のサンプルデータはダウンロードにて提供します。
本書は、Webサイトをマルチデバイス対応（レスポンシブWebデザイン対応）させる上での、設計の考え方とCSSフレームワーク（Bootstrap）を利用した実装方法を伝える解説書です。前半では「コンポーネント」の概念を取り入れた新しいサイト設計の考え方、フレームワークの特徴などを丁寧に紹介。後半では、Bootstrapを用いたサンプルをもとに、マルチデバイス対応サイトを設計・制作する手法やカスタマイズ方法などを解説。最終章では実装をより効率化・チューニングする手法も紹介しています。なお、本書のサンプルデータはダウンロードにて提供します。
目次
- 扉
- クレジット
- はじめに
- 目次
- 本書の使い方
- 本書のダウンロードデータについて
- ■Lesson1 マルチデバイスで変わるWebサイト
- 01 デバイスの多様化が意味するもの
- 02 マルチデバイス対応が求められる背景
- 03 マルチデバイス対応の主流はレスポンシブWebデザイン
- 04 「モバイルファースト」の実例と考え方
- 05 マルチデバイスに対応したサイトならではの課題
- ■Lesson2 変わる「Webデザイン」のあり方
- 01 Webサイトは詰め込み型からプレゼンテーション型へ
- 02 コンテンツファーストで変わるWebサイトの価値
- 03 よりシンプルになるデザイン
- 04 フラットデザインがもたらすもの
- 05 ページ単位の設計からの脱却
- ■Lesson3 Webデザインはより「設計志向」へ
- 01 コンポーネントの考え方を取り入れた設計へのシフト
- 扉
- クレジット
- はじめに
- 目次
- 本書の使い方
- 本書のダウンロードデータについて
- ■Lesson1 マルチデバイスで変わるWebサイト
- 01 デバイスの多様化が意味するもの
- 02 マルチデバイス対応が求められる背景
- 03 マルチデバイス対応の主流はレスポンシブWebデザイン
- 04 「モバイルファースト」の実例と考え方
- 05 マルチデバイスに対応したサイトならではの課題
- ■Lesson2 変わる「Webデザイン」のあり方
- 01 Webサイトは詰め込み型からプレゼンテーション型へ
- 02 コンテンツファーストで変わるWebサイトの価値
- 03 よりシンプルになるデザイン
- 04 フラットデザインがもたらすもの
- 05 ページ単位の設計からの脱却
- ■Lesson3 Webデザインはより「設計志向」へ
- 01 コンポーネントの考え方を取り入れた設計へのシフト
- 02 コンポーネントの考え方で情報設計そのものが変わる
- 03 マルチデバイス対応サイトの4つの設計分類
- 04 コンテンツ設計
- 05 サイトストラクチャ設計
- 06 レイアウト設計
- 07 形態設計（ビジュアル、UI）
- 08 インタラクション設計
- 09 実装ルール設計
- 10 ワークフローの変化
- 11 プロジェクトの進行効率化
- ■Lesson4 CSSフレームワークの基本と考え方
- 01 CSSフレームワークとは
- 02 CSSフレームワークの設計思想
- 03 CSSフレームワークの利点と誤解
- 04 ワークフローにCSSフレームワークを導入する
- ■Lesson5 主要なCSSフレームワークの特長
- 01 主要なCSSフレームワーク（1） Bootstrap
- 02 主要なCSSフレームワーク（2） Foundation
- 03 その他のCSSフレームワーク
- 04 CSSフレームワークの使いどころと選び方
- 05 フレームワークを使った事例
- 06 フレームワークのコンポーネントを試せるツール
- ■Lesson6 CSSフレームワークを使ったサイト設計
- 01 サイト設計はまずコンテンツありき
- 02 CSSフレームワークを中間成果物から取り入れる
- 03 コンポーネントを設計する
- 04 グリッドを設計してレイアウトを行う
- 05 ワイヤーフレームやプロトタイプを作る
- 06 CSSフレームワークでデザインカンプを作成
- ■Lesson7 Bootstrapの構成と基本
- 01 Bootstrapのファイル構成
- 02 マルチクラスを使ったBootstrapのCSS設計
- 03 グリッドシステム
- 04 ブレイクポイント
- 05 画像や動画表示のレスポンシブ対応
- 06 カラースキーム
- 07 Bootstrapの主なコンポーネント
- 08 JavaScriptコンポーネントの実装方法と注意点
- 09 Foundationのコンポーネント
- ■Lesson8 初級：サンプルのモックアップを作る
- 01 Bootstrapをベースにしたモックアップの作成
- 02 オーソドックスなグリッドパターンの実装
- 03 デバイスサイズによってカラム数を変更する
- 04 HTMLの構造に依存しないレイアウトテクニック
- 05 デバイスサイズでコンテンツの表示を切り替える
- 06 ナビゲーションバーの実装
- 07 画面幅いっぱいのバナーエリアを実装
- 08 アイコン付きのボタンと装飾
- 09 カルーセルの実装
- 10 モーダルウィンドウの実装
- 11 ツールチップを表示する
- 12 ラベルやバッジを追加する
- ■Lesson9 実践：Bootstrapをカスタマイズする
- 01 Bootstrapのカスタマイズ方法
- 02 カスタマイズ用のCSS設計のコツ
- 03 Bootstrapのソースファイル
- 04 ソースファイルに定義された変数
- 05 カスタマイズ専用のSCSSを用意する
- 06 ブレイクポイントを変更する
- 07 グリッドとガター、コンテナーサイズを変更する
- 08 縦中央揃えのグリッドを追加する
- 09 ボタンやラベル、リンクの色を変える
- 10 タイポグラフィをカスタマイズする
- 11 背景画像をRetina対応にする
- 12 テーブルをレスポンシブ対応させる
- 13 IE8でもレスポンシブ対応させる
- 14 その他のカスタマイズ
- 15 使うべきコンポーネントだけをコンパイルする
- ■Lesson10 実践：Bootstrapにない機能を追加する
- 01 offcanvasメニューを追加する
- 02 スクロールアップバーを追加する
- 03 全画面の写真・動画の背景
- 04 パララックス（視差効果）の実装
- 05 スクロール効果の実装
- 06 タッチ操作対応のカルーセル
- 07 Pinterest 風のタイルレイアウト
- 08 フォームのUIを強化する
- 09 アイコンフォントを追加する
- 10 ブラウザやコンテンツの出し分け
- 11 Bootstrapのリソース
- ■Lesson11 実践：実装の効率化とチューニング
- 01 HTMLコーディングをより早くするツール
- 02 HTMLをよりセマンティックにする
- 03 Bootstrapのアクセシビリティを向上させる
- 04 サイトパフォーマンスを向上させる重要性と対策
- 05 タスクを「gulp」で自動化する
- 06 CSS・JSリソースを結合・Minifyする
- 07 CSSから未使用のセレクタを削除して最適化する
- 08 画像を最適化・軽量化する
- 09 SVGを活用する
- 10 オリジナルのアイコンフォントを作る
- 11 Bowerでリソースを管理する
- 巻末：Bootstrap3のclass/data属性一覧
- 巻末：用語索引
- 執筆者紹介
- 奥付
- カバー
※このデジタル雑誌には目次に記載されているコンテンツが含まれています。それ以外のコンテンツは、本誌のコンテンツであっても含まれていません のでご注意ください。
※電子版では、紙の雑誌と内容が一部異なる場合や、掲載されないページがある場合があります。
