CSSでナビボタンを作る 背景画像の切り替えその1
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)
コメントフィード
トラックバックURL: https://pc.beginners-luck.net/pcwp/2011/12/21/css-navi-btn01.html/trackback