CSSスプライト アイコンなどを1つの画像にまとめてbackground-positionでずらして表示

/ Web / Comment[0]
例えばこんな画像。同じピクセルの画像を並べてくっつけただけのものです。
適当にデスクトップのアイコンを並べてスクショを撮って作りました。

CSSスプライトとは、このようなまとまった画像をCSSで小分けにして表示させるというテクニックです。
メリットとしては、HTTPリクエストの数が減らせること(apacheのログも)とファイル数を減らせます。

んでやってみました。ものすごい我流ですが。
<html>
<head>
<style type="text/css">
.icons {
width:54px;
height:54px;
overflow: hidden;
background-image: url(html_css_icons.PNG);
}
.icons#gimp { background-position: left; }
.icons#bf3 { background-position: -64px 0; }
.icons#cof { background-position: -128px 0; }
.icons#uplink { background-position: right; }
</style>
</head>
<body>

<div class="icons" id="gimp"></div>
<br/>
<div class="icons" id="bf3"></div>
<br/>
<div class="icons" id="cof"></div>
<br/>
<div class="icons" id="uplink"></div>

</body>
</html>

表示結果

縦横を54pxに制限したdivで囲って、その中にアイコンを1つにまとめたbackground-imageを表示させ、
background-positionで位置をずらして小分け表示させています。
それぞれのアイコンは<div class="icons" id="アイコン名"></div>で呼び出せます。
関連記事

コメント

:
:
:
:
:
管理人のみ表示を許可