ホーム > 素材集 > スタイルシートTIPS > スタイルシートナビ編Part1
スタイルシートナビ編Part1
サンプル
リストを使用したナビゲーションのパターン1です。
画像を使用しないシンプルなバージョンです。
ノーマルなリストにすると、「・」や「■」などをlist-styleで指定できますが、マークなしにしています。
また、メニューの区切りが分かりやすいように、点線で区切りを入れています。ul liにborderを入れると、一番上のメニューの上線が外枠の線と重なって、2重線のようになるため、first-childを使用して、一番上のリストの上線を消しています。
XHTMLソースサンプル
<div id="cssnavi01">
<ul>
<li><a href="#">メニュー１</a></li>
<li><a href="#">メニュー２</a></li>
<li><a href="#">メニュー３</a></li>
</ul>
</div>
CSSソースサンプル
<ul>
<li><a href="#">メニュー１</a></li>
<li><a href="#">メニュー２</a></li>
<li><a href="#">メニュー３</a></li>
</ul>
</div>
#cssnavi01 ul {
background:#CCFFFF;
border:1px solid #CCCCCC;
margin:0;
padding:0;
}
#cssnavi01 ul li {
list-style:none;
border-top:1px dotted #CCCCCC;
margin:0;
padding:5px;
}
#cssnavi01 ul li:first-child {
border-top:none;
}
background:#CCFFFF;
border:1px solid #CCCCCC;
margin:0;
padding:0;
}
#cssnavi01 ul li {
list-style:none;
border-top:1px dotted #CCCCCC;
margin:0;
padding:5px;
}
#cssnavi01 ul li:first-child {
border-top:none;
}
Copyright(C) TAKIKAWA PLANNING OFFICE. All rights reserved.