CSSで指定するロールオーバー(2)｜CSSの小技(指定テクニック)

CSSで指定するロールオーバー(2)｜上級CSSレイアウト講座

スポンサードリンク

少し重たい画像を使用する際、またリンクメニューが多いナビゲーションに画像を使用する際のスタイルシート指定のテクニックです。

また、下記の方法によりマウスオーバー時の画像入れ替えのタイムラグを軽減する事ができます。

ロールオーバーサンプル

Home

用意した画像

画像サンプル

CSS

サンプルは一つにしましたが、実際はもっとリンクがあると思います。少々グラフィカルな画像を使用する際は、下記のように指定するとロールオーバー時の画像の切り替わりのタイムロスが激減します。

#globalnavi {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#globalnavi li {
  text-indent: -9999px;
  width: 200px;
  height: 160px;
  margin: 0;
  padding: 0;
  background: url(画像のパス) no-repeat -200px 0; /* マウスオーバー時の画像 */
}

#globalnavi a {
  text-decoration: none;
  display: block;
  width: 200px;
  height: 160px;
  background: url(画像のパス) no-repeat 0 0; /* 最初の画像 */
}

#globalnavi a:hover {
  text-decoration: none;
  background-color: transparent;
  background-image: none;
}

簡易解説

某ページにアクセスがあった際に、予め二つの画像を一緒に読み込ませる為の指定です。

「#globalnavi li」にマウスオーバー時の画像を指定しておきます。
「#globalnavi a」に最初に表示する画像を指定します。
a:hoverの指定でbackground-imageは表示なしに、background-colorは透過指定します。

通常よくする指定では、マウスがリンクに乗ってから切り替え用の画像を読み込みますが、この指定では始めから両方の画像を読み込んでいます。

グローバルナビゲーション

ロールオーバーサンプル(1)の指定を、上記に書き換えてみました。2008.11追加

サンプル

#globalnavi {
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 200px;
}

#globalnavi li {
  margin: 0;
  padding: 0;
  width: 200px;
  height: 40px;
  background-image: url(画像のパス);
  background-repeat: no-repeat;
  border-bottom: 1px solid black;
}

#menu1 { background-position: -200px 0; }
#menu2 { background-position: -200px -40px; }
#menu3 { background-position: -200px -80px; }
#menu4 { background-position: -200px -120px; }
#menu5 { background-position: -200px -160px; }

#globalnavi a {
  text-indent: -9999px;
  text-decoration: none;
  display: block;
  width: 200px;
  height: 40px;
  background-image: url(画像のパス);
  background-repeat: no-repeat;
}

#menu1 a { background-position: 0 0; }
#menu2 a { background-position: 0 -40px; }
#menu3 a { background-position: 0 -80px; }
#menu4 a { background-position: 0 -120px; }
#menu5 a { background-position: 0 -160px; }

#globalnavi a:hover {
  text-decoration: none;
  background-color: transparent;
  background-image: none;
}

このCSS指定における注意事項

隠しテキストはGoogleのガイドライン違反をご確認下さい！(2010/01)

CSS指定によるロールオーバーで、この方法もかなり浸透して来たかと思いますが、最近(2008/07時点)ちょっと気になる事があります。Googleのウェブマスター向けガイドラインの一部に抵触するのでは？という点です。

当サイトも発足時からCSSロールオーバーを指定していますが、今のところ変化はないみたいです。因みに気になるのは下記点です。

以下はgoogleウェブマスター向けガイドラインからの引用です。

隠しテキストおよび隠しリンク

コンテンツに隠しテキストや隠しリンクが含まれていると、ユーザーに対するものと異なる情報が検索エンジンに提示されるため、信頼できないサイトと見なされる可能性があります。過度のキーワードといったテキストは、以下のような複数の方法で隠すことができます。

白の背景で白のテキストを使用する

テキストを画像の後ろに含める

CSS を使用してテキストを隠す

フォントサイズを 0 に設定する

隠しリンクとは、Googlebot でクロールされることを意図しているが、下記のようにユーザーからは読み取れないリンクのことです。

リンクが隠しテキストで構成されている (たとえば、テキストの色と背景色が同じ)。

CSS を使用して、高さが 1 ピクセル程度の非常に小さいハイパーリンクが作成されている。

リンクが小さな文字 (たとえば、段落中のハイフン) に組み込まれている。

偽装目的の隠しテキストや隠しリンクが含まれていると判断されたサイトは、Google のインデックスから削除され、検索結果ページに表示されなくなります。

「偽装目的の隠しテキストや隠しリンクが含まれていると判断されたサイト」とあるので多分大丈夫と思いますが、使用は自己責任でお願いします。

スポンサードリンク