CSSでナビボタンを作る　背景画像の切り替えその１

CSSでコントロールしてナビボタンを作るというのは、よくあります。でも、そんな基本だからこそ、見習にはあんちょこが必要です。ということで、ビボー録です。（アンパンと、チョコパン買ってこよ！）

ということで、パターン1は、基本形です。おそらく。

今回使う、ボタンは背景で指定して、hoverのときに画像が切り替わります。hoverのときとそれ以外のときで、別々の画像でもいいのですが、別個のファイルにすると、ボタンにマウスが乗っかってhoverになったとき、初めて読み込まれるので、一瞬画像が消えるというか、ちらつくことがあります。
ぴー、ががー、ずぴずぴずび、とFaxモデムで通信していたときのように、読み込むまでにコーヒーが入れられるってことはないでしょうけど、ちらつくのって、ナウくないです。

なので、プリロード（前読み込み）の意味で、マウスオーバーするまえにマウスオーバー用の画像を読み込ませるため、一枚の画像として準備です。

ナビボタン画像

縦に並べた

(X)HTML

<ul>

<li><a href="#">ナビボタン</a></li>

<li><a href="#">ナビボタン</a></li>

<li><a href="#">ナビボタン</a></li>

<li><a href="#">ナビボタン</a></li>

</ul>

CSS

*{
	margin:0;
	padding:0;
}
ul {
	width:400px;
	margin:0 auto;
}
li {
	float: left;
	list-style-type:none;
	width:100px;　/*画像の横幅*/
	height:50px;　/*画像の高さ*/
}
a {
	display:block;　/*インライン要素であるaをブロック化*/
	width:100%;　/*親要素であるliの幅の100%*/
	height:100%;　/*親要素であるliの高さの100%*/
	background-image:url(img/navbtn03.gif);　/*背景画像*/
	background-repeat:no-repeat;　/*背景画像はリピートしない*/
	background-position:0 0;　/*背景画像が貼り付けられる開始位置　横縦の順*/
	text-decoration:none;　/*aにひかれるアンダーラインを消す*/
	text-indent:-9999px;　/*「ナビボタン」とXTHML上に書かれた文字を、左側へ9999px移動させる*/
	overflow:hidden;　/*Fire Foxなどで、アウトライン線がtext-indent分だけ横へ表示されないようにするため*/
	outline:none;　/*同上*/
	
}
a:hover {
	background-position:0 -50px;　/*hover時、aで読み込んだ画像の表示位置を、aの左端から0px、上端から-50pxにする*/
}

サンプルはこちら

background-positionは、領域の中で、背景画像の表示位置を指定します。左端からの距離、上端からの距離を書きます。このようにpxや％で数値指定することもできますが、left、right、top、bottom、centerなどの書き方もできます。

なんとかできて、ちょっとほっとした見習れす。

2011年12月21日2:28 AM| カテゴリー： HTMLとCSSのコード,見習い奮闘記| コメント (0)