約3年前に刊行した「スタイルシート スタイルブック」の続編が来週の12/13に刊行されます。
タイトルは「ちゃんとCSSするためのスタイルガイド入門 (スタイルシートスタイルブック (2))」。ちょうど見本が出ました。
オレンジ色がキレイに出て季節的にも暖かくて良かったです。
著者は、前回に引きつづき「C O U L D」の長谷川恭久さんと「cat@log」のcocoさん、に加えて今回は長谷川さんとともに「CSS Nite LP, Disk 1」で講演されるなど最近とみに大活躍中の「2xup」の上ノ郷谷太一さんが、CSSのテンプレート管理やスタイルガイドの実践についてガッツリと執筆されています。
そこに込められたマインドはぜひ上ノ郷谷さんのブログのエントリでお読みいただけます。
- ちゃんとCSSするためのスタイルガイド入門 - 2xup.org
これで今年のクリスマスはバッチリでしょう。
ちゃんとCSSするためのスタイルガイド入門 (スタイルシートスタイルブック (2))
- 作者: 長谷川恭久,上ノ郷谷太一,有坂陽子
- 出版社/メーカー: 翔泳社
- 発売日: 2006/12/13
- メディア: 大型本
- 購入: 1人 クリック: 38回
- この商品を含むブログ (14件) を見る
どうぞご利用ください。
書誌情報
- 書名
- ちゃんとCSSするためのスタイルガイド入門 ―― スタイルシート スタイルブック 2
- 著者
- 有坂陽子 上ノ郷谷太一 長谷川恭久
- 仕様
- B5変形判×200ページ（本文オールカラー）
- 定価
- 2,310円（本体価格 2,200円＋消費税5％）
- 配本日
- 2006年12月13日
- ISBN
- 4-7981-1219-4
2004年2月に刊行された『スタイルシート スタイルブック』の続編。
CSSでデザインすることの意味を理解して、より効率的なWeb制作を目指し、スタイルガイドの導入と、CSSファイルの管理や作成ガイドラインを解説。
目次詳細
- はじめに CSSの考え方をしっかり把握しよう
- 結局CSSデザインってどうなのでしょう？
- Web志向の感覚とは？
- この本を未来へのきっかけに
- 基本編 CSSらしいデザイン手法を考える
- ようこそ、新しい時代へ
- CSSレイアウトの新しいステージ
- CSSは解ではなく道具
- 「サポート」ということの意味を考える
- すべてのデバイスを「サポート」する
- よりリッチな体験をサポートする
- サポートするブラウザを分類する
- CSSでできること／できないこと
- CSSでできないこと
- CSSだからこそできること
- 技術の組み合わせによる新たな表現の道
- スタイルガイドに挑戦
- さまざまな世界で使われる「スタイルガイド」
- Webデザインの「スタイルガイド」
- 自分だけのスタイルガイド／スタイルブック
- CSSの書き方のガイドライン
- 目的に合わせたCSSの構成パターン
- ID名／CLASS名の付け方
- プロパティの記述順番
- コメントを忘れずに
- CSSハックについて
- ハックは必要か？
- ハックする場合
- ミス探しのチェックポイント
- 1. プロパティのあとは「:」、値のあとは「;」がきちんと記述されているか
- 2. ID／CLASS名は書き間違えていないか
- 3. プロパティや値のスペルミスはないか
- 4. 余計なスペースがないか
- 5. 仕様どおりの値を記述しているかどうか
- 6. スタイルの継承でかぶっている部分はないか
- 7. 文字コードのチェック
- 実践編 スタイルシートスタイルガイド
- 柔軟な構造のHTMLテンプレートのメリット
- CSS Zen Gardenから考えるHTMLテンプレート
- どんなレイアウトにも対応できる骨組み
- 複雑な構造のHTMLテンプレート
- HTMLテンプレートの完成形
- さまざまな段組レイアウトを実現するCSSライブラリ
- 1カラムスタイル
- 1カラムスタイルの応用
- 2カラムスタイル
- 2カラムスタイルの応用1
- 2カラムスタイルの応用2
- 3カラムスタイルその1 ―― 両サイドにメニュー
- 3カラムスタイルその2 ―― メニューを片側にまとめる
- 3カラムスタイルその3 ―― メニューの順を逆に
- CSSファイルを分割して管理する
- CSSファイルを分割する理由と方法
- 1. ブラウザごとのスタイルの違いをリセットする（common.css）
- 2. 各HTML要素の振る舞いを指定する（common.css）
- 3. ページのレイアウトのライブラリ（layoutsフォルダ）
- 4. 全体的なフォントの指定を管理する（fonts.css）
- 5. 頻繁に使うスタイルをクラスにまとめたライブラリ（module.css）
- 6. 配色・レイアウトの調整を管理する（theme.css）
- 分割したCSSを合体ロボットのように組み合わせる
- 複数のレイアウトが混在するサイト構築
- CSSファイルの作成ガイドライン
- セットフォーマットルール
- プロパティの順序
- 筆者が使用しているプロパティの順序の詳細
- 簡略化プロパティ
- フォントに関するプロパティの簡略記述
- ルールの共有
- 応用編 さまざまな環境のCSS
- 印刷用スタイルシート
- メディアタイプの指定
- 印刷用CSSを用意しよう
- タイポグラフィ
- フォントファミリーの指定
- line-heightプロパティには単位のない値がおすすめ
- 1行あたりの文字数を制限する
- フォームを使いやすく整える
- ブラウザ依存
- 支払い情報入力フォームのサンプル
- fieldset要素のスタイル
- テキストフィールドの背景画像
- 画像ボタンとインターアクション
- フォームのテンプレート
- デザインされたフォームのソースコード全体
- 携帯電話とCSS
- Compact HTMLからXHTML Basicへ
- 携帯電話用CSSの仕様
- 各キャリアで利用できるセレクタ
- 各キャリアで利用できるプロパティ
- i-mode XHTMLとCSS
- 実際にコンテンツを作成する際のポイント
- 開発環境について
- スタイル編 CSSでの画像レイアウト見本帖（ギャラリー）
- CSSデザインでは画像の使い方も変わった
- 背景
- 背景1 ―― ページ上部からのグラデーション画像
- 背景2 ―― 大きな一枚画像
- 背景3 ―― 大きな背景画像で雰囲気を変える
- 背景4 ―― ペンキ塗り立てのようなレイアウト
- 背景5 ―― トップ画像を背景にとけ込ませて、イレギュラーな効果
- ヘッダー
- ヘッダー1 ―― たとえば赤一色でまとめたデザイン
- ヘッダー2 ―― 半透明のバナーなど
- ヘッダー3 ―― グラフィックで作り込み、構成はシンプルに
- ヘッダー4 ―― 背景にとけ込ませたヘッダー
- コンテナー
- コンテナー1 ―― イレギュラーな配置
- コンテナー2 ―― 見栄えが良くて、シンプルな構成
- コンテナー3 ―― ノートに手描きのロボット
- コンテナー4 ―― ラインを斜めにして、動きを感じさせるデザイン
- フッター
- フッター1 ―― 猫が目を閉じたり舌を出すフッター
- フッター2 ―― 草原の広い青空に飛ぶ飛行機
- フッター3 ―― メニューはページの下部に
- 全体
- 全体1 ―― イスラム・テイストの独特なCSS
- 全体2 ―― テーブルのように分割されたレイアウト
- 全体3 ―― 画面を上下に分割して、絵画のようなページ作り
- 全体4 ―― シックで華やかなデザイン
- 付録
- Appendix A 役立ちCSS関連リンク集
- A.1 リファレンス
- A.2 ギャラリー系のサイト
- A.3 CSS関連のツール
- A.4 CSSエディタ、ユーティリティ
- Appendix B CSSプロパティ簡易リファレンス
- B.1 はじめに
- B.2 ボックスモデル
- B.3 ポジション
- B.4 視覚効果
- B.5 リスト
- B.6 背景
- B.7 フォント
- B.8 テキスト
- B.9 擬似クラス（Pseudo-Class）
- B.10 擬似要素（Pseudo-Element）
- Appendix C ブラウザのDOCTYPEスイッチのまとめ
- Appendix D ブロック要素のセンタリングについてのまとめ