CSSデザインカタログ » list » 交互に背景色を入れたリスト : list102

サンプル

  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。
  • テキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。
  • テキストテキストテキストテキストテキストテキストテキストテキストテキスト。
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキスト。

ソース

XHTML
<ul class="list132">
  <li class="odd">テキストテキスト......</li>
  <li class="even">テキストテキスト......</li>
  <li class="odd">テキストテキスト......</li>
  <li class="even">テキストテキスト......</li>
  <li class="odd">テキストテキスト......</li>
</ul>

CSS
ul.list132 li {
  margin: 0 0 1px 15px;
  padding: 10px 15px 10px 29px;
  list-style: none;
}

ul.list132 li.odd {
  background: #CDF2CE url(../img/mk-green-disk.png) no-repeat 15px 11px;
}

ul.list132 li.even {
  background: #E5F2E5 url(../img/mk-green-disk.png) no-repeat 15px 11px;
}

使用画像

mark : mk-green-disk.png

解説

  • li要素にclassをあてることによって奇数番目のアイテムと偶数番目のアイテムを振り分けています。
  • backgroundプロパティで背景色とリストマークを入れています。