hxxk.jp - 2007-02-20 アーカイブ

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

記事データ

投稿者

望月真琴

投稿日時

2007-02-20T23:01+09:00

タグ

概要

拙著「実践 Web Standards Design - Web 標準の基本と CSS レイアウト &Tips 」の発売に関する情報のページです。

リプライ

14 件のリプライがあります。

記事本文

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

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

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

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

どんな書籍なの ?

さて、まずは書籍自体の情報から。今日 (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 章 Web Standards の基本
1. Web Standards とは
  1. (X)HTML+CSS を用いて Web リソースを作成する
  2. Web Standardsに従うメリット
    1. さまざまな UA へ同一のリソースで情報発信できる
    2. 共通ルールに従うことで再利用性が向上する
  3. 使用する (X)HTML や CSS のバージョン
    1. (X)HTML のバージョン
    2. CSS のバージョン
2 章 (X)HTML の基本
1. HTML と XHTML に共通して覚えておくべきこと
  1. id 属性と class 属性の違い
    1. id 属性の大文字・小文字の区別
    2. 数字から始まる class 属性値
  2. 見出しレベルの重要性
2. HTML と XHTML における違い
  1. SGML ベースか XML ベースか
  2. 要素の書き方
    1. 大文字・小文字の区別
    2. 開始タグ・終了タグ、空要素
  3. id 属性と name 属性
  4. Media Types について
    1. meta http-equiv による Media Types の指定
  5. HTML 互換性ガイドライン
3. (X)HTMLはまず文章ありき
  1. まずはマークアップのことを考えずに文章を書く
  2. その文章のタイトルは何か
  3. その文章の中で見出しにすべき部分は何か
  4. 見出しだけを抜き出して正しい目次になるか
  5. ブロックレベル要素でマークアップする
    1. ブロックレベル要素とは
  6. インラインレベル要素でマークアップする
  7. body 要素の後に head 要素、 html 要素をマークアップする
  8. DOCTYPE は最終的に宣言する
  9. 必要に応じて XML 宣言をする
    1. XML 宣言の記述
    2. XML 宣言の省略
    3. XML 宣言における IE 7 のバグ
  10. マークアップ順序のまとめ
  11. div 要素による構造化
    1. XHTML 2.0による構造化
    2. XHTML 1.0による構造化
    3. 複数の h1 レベルの出現も許容
  12. id 属性はどの要素に対して指定するべきか
    1. id 属性が指し示す範囲
  13. head 要素内の記述について
    1. head 要素内の内容を可視化すること
3 章 CSS の基本
1. これだけは守らなければならない書式
  1. CSS の大まかな構文
    1. @charset 規則
    2. @import 規則
  2. declaration block （宣言ブロック）
2. 心がけるとメンテナンスしやすい書式
  1. 宣言の記述順の規則を定めておく
    1. 例1： CSS2 Specification に挙げられている順番で記述
    2. 例2：分類ごとに記述
  2. CSSの視認性を高める
    1. 規則集合の記述
    2. 規則集合におけるセレクタの記述
    3. 宣言の出現順序
    4. 宣言におけるプロパティの記述
    5. 宣言における値の記述
    6. コメントの記述
    7. @ 規則における注意点
    8. 特定のブラウザの仕様に対する配慮
  3. XHTML の Module ごとに要素セレクタを配置
  4. CSS の先頭にガイドラインをメモしておく
3. CSS 管理のコツ
  1. 各種の値の形式をしっかり理解する
  2. セレクタ、カスケード、継承の理屈をしっかり理解する
    1. セレクタ
    2. 継承
    3. カスケード
  3. 固定スタイルシート・優先スタイルシート・代替スタイルシート
  4. xml-stylesheet 処理命令
  5. @import 規則を用いた複数の CSS の連携
  6. link 要素、 style 要素の media 属性と @media 規則
  7. ブラウザごとのデフォルトスタイルをリセット
  8. ベースとなるスタイルを指定する
4. 視覚整形フォーマット
  1. ボックスモデル
    1. ボックスモデル
    2. 包含ブロック
    3. 通常フロー
4 章 float プロパティを利用したレイアウト
1. 寄せと流し込み
  1. 画像を寄せる
  2. 表を寄せる
  3. 見出しを寄せる
  4. フロートと周囲のボックスの関係
  5. 流し込みの解除
2. 重なったブロックボックスにマージン
  1. 見出しと本文の列を分割したレイアウト
  2. ナビゲーションと本文の列を分割したレイアウト
3. 複数フロートの横並び
  1. 画像を敷き詰めて表示する
  2. 横並びのタブ型ナビゲーション
  3. カラムレイアウトへの応用
4. ネガティブマージンを利用したレイアウト
  1. 1. 子供セレクタに対応しないブラウザ
  2. フロートするボックスの重なり順序
5. float プロパティを利用したレイアウトの使い分け
  1. 「重なったブロックボックスにマージン」のレイアウト方法
  2. 「複数フロートの横並び」のレイアウト方法
6. フロートしたボックスを含む親ボックスの高さの算出
  1. 親ボックスの高さを算出させる方法
    1. 後続の要素で float を clear する
    2. clear を指定できる要素がない場合
    3. 幅を明示的に指定できない場合
5 章 position プロパティを利用したレイアウト
1. 指定できる 4 つの配置方法
  1. static－通常配置
  2. relative－相対配置
  3. absolute－絶対配置
  4. fixed－固定配置
2. 絶対配置を利用したレイアウト
  1. カラムレイアウトへの利用
  2. 絶対配置の基点を変える
  3. 複数の基点を利用したレイアウト
3. 固定配置を利用したレイアウト
  1. ナビゲーションを常に上部に表示する
  2. フレームのように表示するカラムレイアウトへの利用
  3. 固定配置に対応していないブラウザの対処
6 章実践レイアウト
1. レイアウトパターン
  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. 複合レイアウトで情報を整理したブログページの制作
  1. XHTML 文書の制作
    1. 基本要素のマークアップ
    2. DOCTYPE の宣言と div 要素による構造の補強
  2. CSS ファイルのモジュール化
  3. ベースとなるスタイルの制作
  4. 主要なレイアウトの構築
    1. div#content 内のレイアウト
    2. div#main 内のレイアウト
  5. 細部のスタイルの指定
    1. div#header 内のスタイル
    2. div.entry 内のスタイル
    3. div#headline 内のスタイル
    4. dl#subNavi 内のスタイル
  6. フッターのスタイル
3. ボックスを自由に配置したページデザイン
  1. XHTML 文書の制作
  2. ベースとなるスタイルの制作
  3. 主要なレイアウトの構築
    1. 絶対配置させるボックスの領域を作る
    2. h1 要素を通常フローから外して重ね合わせる
    3. インフォメーションの配置
    4. コンテンツメニューの配置
    5. その他のコンテンツメニューの配置
  4. ボタンメニューのスタイル
  5. フッター領域のスタイリング
7 章 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 ハック
Appendix
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 記念プレゼント企画に便乗させて読者プレゼントや、また懇意にさせていただいている某サイトでの視聴者プレゼントなどを考えています。

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

リプライ

14 件のリプライが送られています。この記事に対するご意見やご質問、ご感想などありましたら個別記事ページの送信フォームからお送り下さい。

2007-02-21T00:09+09:00 - HashiM: こんばんは．いつもアンテナ経由で拝見させて貰っています．まだAmazonとかでは出ていないけど，必ず買います．

2007-02-21T00:18+09:00 - ゆう: ご出版、おめでとうございます！錚々たる執筆陣に、濃厚な内容を期待させるような見出しのオンパレードで、拝読するのがとっても待ち遠しいです！（もちろん、発売日に書店直行見込。）（書き込みは初めてですけど）真琴さんのエントリーは、個人的に好みの内容やスタンスのものが多くて、特に「3. (X)HTMLはまず文章ありき」なんかは、一章あますところなく、まるごと楽しみにしてます！本当におめでとうございました。

2007-02-21T00:42+09:00 - 望月真琴: >HashiM さんすみません、テンプレートをお使いいただいているのにバージョンアップやメンテナンスを全然していなかったのもこのせいです＞＜ Amazon は明日か明後日には登録されるのではないかと思います。

2007-02-21T00:47+09:00 - 望月真琴: > ゆうさんいやあゆうさんとこもよくブックマークしてほほむほむと読み返させていただいています。書店で買うなら、 23 日よりも24 日の方がいいのかなあ。搬入次第での陳列ですので、はっきりと何日とは言えないのです。あと、即読みしたい方にはお勧めできませんが、読者プレゼントも企画していますのでよければどうぞ :-)

2007-02-21T01:28+09:00 - ゆう: > いやあゆうさんとこもよくブックマークしてほほむほむと読み返させていただいています。恐縮です。とんだお目汚しばかりで、お恥ずかしい限りです。(^v^;;) > 即読みしたい方にはお勧めできませんが、読者プレゼントも企画していますのでよければどうぞ :-) ありがとうございます。でも、折角なので、即読みついでに僕は売上に貢献する方向で。amazon のキャッシュバックキャンペーンの方に流れるかも知れませんけど..。(笑)

2007-02-21T13:02+09:00 - uki-ring: ついにだね。おめでとう！是非買いますよ。

2007-02-21T18:09+09:00 - 望月真琴: > ゆうさんそうですねえ、プレゼント用を 2 冊確保して、発表から 24 時間後〆切りのパターンと、 1 週間後〆切りのパターンを作ればよかったのかも……

2007-02-21T18:11+09:00 - 望月真琴: > うきりんこそうそう、あの飲み会の時からもう半年近く経つんだねえ。やっと完成したよ !

2007-02-21T19:42+09:00 - しまけん: 出版おめでとうございます！「各章の名前や見出し」を拝見して「是非読みたい！」と思いました、「即読み」したいですコレは。

2007-02-22T00:38+09:00 - HashiM: ＞真琴さん一応テンプレート使わせて貰っていますけど，元来2カラム仕様にはなっていないのと，自分でかなりカスタマイズ(改悪？)してしまっているので，その辺はお気になさらず…

2007-02-22T18:40+09:00 - 望月真琴: > しまけんさんありがとうございます ! 執筆陣の中には身長 145cm 程度の明朗快活な女子が含まれていませんが構いませんか ?

2007-02-22T18:44+09:00 - 望月真琴: >HashiM さんあ、そうか。本の中にカラムレイアウトを徹底的に解説している部分があるので、そこを参考に HashiM さんがイカステンプレートを作ってくれればいいんだ ! ( 何 )

2007-03-08T19:24+09:00 - 書籍「実践 Web Standards Design」のすすめ < Project MultiBurst: 最近、このブログも大幅にデザイン変更をしようかと思っている。というのも、3カラムでやっていて、どんどん融通が利かなくなって来ており、さらにどんどん継ぎ足...

2007-03-09T15:43+09:00 - 「実践Web Standards Design」感想 < SEOについての覚書: 市瀬裕哉さん (3ping.org)、福島英児さん (Lucky bag::bl...

[PR] 実践 Web Standards Design - Web 標準の基本と CSS レイアウト &Tips まとめページ

記事データ

投稿者

望月真琴

投稿日時

2007-02-20T23:00+09:00

タグ

概要

拙著「実践 Web Standards Design - Web 標準の基本と CSS レイアウト &Tips 」に関する記事のまとめページです。

リプライ

3 件のリプライがあります。

記事本文

このページは何 ?

シリーズもの記事として連載予定の、拙著実践 Web Standards Design - Web 標準の基本と CSS レイアウト &Tips に関する記事のインデックスページです。 hxxk.jp で記事を追加掲載するたびに、また hxxk.jp 外でも見つけ次第随時更新していきますので、書籍に関する情報をお探しの方はこのページをブックマークすると良いでしょう。

更新履歴

2007-02-20T23:00:00+09:00

この記事を公開しました。

2007-02-21T00:00:00+09:00

プレゼントキャンペーン「実践 Web Standards Design 欲しい ! 」を追加しました。

2007-02-21T18:02:35+09:00

実践 Web Standards Design - Web 標準の基本と CSS レイアウト &Tips が発売されますに ISBN を追記しました。 978-4-86167-164-7 です。

2007-02-22T19:08:05+09:00

プレゼントキャンペーン「実践 Web Standards Design 欲しい ! 」に、応募受付済みの方の記録を付けることにしました。
この記事に、「オンライン購入」の項を追加しました。

2007-02-23T21:46:39+09:00

「オンライン購入」の項に、 Amazon.co.jp で購入を追加しました。
書籍紹介関連記事を多数追加しました。

2007-02-24T15:40:11+09:00

書籍紹介関連記事を追加しました。

2007-02-25T18:51:23+09:00

実践 Web Standards Design 購入者特典キャンペーンを追加しました。

2007-03-18T20:28:41+09:00

「オンライン購入」の項と書籍紹介関連記事を多数追加しました。

2007-03-21T06:52:53+09:00

出版社が公開しているサンプルファイルの差し替えファイルを用意しました。「関係者による書籍紹介関連」の項をご覧ください。

謝辞

この場を借りて、出版に関して有形無形のご協力をいただいた皆様にお礼申し上げます。

出版実務に際して

編集・調整担当の大内さんをはじめ、株式会社九天社の皆様には大変お世話になりました。宣伝がんばります。
3ping.org の市瀬さん、書籍執筆のお話を持ちかけていただきありがとうございました。おかげで貴重な体験をすることができました。今年は何回飲みに行きましょう ?
Lucky bag::blog の福島さん、共著者として多くの助言やご指摘をいただき、スムーズに執筆を進めることができました。またそのうち焼酎を買いに行ったらお送りします。
Mushline のアサノさん、突然この企画に引き込んだにも関わらず、前デザインの使用許可等をいただきありがとうございます。すまねの時はお世話になりました。

記事執筆および校正に際して

行動記録のいわいさん、内容のチェックをお願いしたところ快諾いただき、ありがとうございました。次の上京時に一杯 ( ≠たくさん ) ご馳走します。
朝顔日記 | Another 朝顔日記ののりさん、同じく内容チェックありがとうございました。いつかは富山にも足を運びたいですね :-p
hail2u.net の kyo さん、貴 weblog の記事掲載の許可をいただきありがとうございました。
2xup.org の上ノ郷谷さん、貴 weblog の記事掲載の許可をいただきありがとうございました。美味しいお店に期待しています。
Code-404 | Code-404::Vox のシンヤさん、記事執筆のヒントを勝手にいただきました。また楽しくうひゃひゃと飲みましょう。
Liner Note の leva さん、記事執筆のヒントをいただきました。思えばサイト作成直後にトラックバックをいただくなど、長期間に渡りお世話になりっぱなしですね。
Black Box の哀さん、記事執筆のヒントをいただくばかりか、書籍の企画前から常々会話を交わしていた内容が生きてここに至っています。今後の活躍に期待しています。
drry+@-> の drry さん、記事執筆のヒントをいただきました。献本したいんですが巧みに話を逸らすのはおやめ下さいとここで晒して追い込む作戦。

これら、具体的に書籍記事についてお世話になった方の他にも、数え切れないほどの方のご協力をいただいています。常々 hxxk.jp という備忘録を通じて勉強させていただいていることがこの本に生かされています。本当にありがとうございます。

リプライ

3 件のリプライが送られています。この記事に対するご意見やご質問、ご感想などありましたら個別記事ページの送信フォームからお送り下さい。

2007-02-21T11:35+09:00 - [web-design][book]実践 Web Standards Design < sou: XHTML+CSSでしっかりと書かれている(と思われる本) ちょっと気になるのでまずは立ち読みでもしてみようかな。著者サイト http://3ping...

2007-02-24T03:16+09:00 - [日記]実践 Web Standards Design < Another 朝顔日記: 望月さん(誰)に、望月さんの分の原稿を先読みさせてもらったら、なんと献本していただきました！ということで、昨日届きました。ありがとうございます。完成品...

2007-03-21T15:45+09:00 - 「実践 Web Standards Design」再読中。 < lush life*: [楽天] [Amazon] [bk1]一読して理解できるほど頭の出来が良くないもんで現在再読あんど精読中。で、ちょっと気になった点があったのであげておき...