HTML+CSSコーディング　ベストプラクティス　高速かつ堅牢なコードを効率よく書くために

こもりまさあき、西畑一馬、浜俊太朗著

定価 2,750円
（本体 2,500円＋税10%） ※電子書籍の価格は各販売ストアにてご確認ください｡

紙の本を買う

紙の書籍を購入
- Amazon
- ヨドバシ.com

発売日	：2010-08-25
仕様	：B5変型判／256pP
ISBN	：978-4-8443-6135-0

HTML＋CSSコーディングの場数を多く経験してきたプロのマークアップエンジニアが次に目指すのは、「Webサイトの高速性を実現し、堅牢で無駄がなく、美しく更新のしやすいコードを効率的に書く」こと。本書は、プロの現場で本当に求められているこれらの「ベストプラクティス」を、第一線で活躍する著者陣が余すことなく披露します。クロスブラウザやスマートフォン、HTML5、CSS3など最新の話題にも言及。HTML＋CSS上級者に贈る現場のテクニック集の決定版！

■ページ見本

【HTML＋CSSコーディングベストプラクティス】

■1　［基礎］　basic
1.1 ｜はじめに　本当のプロに求められるフロントエンド実装
1.1.1 ｜クオリティとコストバランスの両立を考える
1.1.2 ｜メンテナンス性を高めた設計
1.1.3 ｜情報へのアクセシビリティの確保
1.2 ｜そもそもHTMLとは何なのか？
1.2.1 ｜インターネットの誕生とHTML
1.2.2 ｜ハイパーテキストとハイパーリンク
1.2.3 ｜ HTMLのバージョンと文書型
1.3 ｜ Webサイトの過去と現在
1.3.1 ｜黎明期から発展期へ
1.3.2 ｜ Webサイトの代表的な構造
1.3.3 ｜ナビゲーションとリンクの重要性
1.3.4 ｜情報へのアクセシビリティを高める
1.4 ｜ HTMLによる文書の構造化
1.4.1 ｜もともとHTMLが想定していた文書構造
1.4.2 ｜マークアップするということ
1.4.3 ｜現代のWebサイトへのHTMLの適用
1.4.4 ｜ id属性とclass属性の使い分け

■2　［設計］　plan
2.1 ｜ CSS（スタイルシート）の分割
2.1.1 ｜機能別に分割する
2.1.2 ｜ページ別に分割
2.1.3 ｜パーツ別に分割
2.1.4 ｜作業範囲による分割
2.1.5 ｜デバイス別に分割
2.1.6 ｜ブラウザ別に分割
2.2 ｜スタイルシートのインポート
2.2.1 ｜スタイルシートのマージ
2.3 ｜カスケーディングとスタイルの詳細度
2.3.1 ｜カスケーディングとは？
2.3.2 ｜スタイルシートにおける優先度
2.3.3 ｜セレクタにおける詳細度
2.3.4 ｜プロパティの並び順
2.4 ｜セレクタによるCSS設計
2.4.1 ｜ CSS設計の問題点
2.4.2 ｜セレクタによる有効範囲の限定
2.4.3 ｜ IDセレクタをセレクタの基点にする
2.4.4 ｜ CSS設計を考慮したid属性の付け方
2.4.5 ｜ CSS設計を考慮したclass属性の付け方
2.5 ｜ CSSシグネチャ
2.5.1 ｜ CSSシグネチャの利用方法
2.5.2 ｜ CSSシグネチャの問題点
2.6 ｜コンポーネント化
2.6.1 ｜デザインからのコンポーネント化
2.6.2 ｜コンポーネントリストとコンポーネントコレクション
2.6.3 ｜コンポーネントからのデザイン
2.6.4 ｜コンポーネント化を行う際のCSSの注意点
2.7 ｜オブジェクト指向設計
2.7.1 ｜オブジェクト指向設計が有効な例
2.7.2 ｜目的別にclassを指定
2.7.3 ｜構造とスキンの分離
2.7.4 ｜ OOCSS（Object Oriented CSS）

■3　［開発効率］　development efficiency
3.1 ｜サイトのデザインと意味を考えてコードを共通化する
3.1.1 ｜コーディングを始める前にするチェック
3.1.2 ｜共通で使えるHTMLを管理する
3.2 ｜コードの再利用を考える
3.2.1 ｜ HTMLの再利用
3.2.2 ｜ CSSのサイト内での再利用
3.3 ｜ id属性値やclass属性値の命名について
3.3.1 ｜ HTML5の要素を参考にする
3.3.2 ｜機能や役割から命名する
3.3.3 ｜テキストを英訳する
3.3.4 ｜単語のつなぎを考える
3.3.5 ｜統一性を持たせる
3.4 ｜共通部分のコードをテンプレートとして組み合わせる
3.4.1 ｜共通で使用する部分をテンプレート化する
3.4.2 ｜テンプレートファイルの分け方
3.5 ｜ img要素のwidth属性、height属性の有無について考える
3.5.1 ｜ width属性とheight属性を省略することのメリット
3.5.2 ｜ width属性とheight属性を省略することのデメリット
3.5.3 ｜ alt属性値の表示について
3.6 ｜ HTMLやCSSの書き方にガイドラインを設ける
3.6.1 ｜ HTMLのインデント
3.6.2 ｜ class名、id名のガイドライン
3.6.3 ｜ HTMLのコメント
3.6.4 ｜ CSSのインデント
3.6.5 ｜プロパティの順番
3.6.6 ｜ショートハンドプロパティの使用
3.6.7 ｜ clearfixの方法
3.7 ｜ CSSの分割・モジュール化
3.7.1 ｜ CSSのモジュール化
3.7.2 ｜ CSSの分割
3.8 ｜デフォルトスタイルのリセット
3.8.1 ｜ユニバーサルセレクタを使ってすべての要素をリセットする方法
3.8.2 ｜必要な要素のみをリセットする方法
3.8.3 ｜リセットするプロパティ
3.9 ｜手戻りの少ない作業の進め方
3.9.1 ｜手戻りの少ないセレクタ
3.9.2 ｜ body要素にid属性とclass属性を記述する
3.10 ｜ CSSのコメントを記述する
3.10.1 ｜ CSSのプロパティ行をコメントアウト
3.10.2 ｜コメントで目次と見出しを作る
3.10.3 ｜コメントをメモとして使う
3.11 ｜急がば回れのソースコード
3.11.1 ｜ clearfix効果の簡略化に関する注意点
3.11.2 ｜安易なCSSの振り分けは行わない
3.11.3 ｜一見すると不要に思えるdivが必要なケース
3.12 ｜ idとclassを正しく使い分けてCSSにも利用する
3.12.1 ｜ id属性とclass属性の使い分け
3.12.2 ｜ idセレクタとclassセレクタの使い分け
3.13 ｜思った通りの表示にならないときに確認すること
3.13.1 ｜トラブルの種類を見極める
3.13.2 ｜解決したコードを見直して清書する

■4　［高速化］　speed up response
4.1 ｜今なぜ高速化が必要なのか
4.1.1 ｜閲覧環境を考えたサイト制作の重要性
4.1.2 ｜サイト表示のボトルネックを洗い出す
4.1.3 ｜ YSlowによるチェック項目の確認
4.1.4 ｜ Page Speedによるチェック項目の確認
4.2 ｜ HTTPリクエストの数を減らす
4.2.1 ｜構成要素の実態を把握する
4.3 ｜ HTML／CSS／JavaScriptをMinify化する
4.3.1 ｜テキストから不要なスペースや改行などを削除するMinify化
4.3.2 ｜ Minify化をどのタイミングで実行するか？
4.4 ｜複数のCSSやJavaScriptはできるだけ結合する
4.4.1 ｜ファイルを分割すればHTTPリクエストは増える
4.4.2 ｜結合できるものは結合して、できるだけ数を減らす
4.5 ｜ CSSのセレクタはできるだけ簡潔に
4.5.1 ｜冗長なセレクタの記述はレンダリング速度に影響する
4.5.2 ｜ CSSの継承や上書きの特性を利用したスタイル設計
4.6 ｜テキストをGzip化し、転送データ量を減らす
4.6.1 ｜ Gzipによる符号化でどう変わるのか
4.6.2 ｜テキストデータを圧縮する方法
4.7 ｜更新頻度の少ないファイルに有効期限を設定する
4.7.1 ｜ブラウザとサーバ間で行われていること
4.7.2 ｜特定のファイルタイプに有効期限を設定する
4.8 ｜ DNSルックアップの数は極力減らす
4.8.1 ｜外部サーバの数は少なければ少ないほどよい
4.9 ｜配信ホストは複数に分け、静的リソースはクッキーのないサーバから配信
4.9.1 ｜配信ホストを分けて、並行ダウンロードを有効に
4.9.2 ｜画像、CSS、JavaScriptは別のホストから配信
4.10 ｜画面描画に関係ないJavaScriptはの直前で読み込む
4.10.1 ｜必ずしもhead要素で読み込み／実行する必要はないJavaScript
4.11 ｜ head要素内の記述順による高速化
4.11.1 ｜並行ダウンロードを妨げない順番に書き換える
4.12 ｜ @importルールを使ったCSSの読み込みを避ける
4.12.1 ｜ @importルールの使い方次第でパフォーマンスは悪化する
4.13 ｜ CSS Spriteを使ってHTTPリクエスト数を減らす
4.13.1 ｜ CSSの背景画像を1枚にまとめるCSS Sprite
4.14 ｜高速化のためのimg要素の取り扱い
4.14.1 ｜ img要素にはwidthとheightでサイズを指定する
4.14.2 ｜実サイズと異なる画像をHTMLでリサイズしない
4.15 ｜そのほかのパフォーマンス向上のためにできること
4.15.1 ｜同一ファイルは同じ場所からダウンロードする
4.15.2 ｜ Faviconを用意し、できればキャッシュする
4.15.3 ｜ 404のエラーをなくす

■5　［多様な技法］　various techniques
5.1 ｜ CSSハックを使う理由・使わない別の方法
5.1.1 ｜ CSSハックとは？
5.1.2 ｜条件付きコメント
5.1.3 ｜さまざまなバグの対処法
5.2 ｜ floatとclearの活用
5.2.1 ｜ floatの挙動
5.2.2 ｜ clearの挙動
5.2.3 ｜ clearfix
5.2.4 ｜ IEにおけるclearfix
5.3 ｜ IEにおけるhasLayoutとは？
5.3.1 ｜ hasLayoutとは？
5.3.2 ｜ hasLayoutによるバグ
5.3.3 ｜ hasLayoutの活用
5.4 ｜ネガティブマージンの活用
5.4.1 ｜ネガティブマージンによる自由配置
5.4.2 ｜ネガティブマージンによるレイアウト
5.5 ｜ positionの活用
5.5.1 ｜「 position:absolute」による自由配置
5.5.2 ｜ IE6における「position:fixed」
5.5.3 ｜ z-indexとFlashの重なり順
5.6 ｜さまざまなブラウザに対応する確認環境
5.6.1 ｜ Webサービスの利用
5.6.2 ｜ Windows環境での構築
5.6.3 ｜ Mac環境での構築
5.7 ｜クロスブラウザ対応
5.7.1 ｜ターゲットブラウザの選定
5.7.2 ｜プログレッシブエンハンスメント
5.8 ｜印刷用CSSの利用
5.8.1 ｜印刷用CSSの指定
5.8.2 ｜印刷用CSSの作成
5.9 ｜適切な画像形式の選定と透過PNGの利用
5.9.1 ｜適切な画像形式の選定
5.9.2 ｜ IE6での透過PNGの利用
5.10 ｜ CSSデバッグツールの利用
5.10.1 ｜ Firebug
5.10.2 ｜ Internet Explorer Developer Toolbar　（開発者ツール）
5.10.3 ｜ Google Chromeの「デベロッパーツール」
5.10.4 ｜ Safariの「開発」メニュー
5.10.5 ｜ Operaの開発用ツール「Opera Dragonfly」
5.11 ｜ JavaScriptの利用とライブラリの活用
5.11.1 ｜ WebサイトにおけるJavaScriptの役割
5.11.2 ｜ JavaScriptライブラリの活用
5.12 ｜「 .htaccess」の活用
5.13 ｜ iPhone用のWebサイトの作成
5.14 ｜ data URLスキームの利用
5.15 ｜ HTML5の利用
5.15.1 ｜ HTML5の特徴
5.15.2 ｜ HTML5の利用
5.15.3 ｜セクショニングコンテンツとアウトライン
5.15.4 ｜ HTML5と関連API
5.16 ｜ CSS3の利用
5.16.1 ｜ CSS3の特徴
5.16.2 ｜ CSS3で追加されたセレクタ
5.16.3 ｜ CSS3で追加されたプロパティ
5.17 ｜ Subversionを利用したファイル管理