実践 Web Standards Design - Web 標準の基本と CSS レイアウト &Tips が発売となります

hxxk.jp ( のごく一部 ) が書籍化されます !

ブログ 書籍化で Google 検索すると何十万件もヒットするという昨今、時流に乗ってか乗らずか、お誘いを受けて書籍を出すこととなりました !

......とは言え取り扱う話題がまとまっておらず、また純粋な文章としての完成度も低い hxxk.jp の記事を丸々書籍にパッケージングしたものではありません。 というか単著ではありませんし、あくまで hxxk.jp での記事の実績を元に、あるコンセプトの内容の書籍の一部を担当させていただき、ほとんどの内容は新たに書き下ろしたものになっています。 今回より数回に分けて書籍の紹介や宣伝、それに関連して出版にまつわる話などを書いていきたいと思います。 なお、今回は書籍の紹介・宣伝を中心に。

1. どんな書籍なの ?
2. どんな内容なの ?
3. 著者自らもプロモーションするよ

どんな書籍なの ?

さて、まずは書籍自体の情報から。 今日 (21 日 ) は定時上がりで出かける用事があるのですが、一時帰宅したら見本誌が届いていました ! とりあえず ISBN を追記しておきます。

書名

実践 Web Standards Design - Web 標準の基本と CSS レイアウト &Tips

ISBN

978-4-86167-164-7

出版元

株式会社 九天社

著者

• 市瀬裕哉 (a.k.a. "wu" / 3ping.org)
• 福島英児 (a.k.a. "e-luck" / Lucky bag::blog)
• 望月真琴 (hxxk.jp)

サイズ・ページ数

B5 判、 436 ページ

定価

3,200 円 正確には 3,200 円 + 税でした。 2007 年 2 月現在の消費税率では 3,360 円ということになります。

発売日

2007 年 2 月 23 日頃 ( 地域によって書店店頭に並ぶ日は異なります。 22 日に編集部に到着し、取次への搬入を行うようですので、早いところでは 23 日頃に陳列されるのではと見ています。 )

書名や著者名 ( およびそれぞれのサイト ) をご覧になれば分かる通り、 CSS について定評のある市瀬裕哉・福島英児が持つ実践的な CSS レイアウトや実用 CSS Tips を惜しみなく出し、私が XHTML および CSS の仕様面の解説をサポートすることで、 Web 標準に準拠しつつ、 CSS による実践的かつ魅力的なレイアウトおよびデザインを実現できるように作られた本です。

どんな内容なの ?

出版元である株式会社 九天社との協議の上、許可をいただいたので各章の名前や見出しをここに公開しておきます。

1. close1 章 Web Standards の基本
   1. closeWeb Standards とは
      1. (X)HTML+CSS を用いて Web リソースを作成する
      2. closeWeb Standardsに従うメリット
         1. さまざまな UA へ同一のリソースで情報発信できる
         2. 共通ルールに従うことで再利用性が向上する
      3. close使用する (X)HTML や CSS のバージョン
         1. (X)HTML のバージョン
         2. CSS のバージョン
2. close2 章 (X)HTML の基本
   1. closeHTML と XHTML に共通して覚えておくべきこと
      1. closeid 属性と class 属性の違い
         1. id 属性の大文字・小文字の区別
         2. 数字から始まる class 属性値
      2. 見出しレベルの重要性
   2. closeHTML と XHTML における違い
      1. SGML ベースか XML ベースか
      2. close要素の書き方
         1. 大文字・小文字の区別
         2. 開始タグ・終了タグ、空要素
      3. id 属性と name 属性
      4. closeMedia Types について
         1. meta http-equiv による Media Types の指定
      5. HTML 互換性ガイドライン
   3. close(X)HTMLはまず文章ありき
      1. まずはマークアップのことを考えずに文章を書く
      2. その文章のタイトルは何か
      3. その文章の中で見出しにすべき部分は何か
      4. 見出しだけを抜き出して正しい目次になるか
      5. closeブロックレベル要素でマークアップする
         1. ブロックレベル要素とは
      6. インラインレベル要素でマークアップする
      7. body 要素の後に head 要素、 html 要素をマークアップする
      8. DOCTYPE は最終的に宣言する
      9. close必要に応じて XML 宣言をする
         1. XML 宣言の記述
         2. XML 宣言の省略
         3. XML 宣言における IE 7 のバグ
      10. マークアップ順序のまとめ
      11. closediv 要素による構造化
          1. XHTML 2.0による構造化
          2. XHTML 1.0による構造化
          3. 複数の h1 レベルの出現も許容
      12. closeid 属性はどの要素に対して指定するべきか
          1. id 属性が指し示す範囲
      13. closehead 要素内の記述について
          1. head 要素内の内容を可視化すること
3. close3 章 CSS の基本
   1. closeこれだけは守らなければならない書式
      1. closeCSS の大まかな構文
         1. @charset 規則
         2. @import 規則
      2. declaration block （宣言ブロック）
   2. close心がけるとメンテナンスしやすい書式
      1. close宣言の記述順の規則を定めておく
         1. 例1： CSS2 Specification に挙げられている順番で記述
         2. 例2：分類ごとに記述
      2. closeCSSの視認性を高める
         1. 規則集合の記述
         2. 規則集合におけるセレクタの記述
         3. 宣言の出現順序
         4. 宣言におけるプロパティの記述
         5. 宣言における値の記述
         6. コメントの記述
         7. @ 規則における注意点
         8. 特定のブラウザの仕様に対する配慮
      3. XHTML の Module ごとに要素セレクタを配置
      4. CSS の先頭にガイドラインをメモしておく
   3. closeCSS 管理のコツ
      1. 各種の値の形式をしっかり理解する
      2. closeセレクタ、カスケード、継承の理屈をしっかり理解する
         1. セレクタ
         2. 継承
         3. カスケード
      3. 固定スタイルシート・優先スタイルシート・代替スタイルシート
      4. xml-stylesheet 処理命令
      5. @import 規則を用いた複数の CSS の連携
      6. link 要素、 style 要素の media 属性と @media 規則
      7. ブラウザごとのデフォルトスタイルをリセット
      8. ベースとなるスタイルを指定する
   4. close視覚整形フォーマット
      1. closeボックスモデル
         1. ボックスモデル
         2. 包含ブロック
         3. 通常フロー
4. close4 章 float プロパティを利用したレイアウト
   1. close寄せと流し込み
      1. 画像を寄せる
      2. 表を寄せる
      3. 見出しを寄せる
      4. フロートと周囲のボックスの関係
      5. 流し込みの解除
   2. close重なったブロックボックスにマージン
      1. 見出しと本文の列を分割したレイアウト
      2. ナビゲーションと本文の列を分割したレイアウト
   3. close複数フロートの横並び
      1. 画像を敷き詰めて表示する
      2. 横並びのタブ型ナビゲーション
      3. カラムレイアウトへの応用
   4. closeネガティブマージンを利用したレイアウト
      1. close
         1. 子供セレクタに対応しないブラウザ
      2. フロートするボックスの重なり順序
   5. closefloat プロパティを利用したレイアウトの使い分け
      1. 「重なったブロックボックスにマージン」のレイアウト方法
      2. 「複数フロートの横並び」のレイアウト方法
   6. closeフロートしたボックスを含む親ボックスの高さの算出
      1. close親ボックスの高さを算出させる方法
         1. 後続の要素で float を clear する
         2. clear を指定できる要素がない場合
         3. 幅を明示的に指定できない場合
5. close5 章 position プロパティを利用したレイアウト
   1. close指定できる 4 つの配置方法
      1. static－通常配置
      2. relative－相対配置
      3. absolute－絶対配置
      4. fixed－固定配置
   2. close絶対配置を利用したレイアウト
      1. カラムレイアウトへの利用
      2. 絶対配置の基点を変える
      3. 複数の基点を利用したレイアウト
   3. close固定配置を利用したレイアウト
      1. ナビゲーションを常に上部に表示する
      2. フレームのように表示するカラムレイアウトへの利用
      3. 固定配置に対応していないブラウザの対処
6. close6 章 実践レイアウト
   1. closeレイアウトパターン
      1. 1 カラムフロート流し込み
      2. 2 カラムフロート＋重なったボックスにマージン
      3. 2 カラム複数フロート＋重なったボックスにマージン
      4. 3 カラム左右メニュー複数フロート＋重なったボックスにマージン
      5. 3 カラム右メニュー 2 カラム複数フロート＋重なったボックスにマージン
      6. 2 カラム複数フロート
      7. 3 カラム複数フロート
      8. 2 カラム複数フロート＋クリア
      9. 2 カラム複数フロート＋ネガティブマージン
      10. 2 カラム絶対配置＋重なったボックスにマージン
      11. 3 カラム絶対配置＋重なったボックスにマージン
      12. 3 カラム右メニュー 2 カラム絶対配置＋重なったボックスにマージン
   2. close複合レイアウトで情報を整理したブログページの制作
      1. closeXHTML 文書の制作
         1. 基本要素のマークアップ
         2. DOCTYPE の宣言と div 要素による構造の補強
      2. CSS ファイルのモジュール化
      3. ベースとなるスタイルの制作
      4. close主要なレイアウトの構築
         1. div#content 内のレイアウト
         2. div#main 内のレイアウト
      5. close細部のスタイルの指定
         1. div#header 内のスタイル
         2. div.entry 内のスタイル
         3. div#headline 内のスタイル
         4. dl#subNavi 内のスタイル
      6. フッターのスタイル
   3. closeボックスを自由に配置したページデザイン
      1. XHTML 文書の制作
      2. ベースとなるスタイルの制作
      3. close主要なレイアウトの構築
         1. 絶対配置させるボックスの領域を作る
         2. h1 要素を通常フローから外して重ね合わせる
         3. インフォメーションの配置
         4. コンテンツメニューの配置
         5. その他のコンテンツメニューの配置
      4. ボタンメニューのスタイル
      5. フッター領域のスタイリング
7. close7 章 XHTML&CSS Tips
   1. トピックパスのマークアップ
   2. outline プロパティによるドロップシャドウ
   3. Mac OS X の Dock 風ナビゲーション
   4. CSS による自動番号付け（カウンタ生成）
   5. CSS でフォトギャラリー
   6. アイコンリモート表示メニュー
   7. CSS を使って画像をポップアップ表示
   8. CSS だけで動作するドロップダウンメニュー
   9. 背景画像を利用したロールオーバー効果
   10. visibility プロパティを利用して img 要素をロールオーバー
   11. さまざまなブラウザでフォントの見栄えを揃える CSS ライブラリ
   12. IE 6以下での子供セレクタの使用
   13. 印刷用 CSS の作成
   14. line-height プロパティの指定値
   15. 定義リストの dt と dd を横並びさせる
   16. 背景画像を利用して訪問済みリンクを一工夫する
   17. img 要素のサイズを CSS で指定
   18. position プロパティを利用して要素を画面中央に固定
   19. position プロパティでフッタを常に画面の下部に固定
   20. 行ボックスの高さで垂直センター配置
   21. 背景画像を利用した画像置換
   22. リンク先のファイルタイプを CSS で明示する
   23. CSS でフォームをスタイリング
   24. モダンブラウザ向けの CSS ハック
8. closeAppendix
   1. DTD の読み方ガイド
   2. DOCTYPE スイッチの一覧表
   3. CSS 2.1 の各プロパティリファレンス

また、各部にコラムを配置し、本文のフォローアップを行っています。

• HTML 5 (Web Applications 1.0)
• Acid2 Browser Test
• 見出しレベルのスキップ
• XML という略語の表記にまつわるこぼれ話
• Internet Explorerの問題
• title 要素にサイト名や会社名を入れる場合は前？後？
• h1 要素にサイト名や会社名を入れる場合は全ページ共通？
• body 要素の直下にインラインレベル要素は配置できないのか？
• なぜ暫定的に Strict DTD を宣言するのか？
• 後方互換モードで解釈されるとどうなる？
• div class="section" で構造化する場合の副次的メリット
• meta http-equiv によるコンテンツ内容の指定
• 内部スタイルシートと外部スタイルシート
• プロパティや値を記述する際に空白文字を含めてもよいのか
• @ 規則以外でもインデントを行う
• Internet Explorer と inherit 値
• 擬似要素と擬似クラスの記述上の区別
• 固有性における CSS2 と CSS 2.1 の違い
• IE の !important のバグ
• 代替スタイルシートにおける Opera 7.x のバグ
• xml-stylesheet 処理命令を挿入する位置
• IE のボックスモデルの解釈
• フロートする包含ブロック
• CSS Validator を通すには
• JavaScript で擬似的に固定配置を表現する
• 見出しとデザイン
• IE 6 互換モードでのボックスのセンタリング
• IE 6 でフロートするボックスの左右のマージンが増加するバグ
• フロートの入れ子による複雑なレイアウト
• Windows 版の IE 6 で li 要素の上下に隙間が生じるバグ
• カウンタによる番号生成は構造とは別もの
• カウンタを1、3、5...としたい場合
• スタックレベルのルート
• position プロパティの値
• 背景画像を１つにまとめる理由
• visibility プロパティによる不可視化
• 印刷用 CSS での背景画像の指定
• 単位なしの指定はエラーか？
• 非置換要素を float させる場合
• outline プロパティ対応ブラウザに注意
• 生成・置換内容モジュールに対応する CSS3 の生成・置換内容モジュール
• ワーキングドラフトである CSS3
• legend 要素に対する各ブラウザの対応
• label 要素
• コンディショナルコメント
• XHTML 1.1 の DTD について

これらの内容について、各パートの執筆担当者から出せる部分は随時紹介があると思いますので、お見逃しなく。 なお、 6-3. で「ボックスを自由に配置したページデザイン」という項がありますが、これは Mushline にて 2003 年 11 月頃から 2007 年 1 月まで採用されていたデザインを徹底解析しています。 当時はあのデザインが XHTML とフル CSS で実現されていることに、私を含め多くの Web 制作者が驚嘆したものです。

著者自らもプロモーションするよ

これは最近話題の (?) 協力出版や共同出版ではなく商業出版であるので、書籍の宣伝や広報は出版社側がしっかりと行ってくれ、出版社付属の書店ではない一般書店の店頭にも陳列されます。

しかし、だからと言って著者側は原稿だけ書いておしまい、というのでは、それぞれ一定の読者数を抱えるサイトを持つ著者陣として勿体無いことこの上ありません。 ここ hxxk.jp はもちろん、市瀬裕哉の 3ping.org および福島英児の Lucky bag::blog でも随時取り上げていくつもりですので、この 3 サイトの動向にぜひ注目をお願いします。

まだ詳細は考えていませんが、 hxxk.jp では内容を保留としていた 2,000,000PV 記念プレゼント企画に便乗させて読者プレゼントや、また懇意にさせていただいている某サイトでの視聴者プレゼントなどを考えています。

では今後続々と投下されるであろう続報を乞うご期待 !