icon を一枚の画像から抜き出すなど CSS で画像の一部を切り抜く方法。

アイコンなどをひとつずつ画像にして保存をしていると、管理がとても面倒になるし、なんていうタイトルを付けて良いかわからなくなります。
特に丸角テーブルがページ内にいくつもあるようなサイトでは、いろいろな種類の丸角部分を管理しなければいけないので、画像のタイトルにも気を使う必要が出てくるのではないでしょうか？

追記(2009/8/30): 一枚の画像にまとめることで、個別に画像を読み込まなくて良いので、結果的にページの表示にかかる時間が短くなります。

しかし、今回紹介する方法を使うことで、アイコンがまとまっているような画像集から部分的に画像を切り抜くことができます。

ソース

1
2
3
4
5
6
7

.example .icon {
background-image: url(../images/example.png);
background-position: 0 -50px;
overflow: hidden;
width: 30px;
height: 30px;
}

解説

background-image: url(../image/example.png);

切り抜きたい画像が収録されているイメージファイルを読み込みます。

background-position: 0 -50px;

これは背景画像の表示位置を指定しています。左から0px、上から-50pxにあるところから表示を始めます。

overflow: hidden;

はみ出た内容を表示しないようにします。

width: 30px;　height: 30px;

画像のサイズを指定しています。画像集の中にある切り抜きたい画像のサイズをここで指定します。