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

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

パターン5:モノトーンなタイルにする

5 オンマウスオーバーでタイルの色が変わる(モノトーン)

これは、4のカラフルなタイルをモノトーンのグラデーションにしてみただけです。

HTMLソース

<div class="headernavip5">
<ul>
<li class="headernavip51"><A href="http://www.yahoo.co.jp/" mce_href="http://www.yahoo.co.jp/">1</A></li>
<li class="headernavip52"><A href="http://www.yahoo.co.jp/" mce_href="http://www.yahoo.co.jp/">2</A></li>
<li class="headernavip53"><A href="http://www.yahoo.co.jp/" mce_href="http://www.yahoo.co.jp/">3</A></li>
<li class="headernavip54"><A href="http://www.yahoo.co.jp/" mce_href="http://www.yahoo.co.jp/">4</A></li>
<li class="headernavip55"><A href="http://www.yahoo.co.jp/" mce_href="http://www.yahoo.co.jp/">5</A></li>
<li class="headernavip56"><A href="http://www.yahoo.co.jp/" mce_href="http://www.yahoo.co.jp/">6</A></li>
<li class="headernavip57"><A href="http://www.yahoo.co.jp/" mce_href="http://www.yahoo.co.jp/">7</A></li>
<li class="headernavip58"><A href="http://www.yahoo.co.jp/" mce_href="http://www.yahoo.co.jp/">8</A></li>
</ul>
</div>
スタイルシート
.headernavip5 ul{
margin:0px;
padding:0px;
list-style:none;  ←リストの前のマークの種類(黒丸など):なし
}

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

.headernavip5 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;  ←配置(回り込み):左寄せ
}

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

.headernavip52 a:hover{
background-color:#2f2f2f;
color:#ffffff;
font-size:16px;
text-align:center;
}

.headernavip53 a:hover{
background-color:#525252;
color:#ffffff;
font-size:16px;
text-align:center;
}

.headernavip54 a:hover{
background-color:#6d6d6d;
color:#ffffff;
font-size:16px;
text-align:center;
}

.headernavip55 a:hover{
background-color:#939393;
color:#000000;
font-size:16px;
text-align:center;
}

.headernavip56 a:hover{
background-color:#adadad;
color:#000000;
font-size:16px;
text-align:center;
}

.headernavip57 a:hover{
background-color:#d0d0d0;
color:#000000;
font-size:16px;
text-align:center;
}

.headernavip58 a:hover{
background-color:#e8e8e8;
color:#000000;
font-size:16px;
text-align:center;
}
×

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