■ページイメージ

---

■著者からのメッセージ

デザイン的なテクニックだけで満足していませんか？本書を読めば、Web標準に準拠したXHTML、CSSコーディングの基本的な考え方が理解できます。レイアウトの基本から、崩れないマルチカラムレイアウトの作り方まで丁寧に解説。管理しやすく、効率的なCSSの記述の仕方など、コーディングの現場で役立つノウハウも公開しています。XHTML 1.0（Second Edition）やCSS level 2 revision 1などの最新仕様、Internet Explorer 7やFireFox 2などの最新のWebブラウザに対応。「Web標準」のWebサイト制作を目指すクリエイター必携の一冊。

---

■著者プロフィール

○加藤善規（かとうよしき） デジパ株式会社 クリエイティブ事業部マネージャー。専門学校にてメカトロニクスを修学後、製造業における生産ライン設計、生産管理等、Webとはかかわりのない業界に所属しながら独学でWeb関連技術を学習。その後フリーランスによるWebサイト制作業務等を経て2004年よりデジパ株式会社勤務。ディレクター業務に従事。 ○平澤 隆（ひらさわ たかし） デジパ株式会社 クリエイティブ事業部マークアップエンジニア。絵描きの夢を追って上京。東京ゲームデザイナー学院・ゲームキャラクターデザイナー養成講座を卒業後、もともと興味のあったWeb系の会社に入社。1年半ほど働いたあと、デジパ株式会社に入社。現在フルCSSによるコーディングを主業務としている。テーブルレイアウトの経験がないため、テーブルで組まれたサイトのソースを覗くと、？が頭にいっぱい浮かぶらしい。 ○両見 英世（りょうけん ひでよ） デジパ株式会社 クリエイティブ事業部リーダー。専門学校を卒業後フリーで活動。Eコマースサイト、某レーベルサイトのデザイン・コーディングを行う。2004年デジパ株式会社入社。クライアントのウェブサイト制作に携わり、デザイン・コーディング・ブログ構築など制作の全般を行う。公開後は運用支援に務める。現在では自社サービス「iddy」「sitestock」の企画・運用にも取り組んでいる。

■目次

はじめに
本書の読み方
序章

第1章　(X)HTMLの基本法則

1　文書構造を的確に伝える要素でマークアップする
2　(X)HTML文書には適合するDTDに合わせた文書型宣言を行う
3　HTMLとXHTMLの違いを理解して正しいマークアップを行う
4　文字コードを正しく宣言して文字化けを防ぐ
5　XHTML文書では条件付きでXML宣言を省略できる
6　XHTML文書のメディアタイプは「application/xhtml+xml」が基本
7　id属性とclass属性を目的に応じて使い分ける
8　XHTML文書ではCSSやJavaScriptをできるかぎり外部ファイル化する
9　id属性、class属性の値はCSSセレクタの命名規則に合わせて指定する
10　XHTML文書の公開時にHTMLとの後方互換性を確保する
11　(X)HTML文書のコメントは正しく書く
12　インデントとコメントで読みやすい(X)HTML文書を作る
13　(X)HTML文書には内容が伝わりやすいタイトルを設定する
14　既存の要素で表現できない部分にはdiv 要素とspan要素を使用する
15　link要素で(X)HTML文書の利便性を高める
16　順不同リスト（ul）と順序リスト（ol）を使い分ける
17　引用部分と本文の差を明確にする
18　address要素を使用して制作者の署名を記す
19　略語に説明を加えて利便性を向上させる
20　label要素を利用してフォームを使いやすくする
21　入力コントロールをグループ化してフォームを整理する
22　Tabキーによる項目選択とキーボードショートカットで利便性を高める
23　項目数の多いセレクトメニューはoptgroup要素でグループ化する
24　alt属性ですべての画像に的確な代替テキストを付ける
25　アンカーテキストにはリンク先の内容を明示する
26　target="_blank"の使用は最低限に抑える
27　英単語は小文字で、略語は大文字で記述する
28　日付情報にはわかりやすい表記法を使用する
29　表のマークアップではアクセシビリティを考慮する
30　特別な記号は文字参照で記述する

第2章　CSSの基本法則

31　CSSの基本的な記述方法を理解する
32　スタイル適用の優先順位を理解する
33　CSSにおけるボックスモデルを理解する
34　レンダリングモードの切り替え条件を把握して表示をコントロールする
35　セレクタと擬似クラスを使いこなして効率的なCSSを記述する
36　:hover擬似クラスは:link／:visited擬似クラスよりあとに記述する
37　インラインボックスの高さの値には単位を指定しない
38　文字色と背景色のコントラストに配慮する
39　出力メディアに合わせて適用するスタイルを制御する
40　複数人で管理するCSSはコメントでガイドラインを記述する
41　スペース、インデント、改行を使って読みやすいCSSを書く
42　プロパティの指定順序を統一する
43　ショートハンドプロパティでCSSを効率化する
44　ショートハンドプロパティはポイントを押さえて使用する
45　ベースとなる文字サイズの指定方法を工夫する

第3章　用途と目的に合わせたレイアウトの法則

46　マルチカラムレイアウトはfloatプロパティで実現する
47　マルチカラムレイアウトではclearプロパティの使い方に注意する
48　positionプロパティで自由度の高いレイアウトを実現する
49　floatプロパティによる2カラムレイアウトの基本を理解する
50　サイト全体の文書構造を整理してからCSSを記述する
51　2カラムの可変レイアウトにはネガティブマージンを使用する
52　固定幅の2カラムレイアウトをエラスティックレイアウトにする
53　floatプロパティを使用して柔軟な3カラムレイアウトを実現する
54　positionプロパティでより柔軟なマルチカラムレイアウトを実現する
55　カラム落ちの原因と対処方法を理解する
56　背景画像を工夫してフロートボックスの下辺を揃える
57　見出しの横に表示するボタンはpositionプロパティで実現する
58　画面中央の配置はposition／marginプロパティで実現する
59　エラスティックレイアウトで横幅サイズを指定して可読性を高める

第4章　ユーザビリティを向上させるCSSデザインの法則

60　CSSのみでロールオーバー効果を実現する
61　パンくずリストは階層構造を考えて作る
62　文書構造が明確にわかる縦並びのメニューを作成する
63　CSSのみでドロップダウン型メニューを作る
64　クリック領域を大きくしてユーザビリティを高める
65　リンク先のファイルタイプを利用者に明示する
66　リンク先が新規ウィンドウで開くことを明示する
67　CSSで擬似フレームを作成する
68　代替スタイルシートを利用して複数のスタイルシートを切り替える
69　印刷に適した印刷用スタイルシートを作成する
70　フィードにCSSを適用してユーザビリティを向上させる

第5章　実践的なCSSデザインの法則

71　Webブラウザのデフォルトスタイルをリセットする
72　1行テキストの上下中央配置にはline-heightプロパティを使用する
73　画像の下の余白はvertical-alignプロパティで解消する
74　字下げとぶら下がりはCSSでコントロールする
75　文字サイズを変更してもテキストが重ならないようにする
76　定義リストを横並びにしてスマートに見せる
77　リストの横並びはインラインとして実現する
78　透過gif画像を利用してカラーバリエーションを作る
79　背景画像を指定してimg要素の見栄えをよくする
80　JavaScriptを使わずにロールオーバー時の画像拡大効果を再現する
81　ステッカーを貼ってプロモーション効果を高める
82　スクロールバー領域を常に確保してセンタリング位置のズレを避ける
83　角丸の背景は最低限の要素で実現する
84　未対応セレクタも状況により使用してかまわない
85　CSS3セレクタを使用してスマートなCSS を記述する

第6章　プロを感じさせるデザインの法則

86　レイアウトデザインはグリッドを意識する
87　余白の使い方でデザインに差をつける
88　マルチカラムデザインでは横幅比のバランスを考える
89　レイアウトと機能に一貫性をもたせユーザビリティを向上させる
90　画像サイズは黄金比や白銀比を利用する
91　配色のルールを理解する
92　号数活字システムで見栄えのよい文字サイズを決める
93　ドロップキャップで文書にリズムを与える
94　ターゲットユーザーに合わせてフォントやディテールを使い分ける
95　各国の欧文フォントの雰囲気をWebデザインに活かす
96　見出しや本文ごとに行間を変えて美しい文字組みを作る
97　もっとも伝えたい情報は左上に配置する
98　ボタンやリンクの機能がひと目でわかるようにする
99　引用をわかりやすく視覚表現する
100　グローバルナビゲーションでは情報の優先順位と利便性を考慮する

付録
用語集
要素索引
属性索引
プロパティ索引
用語索引

【クックブックとして】2009/03/19

この本は、ある程度Webサイトを作成出来るようになってきてから見た方がいい本です。
少なくともXHTML,CSSの存在を知っているくらいのレベルでなければ、この本は向かないと思います。
　
ただ、「XHTML,CSSの書き方を知っているしサイトも作成しているけれど、
ノウハウについては全く知らない」という方にとっては、
値段の割に非常に有益な情報が手に入る本だと思います。

2007年出版という事もあって内容は割合新しいし、Web標準等を意識していてしっかり書かれています。
この本はクックブックとして持っていて損しない本だと思います。

【経験者ですが、知らなかったテクニックもいくつかありました】2008/12/14

HTML・CSSのコーディングはほぼ問題なくできる状態でしたが、著者のブログ（3名ともWebサイト制作に関するブログを書いています）がとても面白かったので、買ってみました。

私はすでに知っていることが多かったですが、「確かにこれは役に立つテクニックだ」と思えるものが多かったのも事実です。

ほかの参考書と違う点としては、実際のHTML/CSSがそのまんま載っており、それを表示したときの画面のキャプチャー画像も載っており、パソコンの前でなくても読み進められる、理解できるということが特徴だと思います。

これにより、floatの性質や、3カラム可変のレイアウトの作り方など文章だけではなかなか理解しがたいものでも簡単に理解することができるのではないかと思います。

おすすめです。

【読みやすい構成で好感】2008/11/02

くどくどしくない内容が好感を持てます。

要点を絞って、分かりやすく説明されていて、CSSの重点をしっかり押さえられる気がします。初心者は勿論のこと、上級者の復習的教材としても使えます。

【目新しさがない】2008/05/23

割と最近…といっても1年近く前の本ですが、当時を思い起こしてみても特に目新しい技術が載っている本とは言えない。全体的に説明が軽い。

本気でweb標準学ぶならこの本じゃない方が良いと思います。

【サッと調べるのに最適】2008/04/19

この手の書籍は他にも多く出版されていますが、比較的厚いものが多く、
教科書的に利用するのには適していても、現場で「サッと調べる。」と言う
用途にはあまり適していない。と言うものが多い傾向にありました。

この文献は、まさに現場で「サッと調べる。」のに適した書籍だと言えます。
よく利用する内容や陥りやすい内容を100のトピックにまとめて紹介しています。
目次の作りも良く、知りたい内容を調べやすい工夫がされています。
文章による説明もしっかりとしていますが、図, 表, ソースが豊富で
方法論などを 理解しやすい構成になっているのも特徴の1つです。

ページ数を押さえ必要最小限度の事のみを書いた書籍と言うイメージが強く、
これ一冊でオールマイティーに役立つ。とは言い難い面があります。
より深く調べたい場合には、 他の専門書籍を参考にするなどの代替手段が必要ですが、
まず初めに手に取りサッと調べ、必要に応じて更に詳しい書籍を参考にする。
と言う使い分けを考えると実に良くできている文献だと言えそうです。

Webページを作る現場では、手元に置いてあると安心できそうな。そんな一冊です。

コメント投稿欄