HTMLとCSSのコード
CSSでコントロールしてナビゲーションボタンを作っていて、不思議なことに出くわしました。
次の二つのコード、見てください。
サンプル１
(X)HTML
<ul>
<li><a href="#"><img src="img/navbtn01.gif" width="100" height="50" alt="ナビボタン" /></a></li>
<li><a href="#"><img src="img/navbtn01.gif" width="100" height="50" alt="ナビボタン" /></a></li>
<li><a href="#"><img src="img/navbtn01.gif" width="100" height="50" alt="ナビボタン" /></a></li>
<li><a href="#"><img src="img/navbtn01.gif" width="100" height="50" alt="ナビボタン" /></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;
background-image:url(img/navbtn02.gif);
}
a {
display:block;
width:100%;
height:100%;
background-repeat:no-repeat;
background-position:0 0;
text-decoration:none;
}
a img {
border:none;
}
a:hover {
visibility:hidden;
}
サンプル１はこちら
サンプル２
(X)HTML
<ul>
<li><a href="#"><span><img src="img/navbtn01.gif" width="100" height="50" alt="ナビボタン" /></span></a></li>
<li><a href="#"><span><img src="img/navbtn01.gif" width="100" height="50" alt="ナビボタン" /></span></a></li>
<li><a href="#"><span><img src="img/navbtn01.gif" width="100" height="50" alt="ナビボタン" /></span></a></li>
<li><a href="#"><span><img src="img/navbtn01.gif" width="100" height="50" alt="ナビボタン" /></span></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;
background-image:url(img/navbtn02.gif);
}
a {
display:block;
width:100%;
height:100%;
background-repeat:no-repeat;
background-position:0 0;
text-decoration:none;
}
a img {
border:none;
}
a:hover span{
visibility:hidden;
}
サンプル２はこちら
どちらも通常時の画像をimgでHTML内に張り込んで、hoverのときは、見えなくなるようにvisibility:hiddenをつけて、親要素であるliの背景画像を見せるという考え方です。
違いは、サンプル２のほうでは、HTMLでimgをspanで囲ってあること。CSSでは、hoverのときにvisibility:hiddenを設定するのが、a:hoverではなく、a:hoverの中にあるspanです。
たったこれだけの違いですが、なぜかサンプル２のほうが、hoverの画像の読み込みがはやい、というか、ちらつかないです。
IE8とFire Fox8で試してみましたが、両方とも、サンプル１ではがたがたちらつくのに、サンプル２はそんなに気にならないです。プリロード的な違いはないように思えるし、なぜでしょう…。はて。
2011年12月23日1:53 AM|
カテゴリー：
HTMLとCSSのコード,見習い奮闘記|
コメント
(0)
CSSでコントロールしてナビボタンを作るというのは、よくあります。でも、そんな基本だからこそ、見習にはあんちょこが必要です。ということで、ビボー録です。（アンドーナッツと、チョココルネ買ってこよ！）
ということで、パターン２は、前回の変形パターンです。おそらく。
今回使う、ボタンは背景で指定して、hoverのときに画像が切り替わります。hoverのときとそれ以外のときで、別々の画像でもいいのですが、別個のファイルにすると、ボタンにマウスが乗っかってhoverになったとき、初めて読み込まれるので、一瞬画像が消えるというか、ちらつくことがあります。
ぴー、ががー、ずぴずぴずび、とFaxモデムで通信していたときのように、読み込むまでに紅茶が入れられるってことはないでしょうけど、ちらつくのって、ナウくないです。
なので、プリロード（前読み込み）の意味で、マウスオーバーするまえにマウスオーバー用の画像を読み込ませるため、一枚の画像として準備です。
縦に並べた
(X)HTML
<ul>
<li><a href="#"><span>ナビボタン</span></a></li>
<li><a href="#"><span>ナビボタン</span></a></li>
<li><a href="#"><span>ナビボタン</span></a></li>
<li><a href="#"><span>ナビボタン</span></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;
width:100%;
height:100%;
background-image:url(img/navbtn03.gif);
background-repeat:no-repeat;
background-position:0 0;
text-decoration:none;
overflow:hidden;
outline:none;
}
a:hover {
background-position:0 -50px;
}
a span {
visibility:hidden;
}
サンプルはこちら
前回のと違うのは、HTMLでナビゲーションの文字列をspanで囲った点。CSSでは文字を消すためにtext-indent:-9999pxを使わず、aのなかのspanにvisibility:hiddenをつけた点です。
なんとかできて、またまた、ちょっとほっとした見習れす。
2011年12月22日1:52 AM|
カテゴリー：
HTMLとCSSのコード,見習い奮闘記|
コメント
(0)
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)
« 古い記事
新しい記事 »
森歩き日記
自称パソプロ化計画
