HOME > 開発者向けBLOG > Webデザイン >  CSSスプライトでナビメニュー

Technology Note 開発者向けBLOG

Webデザイン

CSSスプライトでナビメニュー

こんにちは、ゼノフィ渡部です。

CSSスプライトと呼ばれる背景画像を使用してナビメニューを作成する方法をご紹介いたします。

メリットとしては、複数の画像ではなく一個の画像で表示するので、サイトの表示を速めることができます。

実際に使用される画像は下記のようになります。

ナビメニュー

まず「ol.sprite li a」でaタグに指定するナビボタンの基本プロパティを指定します。

「ol.sprite li a.sprite_navi01」では 背景として使用するナビ画像とナビボタン1のポジションを指定しています。

「ol.sprite li a.sprite_navi01:hover」はマウスが背景画像にホバーした時、画像の位置を変更して色違いのボタンを表示させています。

「ol.sprite li a.sprite_navi02 」からはをそれぞれのナビボタンのポジションを指定しています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

ol.sprite li a {
  display: block; /* aタグはインライン要素なのでブロック要素に */
  width: 138px;   /* ナビボタンの幅を指定 */
  height: 39px;   /* ナビボタンの高さを指定 */
  text-decoration: none; /* aタグの下線の装飾を消去 */
}
 
ol.sprite li a.sprite_navi01 {
  background: url(navi.gif) no-repeat 0 0; /* ナビ画像を指定し、同時にナビボタン1のポジションを指定 */
}
 
ol.sprite li a.sprite_navi01:hover {
  background: url(navi.gif) no-repeat 0 -39px; /* ナビ画像を指定し、同時にホバー時のナビボタン1のポジションを指定 */
}
 
ol.sprite li a.sprite_navi02 {
  background: url(navi.gif) no-repeat -138px 0; /* ナビ画像を指定し、同時にナビボタン2のポジションを指定 */
}
 
ol.sprite li a.sprite_navi02:hover {
  background: url(navi.gif) no-repeat -138px -39px; /* ナビ画像を指定し、同時にホバー時のナビボタン2のポジションを指定 */
}
 
ol.sprite li a.sprite_navi03 {
  background: url(navi.gif) no-repeat -276px 0; /* ナビ画像を指定し、同時にナビボタン3のポジションを指定 */
}
 
ol.sprite li a.sprite_navi03:hover {
  background: url(navi.gif) no-repeat -276px -39px; /* ナビ画像を指定し、同時にホバー時のナビボタン3のポジションを指定 */
}

通常ナビボタンの中には何も記述しないことが多いと思いますが、タグの中が空なのはマークアップをする上で好ましくはないので、下記のようにspanタグの中にナビボタンに相当する内容を記述します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<ol class="sprite">
    <li>
        <a href="#" class="sprite_navi01">
            <span>
                ナビ1
            </span>
        </a>
    </li>
    <li>
        <a href="#" class="sprite_navi02">
            <span>
                ナビ2
            </span>
        </a>
    </li>
    <li>
        <a href="#" class="sprite_navi03">
            <span>
                ナビ3
            </span>
        </a>
    </li>
</ol>

ただこのままでは、画像の上にテキストが表示されています。

テキストを非表示にするには下記のように画像の後に表示させる指定をします。

「ol.sprite li」の「z-index: 1;」で spanより上の値を指定し、「ol.sprite li a span」の「z-index: -1;」でa タグの下に潜り込ませています。この時、「ol.sprite li」と「ol.sprite li a span」に「position: relative;」も記述しておきます。「position: relative;」を記述する理由は「z-index」プロパティを有効にするためです。

この方法でspanタグがa タグの下に潜り込む理由は、z-index にマイナス値を指定した場合、その要素が属しているposition: relative; 、 position: absolute;などの直近の要素からの相対座標のため背面に回るという事から来ています。ここではspanタグの直近の要素はaタグになります。

ただ、このテキストを画像の背面に潜り込ませる方法は、テキストが消えている訳ではないので、背景画像が透過pngなどの場合は使えません。

背景画像が透過の場合、背面に潜り込ませても透過しているので、そのままテキストが表示されてしまうので注意が必要です。

1
2
3
4
5
6
7
8
9
10
11

ol.sprite li {
  position: relative;
  z-index: 1; /* spanより上の値を指定 */
  list-style-type: none; /* olの番号を消去 */
  float: left; /* ナビを横並びに */
}
 
ol.sprite li a span {
  position: relative;
  z-index: -1;　/* liより下の値を指定 */
}

サンプル

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

ol.sprite {
  margin: 0;  /* 余分なマージンを消去 */
  padding: 0; /* 余分なパディングを消去 */
}
 
ol.sprite li {
  position: relative;
  z-index: 1; /* spanより上の値を指定 */
  list-style-type: none; /* olの番号を消去 */
  float: left; /* ナビを横並びに */
}
 
ol.sprite li a {
  display: block; /* aタグはインライン要素なのでブロック要素に */
  width: 138px;   /* ナビボタンの幅を指定 */
  height: 39px;   /* ナビボタンの高さを指定 */
  text-decoration: none; /* aタグの下線の装飾を消去 */
}
 
ol.sprite li a span {
  position: relative;
  z-index: -1;　/* liより下の値を指定 */
}
 
ol.sprite li a.sprite_navi01 {
  background: url(navi.gif) no-repeat 0 0; /* ナビ画像を指定し、同時にナビボタン1のポジションを指定 */
}
 
ol.sprite li a.sprite_navi01:hover {
  background: url(navi.gif) no-repeat 0 -39px; /* ナビ画像を指定し、同時にホバー時のナビボタン1のポジションを指定 */
}
 
ol.sprite li a.sprite_navi02 {
  background: url(navi.gif) no-repeat -138px 0; /* ナビ画像を指定し、同時にナビボタン2のポジションを指定 */
}
 
ol.sprite li a.sprite_navi02:hover {
  background: url(navi.gif) no-repeat -138px -39px; /* ナビ画像を指定し、同時にホバー時のナビボタン2のポジションを指定 */
}
 
ol.sprite li a.sprite_navi03 {
  background: url(navi.gif) no-repeat -276px 0; /* ナビ画像を指定し、同時にナビボタン3のポジションを指定 */
}
 
ol.sprite li a.sprite_navi03:hover {
  background: url(navi.gif) no-repeat -276px -39px; /* ナビ画像を指定し、同時にホバー時のナビボタン3のポジションを指定 */
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<ol class="sprite">
    <li>
        <a href="#" class="sprite_navi01">
            <span>
                ナビ1
            </span>
        </a>
    </li>
    <li>
        <a href="#" class="sprite_navi02">
            <span>
                ナビ2
            </span>
        </a>
    </li>
    <li>
        <a href="#" class="sprite_navi03">
            <span>
                ナビ3
            </span>
        </a>
    </li>
</ol>

<

>

PAGETOP