HTTPリクエスト数削減テクニック2： CSS Sprite編

これから身につけるWebサイト高速化テクニック（6）

2013/10/22 14:00

　本連載ではWeb担当者やWebデザイナー、コーダーの方々に向けて、Webサイト高速化に関する手法や技術について解説していきます。今回は、CSS Spriteについて紹介します。

目次
Page1 はじめに対象者 CSS Spriteとは 1. CSS Spriteの仕組み 2. 高精細ディスプレイ（Retina Display）の場合 3. CSS Spriteの作業と流れ
Page2 CSS Spriteの記述方法 1. HTMLの構造 2. CSSの指定 3. 画像置換について 4. Retinaディスプレイの対応方法
Page3 CSS Spriteのメリット CSS Spriteのデメリット 1. 背景画像のリピートには向かない 2. Sprite画像の作成には手間がかかる 3. メモリ消費に注意 4. CSS Spriteと画像置換のアクセシビリティについて 5. Sprite画像をインラインイメージ化して良いのか手間を省く便利ツール 1.Sass/Compassを使ったCSS Spriteの指定方法まとめ

※印刷用ページ表示機能はメンバーのみが利用可能です（登録無料）。

バックナンバー

連載:これから身につけるWebサイト高速化テクニック

野中龍一（クラスメソッド株式会社）（ノナカリュウイチ（クラスメソッドカブシキガイシャ））

クラスメソッドで企画、制作、運用までやるWebマスター。Webデザイン、Webサイト高速化、広義のHTML5、JavaScript、jQuery、CSS3、PHP、AWSを広く浅くやってます。クラスメソッド開発ブログを作ってる中の人。 http://dev.classmethod.jp/autho...