CSSスプライト。

CSSスプライトの効用。

特に複数あるアイコンを文書内で多用する場合には、サーヴァへの負荷を軽減させる効果が期待出来ます。

例えば、いわゆるガラケー(スマートフォン以前の携帯電話)向けのコンテンツをPC向けに配信したい場合、絵文字の問題があります。

携帯電話用の絵文字は、多くの場合該当する文字を表すGIF画像などを<img>要素で埋め込みますが、その方法だと絵文字が多いコンテンツではサーヴァへの画像リクエストが多数発生してしまい、サーヴァへの負荷に繋がってしまいます。

CSSスプライトでは、予め使用したい絵文字を一枚にまとめたものを一回だけ読み込んで、それを使い廻していくため、絵文字の使用数が多ければ多いほどサーヴァへの負荷を減らせる効果が期待出来ます。

アイコン類を纏めた画像の用意。

先ず、サイト内で多用されるであろうアイコン類を一枚に纏めた画像を用意します。

この画像はGIF画像にする事になるでしょうが、二百五十六色以上の場合にはトゥルーカラーのPNG画像にしたくなるかも知れません。

• 但し、トゥルーカラーのPNG画像は非常に重くなります。かと言ってJPEG画像だと画像の鮮度が落ちるので、なるべく二百五十六色以内に抑えてGIF画像かインデックスカラーのPNG画像にする事をおすすめします。
• どうしてもフルカラーの画像にしたい場合は、二百五十六色以内にまとまる画像とフルカラーの画像をそれぞれGIF画像かインデックスカラーのPNG画像とJPEG画像かトゥルーカラーのPNG画像と言うように二つの画像に分けた方が良いでしょう。

実際のCSSでの考え方。

CSSスプライトは、見た目としては、用意した画像の一部を切り取って希望する箇所に貼り付けて行くと言うものに見えます

ですが、実際にはCSSには画像の一部を切り取って貼り付けると言う概念はありません。

• あくまでも概念としては存在しないと言う事です。

そこで、そのような効果が結果として出せる代わりの方法を考える事となります。

具体的な考え方。

具体的には、アイコンの大きさに合わせた表示領域を取り、そこに背景画像として用意した画像を貼り付けていきます。

このとき、背景画像の表示位置にマイナスの値を与える事で、画像の表示位置をずらせることになります。

表示領域ですが、これはインラインブロックの形式にします。

• 文章中に埋め込むので、インラインとなりますが、インライン方式では幅と高さを定める事が出来ません。
• 尚、インターネットエクスプローラ 7.0までではインラインブロックはサポートされておりませんが、バグを用いる事で同様の表示が可能になります。

HTML側の細工。

先ず、CSSを使う以上、CSSがセレクタで認識出来るようにしなければなりません。

• スタイルのためにHTMLをいじるのは抵抗があるかも知れませんが…。

絵文字を埋め込みたい箇所に、以下のように<span>要素を埋め込みます。

• マークアップは非視覚系環境で画像がない場合に適切であろうテキストに行います。

<p>
    堀北真希ちゃんって、可愛いよな<span class="emoji docomo80">(はぁと)。</span>
    堀北真希ちゃんは俺の嫁<span class="emoji docomo160">！</span>
    </p>

ここで、各所にわざわざクラス名を二つ与えたのは、以下の考えに基づきます。

1. emoji クラス名は、絵文字のための表示領域を意味します。
2. docomo80 クラス名及び docomo160 クラス名は、ドコモ式絵文字のそれぞれ絵文字番号80(ハートマーク)及び絵文字番号160(二重感嘆符)を埋め込む領域である事を意味します。

前者は結構記述が多いので、各絵文字ごとに記述するのは大変ですから、単一のクラス名で扱う事とした訳です。

• まぁ、この後読み進めば、お分かり頂けるかと思いますが…。

スタイルシートの作成。

続いて、以下のようにスタイルを定めます。

.emoji {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: transparent url('CSSSprite_Image.GIF') -1000px -1000px no-repeat;
    vertical-align: middle;
    text-indent: -9000px;
    }

.docomo80 {
    background-position: -319px -77px;
    }

.docomo160 {
    background-position: -128px -213px;
    }

スタイルシートの内容は以下のようになります。

サンプル。

現行のウェブブラウザ(ファイヤーフォックスなど)で、且つ画像を読み込んで表示する設定でご覧になると、以下のサンプル内の二箇所に絵文字が表示されている筈です。

インターネットエクスプローラ 7.0までについて。

インターネットエクスプローラ 7.0まででは、display: inline-block プロパティは実装されておりませんが、(制作者の環境では)結果的に問題なく処理されているようです。

どうも、インターネットエクスプローラ 7.0まででは、インライン要素形式の場合であっても、間違ってwidthプロパティやheightプロパティを認識してしまうようです。

• 認識出来ない displayプロパティがある場合、inline値と認識しているようです。一応、この挙動は正しいのですが、このタイプでは概念すらないwidthプロパティやheightプロパティが認識されるのが問題です。