K's Labo Rebooted

事前にお断りしておきますが、何せわたくしめの話ですので、大それたことは出来ませんし、するつもりもございません。このエントリーを読み終えた後に、「なるほどね」と思っていただければ幸いでございます。

皆さん、よくご利用になられてると思う「Google」検索ですが、検索結果がずら〜っと表示されたページの下のほうに、「Goooooooogle」ってな感じの「ナビゲーション」がありますよね。ご存知ですよね。
あれもね、複数の画像がまとめられたひとつの画像を使い、ポジションをずらすことによって表示してるんですよ（おそらく・・・）。知ってましたか？

昨日も取り上げましたが、検索結果のページでメインで使用されてる画像は、下記の画像です。



ねっ、いろんな画像がまとめられてるでしょ。
つまり、検索結果の「Goooooooogle」って画像は、メインで使用されてる画像上段の「黄色のo（オー）」だけを、ポジションをずらすことによって複数回表示してるんです。ですが、ウェブサーバーからの画像の読み込みは一回のみ。んでもって、CSSを表示を制御してます。ん〜、すばらしいじゃないですかぁ〜。

ってな訳で、ちょこっとサンプルを下記に記述してご説明します。まずは下記の画像をご覧くださいませ。



私がテスト用に作った、つたない画像です。まっ、そんな事はいいじゃないですかぁ〜。無視してください。

この上記のテスト画像一枚を使って、「Goooooooogle」ってな感じにしてみたのが下記のサンプルです。
サンプルだよ！

どうです？気分だけですが「Google」検索結果みたいでしょ。

これも、ウェブサーバーからの画像を一回のみ読み込んで、後はCSSでポジションをずらすことによって表示を制御してます。

んでは、下記に実際のHTMLソースを記載します（ちょこっと省略）。

<ul class="sample20080222">
<li class="sf"></li>
<li class="sn"><a href="#" target="_blank"></a></li>
<li class="sn"><a href="#" target="_blank"></a></li>
<li class="sn"><a href="#" target="_blank"></a></li>
<li class="sn"><a href="#" target="_blank"></a></li>
<li class="sn"><a href="#" target="_blank"></a></li>
<li class="sn"><a href="#" target="_blank"></a></li>
<li class="sn"><a href="#" target="_blank"></a></li>
<li class="sn"><a href="#" target="_blank"></a></li>
<li class="se"></li>
</ul>

んでもって、表示を制御しているCSSを下記に記載します。これが肝心ですね。

.sample20080222 ul {
  margin: 15px auto;
  padding: 0px;
  width: 480px;
  list-style-type: none;
}
.sample20080222 li,
.sample20080222 a:hover {
  background: url("./hooge.jpg") no-repeat top left;
}
.sample20080222 li {
  display: inline;
  float: left;
  height: 31px;
  margin: 0px;
  padding: 0px;
}
.sample20080222 .sf {
  width: 51px;
}
.sample20080222 .sn {
  background-position: -50px 0px;
  width: 21px;
}
.sample20080222 .se {
  background-position: -70px 0px;
  width: 44px;
}
.sample20080222 a {
  margin: 0px;
  padding: 0px;
  display : block;
  width: 21px;
  height: 31px;
}
.sample20080222 a:hover {
  background-position: -29px 0px;
  width: 21px;
}

まっ、ざっとこんな感じですね。

でぇ〜、こっから「ミソ」ですよ、お客さん。
上のサンプルを見て「おっ！」と思ったそこの貴方。偉い！優秀！かしこい！褒めてしんぜよう。え〜〜こ、え〜〜こ。
戯れ言はこのあたりにして・・・。

実は、サンプルの「黄色のo（オー）」のところにマウスを近づけると、赤色に変わります。俗に言う「マウスオーバー」ってやつですね。
どうやってんのぉ〜？ってお思いの方は、上記のCSSをご覧ください。大したことはしてません。「hover」時に表示する画像のポジションを切り替えてます。

巷では「Javascript」を使用した「マウスオーバー」。はたまた「Javascript」を使わず、CSSのみで行う「マウスオーバー」。などなど、いろんなサンプルが溢れかえってますが、上記のこの手法も、CSSのみで行う「マウスオーバー」に分類されます。が、この手法、あまり紹介されてないんですよねぇ〜。他の方が紹介されてるモンを紹介しても、あまり面白みにかけるので、あえて、わざと、違う手法を紹介したって次第です。

んでんで、この手法だとコネクション数の低減にも繋がるし、表示は早いし、おいしいし（あっ、これは無いか・・・）、いいことづくめなんですが・・・、あまり用いられていません。何故かというと・・・、面倒だからです、たぶん。せっせこ、せっせこと、CSSの調整を地道に行わないといけないしね・・・。

まっ、いずれにせよ、ウェブの奥の深さを思い知らされるエントリーではないかと、私自身思ってますが、皆さんはどう思われますか？

最後に一言。
時簡に余裕がある方は、是非チャレンジしてみてください。きっと「目からウロコ」ですよ。ほんまの話。

それでは、また。