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

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

パターン4:カラフルなタイルにする

4 オンマウスオーバーでタイルの色が変わる

 これは一つ一つのリストにスタイルを設定しているのでスタイルシートがかなり長くなってしまいます。

HTMLソース

<div class="headernavip4">
<ul>
<li class="headernavip41"><A href="http://www.yahoo.co.jp/" mce_href="http://www.yahoo.co.jp/">1</A></li>
<li class="headernavip42"><A href="http://www.yahoo.co.jp/" mce_href="http://www.yahoo.co.jp/">2</A></li>
<li class="headernavip43"><A href="http://www.yahoo.co.jp/" mce_href="http://www.yahoo.co.jp/">3</A></li>
<li class="headernavip44"><A href="http://www.yahoo.co.jp/" mce_href="http://www.yahoo.co.jp/">4</A></li>
<li class="headernavip45"><A href="http://www.yahoo.co.jp/" mce_href="http://www.yahoo.co.jp/">5</A></li>
<li class="headernavip46"><A href="http://www.yahoo.co.jp/" mce_href="http://www.yahoo.co.jp/">6</A></li>
<li class="headernavip47"><A href="http://www.yahoo.co.jp/" mce_href="http://www.yahoo.co.jp/">7</A></li>
<li class="headernavip48"><A href="http://www.yahoo.co.jp/" mce_href="http://www.yahoo.co.jp/">8</A></li>
</ul>
</div>
スタイルシート
.headernavip4 ul{
margin:0px;
padding:0px;
list-style:none;  ←リストの前のマークの種類(黒丸など):なし
}

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

.headernavip4 li a{
color:#000000;  ←文字色:黒
font-size:13px;
font-weight:bold;
background-color:#f9f9f9;
display:block;  ←表示形式:ブロックレベル要素として表示する
width:40px;  ←<li>一つあたりの幅:40px
line-height:40px;  ←行の高さ:40px
margin-right:5px;  ←枠外余白右側:5px
border-bottom:1px solid #000000;  ←枠線下側:1px、実線、黒
border-right:1px solid #000000;  ←枠線右側:1px、実線、黒
text-decoration:none;  ←文字装飾:なし
float:left;  ←配置(回り込み):左寄せ
}

.headernavip41 a:hover{
background-color:#000000;
color:#ffffff;
font-size:16px;  ←文字サイズ:16px
text-align:center;  ←文字の配置(横方向):中央
}

.headernavip42 a:hover{
background-color:#ff95c2;
color:#ff0000;
font-size:16px;
text-align:center;
}

.headernavip43 a:hover{
background-color:#ffc7a2;
color:#ff6600;
font-size:16px;
text-align:center;
}

.headernavip44 a:hover{
background-color:#fdfa68;
color:#ff9900;
font-size:16px;
text-align:center;
}

.headernavip45 a:hover{
background-color:#9cfe61;
color:#009900;
font-size:16px;
text-align:center;
}

.headernavip46 a:hover{
background-color:#62ffd0;
color:#3366ff;
font-size:16px;
text-align:center;
}

.headernavip47 a:hover{
background-color:#72b5fe;
color:#3333ff;
font-size:16px;
text-align:center;
}

.headernavip48 a:hover{
background-color:#c897f4;
color:#9900ff;
font-size:16px;
text-align:center;
}
×

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