- 2007年2月20日 23:00
- XHTML CSS
(Amazonから買えるようになったもようです)
九天社より出版される「実践 Web Standards Design - Web 標準の基本と CSS レイアウト &Tips」の執筆をさせていただき、まもなく発売となるので宣伝させてください。
本書籍はhxxk.jpの真琴さん、lucky bag blogのe-luckさんとの共著で、それぞれが連携しながら得意なパートを担当して書き上げました。大まかな構成は次のようになっています。(詳細なアウトラインは記事下部にあります)
- XHTML, CSSの基礎知識と管理方法
- レイアウト編
- Tips&Tecnique
ずっと作りたかった構成ができた!
CSSはまず『(X)HTMLありき』であり、(X)HTMLの正しい知識を覚えた上で学ぶものです。そこで、まずレイアウトや実線編となるまえに、Web Standardsの考え方や(X)HTMLの基本、プレーンなテキストからウェブページを作成するまでのマークアップ手順、そしてメンテナンスを考えた記述・管理法を1章~3章にかけて解説しています。ここでの解説は書籍全体を通して一貫しており、他のセクションを深く理解するためにも是非読んでもらいたいです。(X)HTMLの記述方法に迷いがある人にとって頭のなかがスッキリする内容です。
4章から6章までがCSSによるレイアウト方法の解説になります。このセクションは僕が担当したのですが、CSSのプロパティの中でも躓きやすいと思われるfloatプロパティの章では、サンプルと図を多めにして実際使われるfloatを利用したレイアウト方法をパターンに分けてステップアップ式に勉強できるように工夫しました。これは、僕がこれまで学校でfloatを教えるためにずーっと考えてきた構成の現時点で一番理解しやすい形だと思っています。floatプロパティ、そんなに怖くありません。ここを理解すればどんなレイアウトでも自分で組めるようになるでしょう。続いて、positionを解説し、すぐに使えるレイアウトパターンと実践編として2つのサイトの製作をワークフローと共に解説しています。
7章はXHTMLとCSSのチップス編になり、サイト製作にすぐに活かせるものから、アイデアを真似て別の新しいものを作れるようなテクニックが満載されています。僕も知らなかったものばかりで、メニューやトピックパスのマークアップ、画像置換系といった、実現方法がいくつもあるようなものが1つにまとまっているので、手元にあれば役に立つでしょう。
書籍の情報
- 書名
- 実践 Web Standards Design- Web 標準の基本と CSS レイアウト &Tips
- 出版元
- 株式会社 九天社
- 著者
-
- 福島 英児 Luck bag::blog
- 望月 真琴 hxxk.jp
- 市瀬 裕哉 ←これ俺。本名。3ping.org
- サイズ
- B5判、 436ページ← 分厚
- 定価
- 3,200円
- 発売日
-
2007年2月23日頃に書店に並ぶようです。
アウトライン
- 1 章 Web Standards の基本
- Web Standards とは
- 2 章 (X)HTML の基本
- HTMLと XHTMLに共通して覚えておくべきこと
- HTMLと XHTMLにおける違い
- (X)HTMLはまず文章ありき
- 3 章 CSSの基本
- これだけは守らなければならない書式
- 心がけるとメンテナンスしやすい書式
- CSS管理のコツ
- 視覚整形フォーマット
- 4 章 float プロパティを利用したレイアウト
- 寄せと流し込み
- 重なったブロックボックスにマージン
- 複数フロートの横並び
- ネガティブマージンを利用したレイアウト
- float プロパティを利用したレイアウトの使い分け
- フロートしたボックスを含む親ボックスの高さの算出
- 5 章 position プロパティを利用したレイアウト
- 指定できる 4 つの配置方法
- 絶対配置を利用したレイアウト
- 固定配置を利用したレイアウト
- 6 章 実践レイアウト
- レイアウトパターン
- 複合レイアウトで情報を整理したブログページの制作
- ボックスを自由に配置したページデザイン
- 7 章 XHTML&CSSTips
- トピックパスのマークアップ
- outline プロパティによるドロップシャドウ
- Mac OS X の Dock 風ナビゲーション
- CSSによる自動番号付け(カウンタ生成)
- CSSでフォトギャラリー
- アイコンリモート表示メニュー
- CSSを使って画像をポップアップ表示
- CSSだけで動作するドロップダウンメニュー
- 背景画像を利用したロールオーバー効果
- visibility プロパティを利用して img 要素をロールオーバー
- さまざまなブラウザでフォントの見栄えを揃える CSSライブラリ
- IE6以下での子供セレクタの使用
- 印刷用 CSSの作成
- line-height プロパティの指定値
- 定義リストの dt と dd を横並びさせる
- 背景画像を利用して訪問済みリンクを一工夫する
- img 要素のサイズを CSSで指定
- position プロパティを利用して要素を画面中央に固定
- position プロパティでフッタを常に画面の下部に固定
- 行ボックスの高さで垂直センター配置
- 背景画像を利用した画像置換
- リンク先のファイルタイプを CSSで明示する
- CSSでフォームをスタイリング
- モダンブラウザ向けの CSSハック
- Appendix
- DTDの読み方ガイド
- DOCTYPE スイッチの一覧表
- CSS 2.1の各プロパティリファレンス
400ページ以上のボリュームなので寝ながら見るのはつらいですが、WEB製作時に近くに置いてもらえたらうれしいな。
書籍について更に詳しく知りたい方は共著した方の記事を見てね。
- hxxk.jp - 実践 Web Standards Design - Web 標準の基本と CSS レイアウト &Tips が発売となります
- Lucky bag blog - 「実践 Web Standards Design」という本を書きました
謝辞
書籍を執筆するにあたり、多くの方にご協力いただきました。心僕の執筆の遅れにより担当の大内さん並びに関係者の皆様にとてもご迷惑おかけいたしました。皆さんのアドバイスによりとても良い本ができました。
忙しい中突然の誘いにも関わらず長い期間執筆を共にしてくれた真琴さんとe-luckさん、執筆から校正まで、皆さんの的確な指示がとてもあり難かったです。お疲れ様です。出版のきっかけを与えてくれたgraffiti.orgのnaoさん、皆様にはこの場をかりて心より感謝申し上げます。
- Newer: MTで実践 - CSSのモジュール化による管理方法と遊び方
- Older: Firefox アドオン はてなブックマークカウンタ

