@mekemoke

はい、ごめんください。

先月から、片手間にココナラでサービスを出品しています。

ウェブ解析とか、WordPress で困ったことのご相談とか、キャッチコピーとか、チビの声とかｗ　おかげさまで、適度なペースでお声がけいただいています。ありがとうございます。

WordPress のご相談とか、解決できるとこちらもスッキリ気持ちいいです。「わかる人ならわかるんだろうなあ…」と悩むことがありましたら、お手伝いさせてくださいな。

さて前置きが長くなりましたが、先日「CSS スプライト」で作るグローバルメニューのご相談を受けました。CSS スプライトを使ったメニューの説明ページは多いのですが、ご依頼の内容をバッチリ解決できる参考ページが見つからなかったので、ちょいとエントリー。

CSS スプライトって？

一枚の画像を背景に設定し、CSS で表示エリアを設定する手法です。画像の任意の位置（X座標とY座標）と幅、高さがわかれば、四角く切り抜くことができます。

要するに　CSS で画像の一部を四角く切り抜いて表示する　という手法です。

０．CSS スプライトの基本条件

• マウスオーバーで画像を変えるため、大抵はリンク（アンカータグ）で利用します。
• リンクはブロック要素（display:block;）（＝四角形）にします。
• 画像は背景（background-image）として使います。
• 背景画像を表示する位置（background-position）を決めます。
• 背景画像はリピートして使えません。（background-repeat:no-repeat;）
• アンカーの :hover で背景画像の位置を変更します。
• アンカータグ内に入れたテキストは、text-indent か padding で表示しないようにします。

１．どんなデザインでどんな動きにしたいのか想像してみよう

こんなグローバルメニューがあるとします。
メニューの周りには背景がありますね。HOME はマウスオーバーした時の状況を表します。
つまり普段は、背景が青、文字は白。マウスオーバーで背景が薄い青、文字が青となります。
まずは動きの想定とデザインを把握しておきましょう。

２．メニューの周りに注目しよう

グローバルメニューの外側には背景（1）があります。
また、グローバルメニューの左右には、マウスオーバーしても変わらない部分の背景（2）があります。

これらの部分は、X軸（横）方向にリピートして使う必要があります。

ん？CSS スプライトはリピートできましたっけ…？（上記０番で確認してみてください）

CSS スプライトはリピートできません。背景は CSS スプライトとは別に考えましょう。

ということで、メニューのまわりで使う背景（1）とメニュー用の背景（2）はそれぞれ切り抜くかスライスして、名前をつけて保存しておきます。

左右の端を角丸にするのは、画像を並べてもいいですが、CSS の border-radius で設定したほうがスマートですね。

３．各メニューの大きさを確認しよう

メニューの高さは全て揃うはずですね。幅がすべて同じ場合は、１つだけ分かれば良いです。違う場合は、それぞれの幅をしっかり確認しておきます。

たとえば今回の例ならすべて同じ大きさなので、1つのメニューは130×60（ピクセル）となります。それが4つあるので、メニュー部分は520×60（ピクセル）となりますね。

４．上段に通常時、下段に :hover 時のメニューを並べます

メニュー部分のみを切り抜き、キャンバスの大きさを調整します（例では 520×60 となります）。

CSS スプライトにハマってしまう人は、メニューの外の背景ごとコピーしてしまうことが多いようです。必ずメニューのみを使ってください。

キャンバスの高さを２倍にして（例では120px）、メニューをコピー（レイヤーやグループ機能を使える場合は、それらを複製すると使いやすいです）して移動し、縦に並べます。

上段が通常時、下段がマウスオーバー時となります。

黄色の線で示された部分をスライスして４つの画像にしてもいいですが、１つの画像として保存して進めます。（下記サンプルデモ参照）

５．CSS で設定して仕上げよう！

画像の左上を基準に、位置を指定します。

右上に行くほど数値が大きくなり、左下に行くほど数値が小さくなります。
だから メニュー画像を設定 ＝ 画像を左に移動させる 時は X座標がマイナスになり、hover 時 ＝ 画像を上に移動させる 時は Y座標がマイナスになるのです。

・・・ややこしいですが、CSS を確認してみてください。

画像の切り抜きさえ間違わなければ、CSS スプライトは難しくありません。
今回のサンプルは下記にあります。基本部分しか入れていないのですが、お好きに使ってください。（あとで改良の余地あり）

CSS スプライトサンプル　ZIP　DEMO

参考サイト

CSSスプライトで画像を円滑に表示させる | Webクリエイターボックス

基本部分がわかりやすく解説されています。私が今回の記事で言いたかったのは、背景は別になるんだよ！という部分だけです。

CSSスプライトについてあれこれ。

スプライトした際の速度検証や、背景に画像を設定してガチャガチャやる一般的な方法以外にも、色々な方法を紹介しています。深く知りたい方は必見。

Webページの表示速度アップに欠かせないCSSスプライトを超簡単に作成してくれるサイト「SpriteMachine」 | OZPAの表4

CSS スプライトのための画像を作ってくれるサイトの紹介。メニュー画像は個別にあるから、全部くっつけたいよという場合に使えます。