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

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

パターン1:ボタンを押す感じに

1-1 枠線の太さを変更してボタンを表現する

 マウスをナビの上に重ねるとボタンが押されたように引っ込んで見えるパターンです。
通常の状態では枠線の下を太くして、オンマウスオーバーで上を太くするように設定しました。

HTMLソース
<div class="headernavip1">
<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>
スタイルシート
.headernavip1 ul{
margin:0px;
padding:0px;
list-style:none;  ←リストの前のマークの種類(黒丸など):なし
}

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

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

.headernavip1 li a:hover{
color:#333333;  ←文字色:暗めのグレー
background-color:#888888;
border-top:3px solid #333333;  ←枠線上側:3px、実線、暗めのグレー
border-bottom:1px solid #999999;  ←枠線下側:1px、実線、明るめのグレー
border-right:1px solid #999999;  ←枠線右側:1px、実線、明るめのグレー
border-left:1px solid #333333;  ←枠線左側:1px、実線、暗めのグレー
}


1-2 ボーダーをoutset、insetで表現する

HTMLソース

<div class="headernavip1-2">
<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>
スタイルシート
.headernavip1-2 ul{
margin:0px;
padding:0px;
list-style:none;  ←リストの前のマークの種類(黒丸など):なし
}

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

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

.headernavip1-2 li a:hover{
color:#333333;  ←文字色:暗めのグレー
background-color:#888888;
border:3px inset #999999;  ←枠線4方向:3px、凹線、明るめのグレー
}

outset

outsetの説明を上では凸線と書きましたが、私が適当に作った言葉です。outsetは盛り上がって見えるように配色した枠線のことです。

inset

insetの説明を上では凹線と書きましたが、これももちろん、私が適当に作った言葉です。intsetは窪んで見えるように配色した枠線のことです。


IEとFirefoxの二種類のブラウザで見比べると、Firefoxのほうがoutset、insetの効果がはっきりしているように見えます。


1-1と1-2の比較

スタイルシートを書き込む量は1-2の方が若干少なくて済むが、見た目は1-1の方が良さそう。
1-1は上下の枠線の太さの変化に伴って文字の位置も上下するので、よりボタンらしさが出ている。

×

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