css spriteなど画像spriteの具体的な実装方法

スタイルシートで利用する背景画像を一つにまとめるcss spriteとか、 <img>タグに利用する画像を一つにまとめるimg spriteとかを利用する方法の紹介。 併設の別館ブログにimg spriteを導入したのでその覚書き。 （このブログ（バックステージ）には導入していません） 注意点：背景のリピート画像には使えない はじめに注意事項。というか出来ないこと background: url("../hogr.png") repeat-y とかやっている画像は一つにまとめる事は出来ません まず画像の用意 サイト内で使いたい画像を一つにまとめます。 この時、画像をなるべく整頓しておくと後で楽。 ▲（クリックで拡大） 上記みたいな画像をベースにする。そしてレイヤーを扱える画像編集ソフトを用意して、 画像一つ一つをレイヤーで配置し、目的の画像の開始部分（左上）をグリッドに併せて利用すると後で