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

[表紙]実践Web Standards Design―Web標準の基本とCSSレイアウ

B5変形判/448ページ

定価(本体3,200円+税)

ISBN 978-4-7741-3684-4

→学校・法人一括購入ご検討の皆様へ

書籍の概要

この本の概要

Web標準(Web Standards)に準拠したWebサイトを制作するための基礎知識と,実践的なレイアウト手法を徹底的に解説した,Web標準ガイドブック。新しい仕様やブラウザに配慮した新装版です。Web標準の仕様から,コーディングスタイル,CSSレイアウトのTipsまでをまとめています。

こんな方におすすめ

  • 一からWebサイト制作を学びたい,すべての方

著者の一言

2007年3月に,私たちは同名の書籍を刊行しました。執筆にあたっては綿密な打ち合わせを行い,「それぞれの得意分野を生かすことができる」という,共著ならではのメリットが活きるように試行錯誤し,頭から順番に読んでも,また目的の章だけを読んでも現場での実践に活かせる書籍を作りました。

結果,企画段階で予定していた280ページを大きく上回る436ページというボリュームになり,私たちが伝えたかったことを切り捨てることなく収めることができ,第1刷の刊行から1年後に3刷に到達する反響を得ることができました。

Web制作の現場で実践できる,中~上級的の内容を多く含んでいますが,実際には制作現場だけではなく,教育現場でも活用されているとも耳にしています。

そして今回装いを新たに,2008年の最新情報を取り入れ,ページ数も448ページへと増大して再び刊行することになりました。奥付には「初版 第1刷」とありますが,実質的には4刷目と言えるでしょう。最初の刷から数えて3回のアップデートを反映した本書を,ぜひ一度手に取ってみてください。

この書籍に関連する記事があります!

第1回 ガイドブックの選び方
はじめまして。hxxk.jpの望月真琴です。ふだんはWebと全く関係のない業種で仕事をしていますが,このように時々テクニカルライティングを行っています。今回を皮切りに,著者それぞれが得意とする分野で短期集中連載という形で書かせていただきますので,よろしくお願いします。
第2回 ブラウザ毎のサイトチェック環境を構築しよう
前回に引き続き,hxxk.jpの望月真琴です。『実践Web Standards Design』では,必要に応じてレガシーなブラウザへの対処方法を解説しています。ただし,書籍の紙面では実際にブラウザでの表示をチェックする方法について触れていませんので,今回の記事で紹介しましょう。
第3回 floatプロパティを学習する上での3つのポイント
こんにちは,市瀬裕哉と申します。『実践 Web Standards Design』では,floatプロパティとpositionプロパティを利用したレイアウトについての解説を担当しています。本連載(第3回,第4回)では,floatプロパティを利用したレイアウト方法を学習する中で,必要なポイントと基本的なレイアウトの実現方法,その応用までを解説します。
第5回 横並びメニューの区切り線をCSSで表現しよう
はじめまして,福島英児と申します。『実践Web Standards Design』の刊行にあたり,可能であれば追加したかったTipsがあったのですが,結局そのまま載せなかったネタを今回ご紹介したいと思います。
第6回 CSS3のセレクタを使用してみよう
『実践Web Standards Design』刊行に合わせた著者3人による短期集中リレー連載の第6回目です。第5回に引き続き,福島英児が担当させていただきます。最終回となる今回は,CSS3セレクタである:target擬似クラスの使用例を,サンプルを使ってご紹介します。
Web標準を基本から学ぶためのガイドブック
皆さんは小学生や中学生の頃に国語や算数,英語などの学習をする際に,学習資料は何を使っていたでしょうか。ほとんどの人は,学校指定の「教科書」を使って学習していたと思います。

本書のサンプル

本書の一部ページを,PDFで確認することができます。

本書の紙面イメージは次のとおりです。画像をクリックすることで拡大して確認することができます。

サンプル画像1

サンプル画像2

サンプル画像3

目次

1章 Web Standardsの基本

1-1. Web Standardsとは

  • 1-1-1.(X)HTML+CSSを用いてWebリソースを作成する
  • 1-1-2.Web Standardsに従うメリット
  • 1-1-3.使用する(X)HTMLやCSSのバージョン

2章 (X)HTMLの基本

2-1. HTMLとXHTMLに共通して覚えておくべきこと

  • 2-1-1.id属性とclass属性の違い
  • 2-1-2.見出しレベルの重要性

2-2. HTMLとXHTMLにおける違い

  • 2-2-1.SGMLベースかXMLベースか
  • 2-2-2.要素の書き方
  • 2-2-3.id属性とname属性
  • 2-2-4.Media Typesについて
  • 2-2-5.HTML互換性ガイドライン

2-3. (X)HTMLはまず文章ありき

  • 2-3-1.まずはマークアップのことを考えずに文章を書く
  • 2-3-2.その文章のタイトルは何か
  • 2-3-3.その文章の中で見出しにすべき部分は何か
  • 2-3-4.見出しだけを抜き出して正しい目次になるか
  • 2-3-5.ブロックレベル要素でマークアップする
  • 2-3-6.インラインレベル要素でマークアップする
  • 2-3-7.body要素の後にhead要素、html要素をマークアップする
  • 2-3-8.DOCTYPEは最終的に宣言する
  • 2-3-9.必要に応じてXML宣言をする
  • 2-3-10.マークアップ順序のまとめ
  • 2-3-11.(X)HTMLによる論理的なマークアップ
  • 2-3-12.div要素による構造化
  • 2-3-13.id属性はどの要素に対して指定するべきか
  • 2-3-14.head要素内の記述について

3章 CSSの基本

3-1. これだけは守らなければならない書式

  • 3-1-1.CSSの大まかな構文
  • 3-1-2.declaration block(宣言ブロック)

3-2. 心がけるとメンテナンスしやすい書式

  • 3-2-1.宣言の記述順の規則を定めておく
  • 3-2-2.CSSの視認性を高める
  • 3-2-3.XHTMLのモジュールごとに要素型セレクタを配置
  • 3-2-4.CSSの先頭にガイドラインをメモしておく

3-3. CSS管理のコツ

  • 3-3-1.各種の値の形式をしっかり理解する
  • 3-3-2.セレクタ、カスケード、継承の理屈をしっかり理解する
  • 3-3-3.固定スタイルシート・優先スタイルシート・代替スタイルシート
  • 3-3-4.xml-stylesheet処理命令
  • 3-3-5.@import規則を用いた複数のCSSの連携
  • 3-3-6.link要素、style要素のmedia属性と@media規則
  • 3-3-7.ブラウザごとのデフォルトスタイルをリセット
  • 3-3-8.ベースとなるスタイルを指定する

3-4. 視覚整形フォーマット

  • 3-4-1.ボックスモデル
  • 3-4-2.包含ブロック
  • 3-4-3.通常フロー

4章 floatプロパティを利用したレイアウト

4-1. 寄せと流し込み

  • 4-1-1.画像を寄せる
  • 4-1-2.表を寄せる
  • 4-1-3.見出しを寄せる
  • 4-1-4.フロートと周囲のボックスの関係
  • 4-1-5.流し込みの解除

4-2. 重なったブロックボックスにマージン

  • 4-2-1.見出しと本文の列を分割したレイアウト
  • 4-2-2.ナビゲーションと本文の列を分割したレイアウト

4-3. 複数フロートの横並び

  • 4-3-1.画像を敷き詰めて表示する
  • 4-3-2.横並びのタブ型ナビゲーション
  • 4-3-3.カラムレイアウトへの応用

4-4. ネガティブマージンを利用したレイアウト

  • 4-4-1.子供セレクタに対応しないブラウザ
  • 4-4-2.フロートするボックスの重なり順序

4-5. floatプロパティを利用したレイアウトの使い分け

  • 4-5-1.「重なったブロックボックスにマージン」のレイアウト方法
  • 4-5-2.「複数フロートの横並び」のレイアウト方法

4-6. フロートしたボックスを含む親ボックスの高さの算出

  • 4-6-1.後続の要素でfloatをclearする
  • 4-6-2.clearを指定できる要素がない場合
  • 4-6-3.幅を明示的に指定できない場合

5章 positionプロパティを利用したレイアウト

5-1. 指定できる4つの配置方法

  • 5-1-1.static-通常配置
  • 5-1-2.relative-相対配置
  • 5-1-3.absolute-絶対配置
  • 5-1-4.fixed-固定配置

5-2. 絶対配置を利用したレイアウト

  • 5-2-1.カラムレイアウトへの利用
  • 5-2-2.絶対配置の基点を変える
  • 5-2-3.複数の基点を利用したレイアウト

5-3. 固定配置を利用したレイアウト

  • 5-3-1.ナビゲーションを常に上部に表示する
  • 5-3-2.フレームのように表示するカラムレイアウトへの利用
  • 5-3-3.固定配置に対応していないブラウザの対処

6章 実践レイアウト

6-1. レイアウトパターン

  • 6-1-1.1カラム フロート流し込み / floatプロパティ
  • 6-1-2.2カラム フロート+重なったボックスにマージン / floatプロパティ
  • 6-1-3.2カラム 複数フロート+重なったボックスにマージン / floatプロパティ /li>
  • 6-1-4.3カラム 左右メニュー複数フロート+重なったボックスにマージン / floatプロパティ
  • 6-1-5.3カラム 右メニュー2カラム複数フロート+重なったボックスにマージン / floatプロパティ
  • 6-1-6.2カラム 複数フロート / floatプロパティ
  • 6-1-7.3カラム 複数フロート / floatプロパティ
  • 6-1-8.2カラム 複数フロート+クリア
  • 6-1-9.2カラム 複数フロート+ネガティブマージン / floatプロパティ
  • 6-1-10.2カラム 絶対配置+重なったボックスにマージン / positionプロパティ
  • 6-1-11.3カラム 絶対配置+重なったボックスにマージン / positionプロパティ
  • 6-1-12.3カラム 右メニュー2カラム絶対配置+重なったボックスにマージン / positionプロパティ

6-2. 複合レイアウトで情報を整理したブログページの制作

  • 6-2-1.XHTML文書の制作
  • 6-2-2.CSSファイルのモジュール化
  • 6-2-3.ベースとなるスタイルの制作
  • 6-2-4.主要なレイアウトの構築
  • 6-2-5.細部のスタイルの指定
  • 6-2-6.フッターのスタイル

6-3. ボックスを自由に配置したページデザイン

  • 6-3-1.XHTML文書の制作
  • 6-3-2.ベースとなるスタイルの制作
  • 6-3-3.主要なレイアウトの構築
  • 6-3-4.ボタンメニューのスタイル
  • 6-3-5.フッター領域のスタイリング

7章 XHTML&CSS Tips

  • 7-1. トピックパスのマークアップ
  • 7-2. outlineプロパティによるドロップシャドウ
  • 7-3. Mac OS XのDock風ナビゲーション
  • 7-4. CSSによる自動番号付け(カウンタ生成)
  • 7-5. CSSでフォトギャラリー
  • 7-6. アイコンリモート表示メニュー
  • 7-7. CSSを使って画像をポップアップ表示
  • 7-8. CSSだけで動作するドロップダウンメニュー
  • 7-9. 背景画像を利用したロールオーバー効果
  • 7-10. visibilityプロパティを利用してimg要素をロールオーバー
  • 7-11. さまざまなブラウザでフォントの見栄えを揃えるCSSライブラリ
  • 7-12. IE 6以下での子供セレクタの使用
  • 7-13. 印刷用CSSの作成
  • 7-14. line-heightプロパティの指定値
  • 7-15. 定義リストのdtとddを横並びさせる
  • 7-16. 背景画像を利用して訪問済みリンクを一工夫する
  • 7-17. img要素のサイズをCSSで指定
  • 7-18. positionプロパティを利用して要素を画面中央に固定
  • 7-19. positionプロパティでフッタを常に画面の下部に固定
  • 7-20. 行ボックスの高さで垂直センター配置
  • 7-21. 背景画像を利用した画像置換
  • 7-22. リンク先のファイルタイプをCSSで明示する
  • 7-23. CSSでフォームをスタイリング
  • 7-24. モダンブラウザ向けのCSSハック

Appendix

  • Appendix-1. DTDの読み方ガイド
  • Appendix-2. DOCTYPEスイッチの一覧表
  • Appendix-3. CSS 2.1の各プロパティリファレンス
  • Appendix-4. CSS3で新たに定義されるセレクタ

著者プロフィール

市瀬裕哉(いちせゆうや)

2001年,パソコンの購入とともにウェブに興味を持ち,独学でウェブ制作を始める。HTML,CSSの他にFlash,3DCGによる創作活動を続ける。現在,フリーランスとしての活動と並行して都内の専門学校にてウェブデザインコースの講師を務め,若きウェブ戦士の育成にも力を注いでいる。


福島英児(ふくしまえいじ)

DTPおよびウェブ制作に携わる。2003年末頃から(X)HTML+CSSによる制作へ興味を持ち,spacer.gifからの脱却に目覚める。現在は主にディレクション業務に関わる傍ら,CSS関連などの記事を雑誌へ寄稿。著書に『Web標準テキスト(2)CSS』(技術評論社)がある。


望月真琴(もちづきまこと)

ウェブとの接点がない業界に身を置きながら,趣味でウェブ制作に関する情報を収集。2003年頃からHTML,CSSに興味を持ち,2004年8月に現サイト「hxxk.jp」開設。ウェブに限らず,気になる情報を自分用にまとめあげて記録するようにしている。本書サポートサイト「lh3.jp」の管理も担当。