ワンランク上を目指す CSSクリエイティブ・デザイン

デザインからコードへ。効果的な実装のためのクリエイティブガイド / 2007年7月25日発売

河内正紀　著




本書の概要

CSS（スタイルシート）でのWebサイト制作が当然であるという時代になり、Webデザイナーには、デザインとコードのどちらか一方に特化した取り組みだけでなく、双方の学習と理解が求められています。そこで本書では、CSSの基礎学習を終えた方に向けて、デザインからコードへ落とし込む実践的な技術を説明します。Webデザインの手法や最新Webデザインを紹介し、汎用性の高いレイアウトや動的なレイアウト、CSSのモジュール管理などを、サンプルや実例を使って学習します。学習用のサンプルファイルはダウンロードで提供します。

関連ページ

目次

  1. はじめに
  2. 本書について
    1. 本書の構成
    2. CSSレイアウトの対応ブラウザ
  3. 本書サンプルの基本ルール
    1. XHTMLの文書型とヘッダ情報
    2. 各ブラウザのデフォルトスタイルの統一
  4. サンプルファイルについて
    1. サンプルファイルのダウンロード
    2. サンプルファイルのディレクトリ構成
    3. 本書記載のソースコードとサンプルファイルの対応
  5. Chapter.1：最新Webデザイン事情
    1. 1.1 近年のCSSデザインの動向
      1. 一般化した「Web標準」
      2. 多様化するCSSデザイン
        1. 2002-2005年：テクニックのベースとなったサイト
        2. 2005-2006年：デザインバリエーションの増加
        3. 2006-2007年：インターフェースの変化
    2. 1.2 デザインとコード
      1. デザインとコードの関係性
      2. デザイナーとエンジニアに求められるスキル
      3. デザイン・(X)HTML・CSSの関係
      4. ルールの架け橋としてのCSS
      5. 文書構造と親和性の高いデザイン
      6. デザインのルールを反映するコード
  6. Chapter.2：汎用性の高いレイアウトパターン
    1. 2.1 グリッドシステムによる段組のレイアウト
      1. Webサイトにおけるグリッドシステム
        1. 配置の「ルール」を作るグリッドシステム
        2. CSSのボックスとグリッドシステムの関係
        3. [ Design Showcase ] サイト間で統一されたグリッドのルール
        4. [ Design Showcase ] ルールに則った配置とルールを無視した配置とのバランス
      2. サンプルとそのデザイン構成
        1. 段組レイアウトのメリット
        2. グリッドに沿った情報ブロックの配置
        3. ブロック同士の余白の関係
      3. CSSによる段組のレイアウト
        1. XHTMLのマークアップ
        2. [ Step.1 ] 基本的なスタイルの設定
        3. [ Step.2 ] ロゴとメインビジュアルのレイアウト
        4. [ Step.3 ] 3段組のレイアウト
        5. [ Step.4 ] Internet Explorer 6のバグフィックス
        6. [ Step.5 ] 回り込みの解除
      4. カスタマイズ編
        1. 3段組から2段組へ
        2. 固定幅から可変幅へ
        3. 最大幅と最小幅の設定
        4. フォントサイズによる可変幅の設定
    2. 2.2 CSSで作るタイポグラフィの表現
      1. Webサイトにおけるタイポグラフィ
        1. タイポグラフィの役割
        2. CSSで表現できるタイポグラフィ
        3. [ Design Showcase ] タイポグラフィで魅せるレイアウト
        4. [ Design Showcase ] 情報の種類による効果的なフォントの使い分け
      2. サンプルとそのデザイン構成
        1. フォントとそのサイズ
        2. レイアウトを引き締めるカーニング調整
        3. 読ませるための本文レイアウト
      3. CSSによる文字のレイアウト
        1. XHTMLのマークアップ
        2. [ Step.1 ] 基本的なスタイルの設定
        3. [ Step.2 ] ロゴの基本レイアウト
        4. [ Step.3 ] ロゴの文字間調整
        5. [ Step.4 ] ナビゲーション文字のレイアウト
        6. [ Step.5 ] 本文とコピーライト表記のレイアウト
      4. カスタマイズ編
        1. ドロップキャップのレイアウト
        2. 和文のレイアウト
        3. 見出しと段組のレイアウト
    3. 2.3 ナビゲーションのインターフェースデザイン
      1. Webサイトにおけるナビゲーション
        1. ナビゲーションの種類と役割
        2. OSのGUIに学ぶインターフェースのデザイン
        3. [ Design Showcase ] エリアの定義を明確にしたナビゲーションの配置
        4. [ Design Showcase ] サイトのテイストに揃えたナビゲーションのデザイン
      2. サンプルとそのデザイン構成
        1. ナビゲーションの役割に則した配置
        2. 下階層へのリードコンテンツの配置
        3. 操作性を高めるインターフェースのデザイン
      3. CSSによるナビゲーションのレイアウト
        1. XHTMLのマークアップ
        2. [ Step.1 ] 基本的なスタイルの設定
        3. [ Step.2 ] 骨格となるエリアの配置
        4. [ Step.3 ] ロゴとユーティリティナビゲーション
        5. [ Step.4 ] グローバルナビゲーション
        6. [ Step.5 ] パンくずリスト
        7. [ Step.6 ] 下階層へのリードコンテンツ
        8. [ Step.7 ] ローカルナビゲーション
        9. [ Step.8 ] フッターナビゲーション
      4. カスタマイズ編
        1. 現在位置を示すデザイン
        2. タブ型のナビゲーション
    4. [ Topics ] ブラウザのデフォルトスタイルの統一とその注意点
      1. デフォルトスタイルを統一する目的
      2. デフォルトスタイルを統一する際の注意点
  7. Chapter.3：JavaScriptを組み合わせた動的なレイアウト
    1. 3.1 コンテンツの表示切り替え
      1. XHTML・CSS・JavaScriptの位置付け
        1. まずは適切な文書構造
        2. 考慮すべき環境のパターン
        3. それぞれの技術の役割分担
      2. サンプルとそのデザイン構成
        1. 環境によるレイアウトのパターン
        2. 動作フローの設計
      3. JavaScriptによるコンテンツの表示切り替え
        1. XHTMLのマークアップ
        2. [ Step.1 ] 基本的なスタイルの設定
        3. [ Step.2 ] 本文のレイアウト
        4. [ Step.3 ] ページ読み込み時の要素の表示/非表示設定
        5. [ Step.4 ] ナビゲーションの要素生成
        6. [ Step.5 ] コンテンツ切り替え機能の作成
        7. [ Step.6 ] タブナビゲーションのレイアウト
    2. 3.2 Lightboxのレイアウトカスタマイズ
      1. Lightboxの概要
        1. Lightboxとは
        2. Lightboxの設置
        3. ポップアップの仕組み
      2. サンプルとそのデザイン構成
        1. 写真の美しさを引き立たせるデザイン
        2. デフォルトのデザインからの変更点
      3. Lightboxのカスタマイズ
        1. XHTMLのマークアップ
        2. [ Step.1 ] 基本的なレイアウト
        3. [ Step.2 ] オーバーレイの透明度の変更
        4. [ Step.3 ] 写真の枠の除去
        5. [ Step.4 ] 写真の配置位置の変更
        6. [ Step.5 ] キャプションとCloseボタンのレイアウト変更
        7. [ Step.6 ] PrevボタンとNextボタンのレイアウト変更
    3. [ Topics ] HTML5とその将来
      1. HTML5とは
      2. W3Cの動き
  8. Chapter.4：実例から学ぶレイアウトプロセス
    1. 4.1 デザインからコードへ落とし込む技術
      1. スムーズな橋渡しのために
        1. デザインルールの言語化
        2. 最適な方法を選び出す力
      2. サンプルサイトとその概要
      3. レイアウトプロセス
        1. 見出しレベルの決定
        2. 要素のマークアップとグループ化
        3. ボックス配置の計画
        4. 段組レイアウトの手法
        5. ヘッダーイメージのスライス構成
        6. テキストのレイアウト
        7. リストのレイアウト
    2. 4.2 効率的なサイト制作を助けるCSSのモジュール管理
      1. サイトの性質に合わせたCSSの制作フロー
        1. ページ毎にCSSを記述していく制作フロー
        2. サイト全体を見据えた制作フロー
      2. サンプルサイトとその概要
      3. レイアウトプロセス
        1. 情報の種類とデザインパターンの確認
        2. エリアを定義するXHTMLのマークアップ
        3. 汎用的なブロックのマークアップ
        4. 節と見出しのマークアップ
        5. CSSのモジュール化
        6. モジュール別のレイアウト
          1. [ Pick Up ] レイアウトの骨格の作成
          2. [ Pick Up ] ヘッダーとフッターのレイアウト
          3. [ Pick Up ] 節と見出しのレイアウト
          4. [ Pick Up ] 汎用的なモジュールのレイアウト
          5. [ Pick Up ] エリア別のレイアウト調整
        7. 各種ブラウザでの検証
          1. [ Hack.1 ] アンダースコアハック
          2. [ Hack.2 ] バックスラッシュハック
        8. 各ページの組み立て
    3. [ Topics ] 仕様策定の段階から定義する汎用的なブロックの構成
      1. ブロック単位で行うデザインとコードの策定
      2. 得られるメリット
  9. Appendix：
    1. A.1 DOCTYPE宣言とブラウザのレンダリングモード
    2. A.2 セレクタ一覧と対応ブラウザ
    3. A.3 カスケード処理
      1. カスケード処理の初段階
      2. 出所による優先順位
      3. 詳細度による優先順位
      4. 位置による優先順位
    4. A.4 CSSハック
      1. 古いブラウザへの対処方法
      2. 一部のスタイルの修正に用いるハック
      3. 条件付コメント
  10. 索引