MdNの本

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

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

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

机上の空論ではない、現場で実証されたプロの技が結集!! 極限まで追求した“孤高”のHTML+CSSコーディングガイド

こもりまさあき、西畑一馬、浜俊太朗 著
B5変型判 / 256pP
ISBN978-4-8443-6135-0 / 価格(本体2,500円+税)
2010年08月25日発売

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

twitter facebook google+ このエントリーをはてなブックマークに追加 RSS

ページイメージ

クリックすると折りたためます
■ページ見本






目次

クリックすると開きます

【目次】
【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を利用したファイル管理


関連記事があります

  • XHTML&CSS定番テクニック大全

    Web デザイン XHTML&CSS定番テクニック大全

  • 次世代Webコーディングの超・最新動向 スマートフォン編

    web creators 次世代Webコーディングの超・最新動向 スマートフォン編

カスタマーレビュー(出典:amazon.co.jp)

カスタマーレビュー(出典:amazon.co.jp)