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

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

第2章 CSSの基本法則

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

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

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

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

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

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

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

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

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

取り扱いオンラインショップ

• 
• 
• 
• 
• 
•