背景画像付きのボックス

Colissさんのところで紹介されていたCSS Spriteのtipsがいいなぁと思ってpost。

CSS Spriteのメリットは複数の画像を1枚にまとめて作ることでHTTPリクエストを減らせたり、上手く組み合わせれば画像のトータルサイズを減らせたりできること。
個人的には管理する画像の数が減らせるのがうれしかったり（あんまり数が多くなりすぎると画像名見ただけじゃ何の画像か分からなくなってしまうんです…）。

ロールオーバー画像に使っていると、印刷時にFirefoxでおかしなことになるので、そういうところにはなかなか使いにくいです。
印刷用のCSSでメニューを表示させなければ問題ないですけどね。

前置きはこんなもんで本題に。

CSS Spriteって、「アイコンとかロゴを1枚にまとめとけー！」みたいなイメージだったけど、[CSS]一枚の画像で、四隅が角丸のパネルを実装するスタイルシートという記事で紹介されていた使い方は、便利だなぁと思った。

具体的には、

このボックスを

をこの画像で作る。
作者のデモを見る

見れば分かるけど、構造はこのようになっている。

div, hx, p{
background-image:url(img.png);
}
div{background-position:left bottom;
}
hx{
background-position:left top;
}
p{
background-position:right top;
background-repeat:repeat-y;
}

今までこういうタイプのボックス作るときには、上・真ん中・下の3つの画像に分けて書き出してました。
これが1枚の画像（box.gifみたいに）で作れれば、画像管理がちょっとだけ楽になるかも。

この使い方一般的だったらすいません…
こんな賢い使い方あるなんて知りませんでした(-_-;)

このサンプルだと文字数とか文字サイズによって見出しが崩れますが、見出しの背景に色を付けないなど工夫をすればもっと使いやすいものを作れそうですね。
もっとも、分かりやすくするために色を付けてるだけかもしれませんが。

全パーツを1枚にまとめるとパーツの追加・変更などがあったときに編集するのが面倒なので、1パーツ1画像みたいに使ったほうがよりスマートかなと思います。

関連投稿

• cssでグラフを描く
  category: css tags: css.
• リストマーカーの表示位置を揃える
  category: css tags: css.
• table に指定しておきたい CSS メモ
  category: css tags: css+tips.

posted on 2008.12.01 01:01pm