スタイルシート(CSS)の技

TOP > CSS >リンクの見栄えをクラスやIDで切り替えるスタイルシート(CSS)の技
このエントリーをはてなブックマークに追加

リスト(UL, LI)とリンク(A)を使用したCSS

CSS

.ul_test1 li { border-bottom:1px solid gray; background-color:#eee; }
.ul_test1 li:hover { background-color:blue;  }
.ul_test1 li a { display: block; }

HTML

<ul class="ul_test1">
<li><a href="./blank.html">あいうえお</a></li>
<li><a href="./blank.html">かきくけこ</a></li>
<li><a href="./blank.html">さしすせそ</a></li>
</ul>

実行例 (マウスオーバーして下さい。)

リンクに関するスタイルシートの技