WEB日記

by KATO ~ January 9, 2010

こんにちはKATOです。

今回はJava Scriptを使わずCSSのみでのサイト作成という場合を想定しての実験。
なので、とりあえずCSS Sprites的発想でナビゲーションぽいのを作ってみた。

まず、用意した画像がこれ。↓

で、HTMLとCSS。↓

<ul>
<li class="a"><a href="#">リンク1</a></li>
<li class="b"><a href="#">リンク2</a></li>
<li class="c"><a href="#">リンク3</a></li>
<li class="d"><a href="#">リンク4</a></li>
<li class="e"><a href="#">リンク5</a></li>
</ul>

ul {
	overflow: hidden;
}

li {
	list-style: none;
	float: left;
}

li a {
        background: url(sprite.gif) 0 0 no-repeat;
        display: block;
        width: 100px;
        height: 0;
        padding-top: 30px;
        overflow: hidden;
}

.a a {}
.b a { background-position: -100px 0; }
.c a { background-position: -200px 0; }
.d a { background-position: -300px 0; }
.e a { background-position: -400px 0; }

.a a:hover { background-position: 0 -30px; }
.b a:hover { background-position: -100px -30px; }
.c a:hover { background-position: -200px -30px; }
.d a:hover { background-position: -300px -30px; }
.e a:hover { background-position: -400px -30px; }

そして完成。↓

おぉ〜、バッチリ。
一応、コーディング内容を考慮してtext-indent: -9999px;は使わずpaddingとoverflow: hidden;で
テキストを非表示に。まぁ、text-indent: -9999px;とあんまり変わらないような気はしますが・・・
しかーし、このやり方だと問題もあります！！
ブラウザの設定でCSSが切られている場合はOKなんだけど、画像が切られているとアウト！！
なんにも表示されませ〜ん。まぁ、画像切ってる人そんなにいないと思うけど・・・
けど100%そうだと断言できないのでサイトの内容によっては完全に却下。
ま、適材適所。内容によって上手く使い分けるしかないということですね〜