書籍概要

[改訂新版]実践 Web Standards Design - Web標準の基礎とCSSレイアウト&Tips

著者
発売日
更新日

概要

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

本書はXHTML1とCSS2.1が解説の柱になりますが,今回の改訂にあたり,HTML5を見越したマークアップ方法も解説しています。

著者から一言

本書は、株式会社九天社より2007年3月に刊行された書籍の再刊行版を、更に電子書籍として加筆・再編集した改訂新版です。「初学者向けではなく中級者向けに、Web制作の現場での実践に活用できる書籍を」というコンセプトで、著者それぞれの得意な分野を担当して執筆し、前回の再刊行および今回の電子書籍化にあたり、最新の仕様やWebの現状をそのつど反映してきました。

電子書籍化ということで、本文から仕様書の該当箇所や参考ページへの参照が容易になりました。また、一部のみカラーだった紙面も全ての章でカラー化され、図版の見やすさの向上やソースコードの強調部分が明確になり、またWebブラウザやスマートフォン、タブレットなど様々なデバイスで手軽に読めるようになっています。特に、本書の性質上仕様書や参考ページにハイパーリンクで繋がる、というのは紙の書籍と大きく異なる利点だと思います。

(「はじめに」より抜粋)

著者のサイトはこちらです。

ハッシュタグには,#hopbookをご利用ください。

サンプル

samplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesample

目次

Chapter 1: Web Standardsの基本

  • 1.1 Web Standardsとは

Chapter 2: Web Standardsの基本

  • 2.1 HTMLXHTMLに共通して覚えておくべきこと
  • 2.2 HTMLとXHTMLにおける違い
  • 2.3 (X)HTMLはまず文章ありき

Chapter 3: CSSの基本

  • 3.1 これだけは守らなければならない書式
  • 3.2 心がけるとメンテナンスしやすい書式
  • 3.3 CSS管理のコツ
  • 3.4 視覚整形フォーマット

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

  • 4.1 寄せと流し込み
  • 4.2 重なったブロックボックスにマージン
  • 4.3 複数フロートの横並び
  • 4.4 ネガティブマージンを利用したレイアウト
  • 4.5 floatプロパティを利用したレイアウトの使い分け
  • 4.6 フロートしたボックスを含む親ボックスの高さの算出

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

  • 5.1 指定できる4つの配置方法
  • 5.2 絶対配置を利用したレイアウト
  • 5.3 固定配置を利用したレイアウト

Chapter 6: 実践レイアウト

  • 6.1 レイアウトパターン
  • 6.2 複合レイアウトで情報を整理したブログページの制作
  • 6.3 ボックスを自由に配置したページデザイン

Chapter 7: XHTML&CSS Tips

  • 7.1 トピックパスのマークアップ
  • 7.2 絶対配置を利用したレイアウト
  • 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 定義リストのdtddを横並びさせる
  • 7.16 img要素のサイズをCSSで指定
  • 7.17 positionプロパティを利用して要素を画面中央に固定
  • 7.18 positionプロパティでフッタを常に画面の下部に固定
  • 7.19 行ボックスの高さで垂直センター配置
  • 7.20 背景画像を利用した画像置換
  • 7.21 リンク先のファイルタイプをCSSで明示する
  • 7.22 CSSでフォームをスタイリング
  • 7.23 モダンブラウザ向けのCSSハック
  • 7.24 パフォーマンス最適化のためのCSS Spritesテクニック
  • 7.25 画像を使わずにCSS3でドロップシャドウを実現する

Appendix

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

サポート

現在サポート情報はありません。

商品一覧