Archive

CSS Tips 的

ひとつ前のエントリーで border-style だけでひとつエントリー書けそう、なんて書いたけれども、いざ向かい合ってみると面倒で書く気にならなかったので割愛。

Tips 的とか書いたので、参考までに何か書いておこうとか思ったりする。

以下のソースでタブっぽいような感じになるかも知れません。

HTML
<ul class="menu">
<li><a href="menu1.html">Menu 1</a></li>
<li><a href="menu2.html">Menu 2</a></li>
<li><a href="menu3.html">Menu 3</a></li>
</ul>

これに、

CSS
ul {
border-bottom: 1px solid #000;
padding: 0;
}
ul li {
border: 1px solid #000;
border-bottom: none;
display: inline;
margin: 0;
}
ul li a:link, ul li a:visited {
color: #000;
text-decoration: none;
}
ul li a:hover, ul li a:active {
background-color:#333;
color:#ccc;
}

多分これでそれっぽくなるはず。あとは ul に word-spacing 設定するか、li に margin-left, margin-right でも入れておけば多分なんとかなるはず。確認してないので適当に数値変えてみたりするといいかも知れない。多分。

Comments

Trackback