リストタグのメニューをCSSで装飾してみる
以前にXHTMLが主流になる前に、何度かHTML Strict+CSSでコンテンツとスタイルを分離させたコーディングをしたことがあったが、それから機会がなくて全然スタイルシートを触っていなかったので、改めて勉強してみた。
ベースのHTMLはこれ。
<body id="m-bbb">
<ul>
<li id="aaa"><a href="#">aaa</a></li>
<li id="bbb"><a href="#">bbb</a></li>
<li id="ccc"><a href="#">ccc</a></li>
</ul>
<p>aaa</p>
</body>
とりあえずメニューバーの形にしてみる。
* {
margin: 0; padding: 0;
}
ul {
background-color: #ccc; width: 180px;
}
li {
list-style-type: none;
}
li a {
width: 163px; display: block; padding: 5px 5px 5px 10px; border: solid 1px #666;
}
a:hover {
color: #c00; background-color: #fcc; border: solid 1px #f00;
}
/* 活性ラベル */
body#m-bbb ul li#bbb a {
color: #000; background-color: #fff; border: solid 1px #aaa;
}
body#m-bbb ul li#bbb a:hover {
color: #333; background-color: #ffa; border: solid 1px #ddd;
}
/* Win IEバグ対応 */
li a {
_width: 180px;
}
liをインライン要素にしてタブの形にしてみる。
* {
margin: 0px; padding: 0px;
}
ul {
margin: 10px; padding-bottom: 5px; border-bottom: solid 1px #a00;
}
li {
display: inline; margin: 5px; padding: 5px; border: solid 1px #a00; background-color: #a00;
}
li a {
color: #fff;
}
a:hover {
}
/* 活性ラベル */
body#m-bbb ul li#bbb {
background-color: #fff; border-bottom: solid 1px #fff;;
}
body#m-bbb ul li#bbb a {
color: #a00;
}
/* Win IEバグ対応*/
ul {
_padding-bottom: 4px;
}
li {
_padding: 4px;
_margin: 6px;
}
liをfloatさせてタブの形にしてみる。
* {
margin: 0; padding: 0;
}
ul {
margin: 5px; padding-bottom: 1px; border-bottom: solid 1px #a00;
}
li {
list-style-type: none; float: left; margin: 0 20px; text-align: center; border: solid 1px #a00;
}
li a {
display: block; width: 120px; background-color: #a00; color: #fff;
}
a:hover {
background-color: #f00;
}
/* floatした際の親要素の高さを調整 */
ul:after {
content: ".";clear:both;visibility:hidden;
}
ul {
height: 1%;
}
/* 活性ラベル */
body#m-bbb ul li#bbb {
border-bottom: solid 1px #fff;
}
body#m-bbb ul li#bbb a {
color: #a00; background-color: #fff;
}
/* Win IEバグ対応*/
ul {
_padding-bottom: 0px;
}
コメント
さすがだよ！
アンタぁオレの1000倍配色のセンスいいよ！orz
投稿者: はやじょ | 2005年07月26日 12:28
まあ、一応それが仕事だからね…。
でも、デザインもCSSもやらないと忘れる一方ですね。
投稿者: まこじょ | 2005年07月27日 06:04