スタイルシートでヘッダナビをデザインする(3)

  「スタイルシートでヘッダナビを作成する」で作成したヘッダナビの作成で、スタイルシートの変更のみでいくつか装飾パターンを試してみました。くわしい説明は「スタイルシートでヘッダナビを作成する」とほとんど同じなので省略します。

パターン3:文字サイズを変える

3 オンマウスオーバーで文字サイズを大きくする

HTMLソース

<div class="headernavip3">
<ul>
<li><A href="http://www.yahoo.co.jp/" mce_href="http://www.yahoo.co.jp/"  >yahoo!japan</A></li>
<li><A href="http://www.infoseek.co.jp/" mce_href="http://www.infoseek.co.jp/" >infoseek</A></li>
<li><A href="http://seesaa.jp/" mce_href="http://seesaa.jp/" >seesaa</A></li>
</ul>
</div>
スタイルシート
.headernavip3 ul{
margin:0px;
padding:0px;
list-style:none;  ←リストの前のマークの種類(黒丸など):なし
}

.headernavip3 li,{
float:left;  ←配置(回り込み):左寄せ
}

.headernavip3 li a{
color:#666666;  ←文字色:白
font-size:13px;
font-weight:bold;
background-color:#ffffee;
display:block;  ←表示形式:ブロックレベル要素として表示する
text-align:center;  ←文字の配置(横方向):中央
width:150px;  ←<li>一つあたりの幅:150px
line-height:33px;  ←行の高さ:33px
border:1px solid #999999;  ←枠線4方向:1px、実線、明るめのグレー
text-decoration:none;  ←文字装飾:なし
float:left;  ←配置(回り込み):左寄せ
}

.headernavip3 li a:hover{
font-size:18px;  ←文字サイズ:18px
color:#ff0000;  ←文字色:赤
}

line-height:33px;

 今までのサンプルではline-height(行の高さ)をemという単位で指定していましたが、emは文字の大きさに対して相対的に変化する単位なので、文字サイズを変化させると一緒に行の高さも変化してしまうので、ここではpxを使って固定しました。

もちろん、今までのサンプルのline-heightでも、emではなくpxを使っても何も問題ないと思います。

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。