突起物!?突起物!?

サイトメモ

下のURLは，ちょっと前にテスト・検証用に作ったモノ。
ちょっと手が込んでいるし，折角だから晒し。


http://yukashi.odap.jp/test.html
CSSでリンクをボタン風に表現してみた。


htmlはわりとシンプル。(ま，その為のCSSなんだが)

<ul>
<li><a><span>メニュー</span>01</a></li>
<li><a><span>メニュー</span>02</a></li>
<li><a><span>メニュー</span>03</a></li>
<li><a><span>メニュー</span>04</a></li>
</ul>

数字の箇所に更新日時を入れたりとかすると良いかも。（その場合はマークアップを変えたほうが良い）


で，以下が充てているCSS。

ul a {
font-weight:bold;
display:block;
width:8em;
padding:0.1em;
background:#6666FF; color:#FFFFFF;
text-decoration:none;
}
ul a span {
display:block;
float:left;
width:5em;
padding-right:0.1em;
margin-right:0.1em;
background:#FFFFFF;
color:#6666FF;
text-align:right;
}
ul a:hover {
background:#666666; color:#CCCCCC;
}
ul a:hover span {
background:#CCCCCC; color:#333333;
}
li{list-style-type:none; margin:1em;}

幅や色をいじれば 色んな事ができるかと。