KAKIMASSE

ネットで見つけた面白い記事や、役立つのではと感じたネタなどを書いています。

【CSS】リストやテーブルをしましまにするには?

   

リストやテーブルをしましまにしているサイトを良く見かけます。

ちょっと前まではjqueryを使ってcssのクラスを適用する方法がありましたが、
今はcssだけで対応できるようになっているらしく、調べてみたら簡単に実装できました。

CSSの疑似クラスの:nth-child(n)を使えば超カンタン!

リストタグを例にサンプルコードです。

li:nth-child(2n)
liの偶数番目に背景色が付きます。

li:nth-child(2n+1)
liの奇数番目に背景色が付きます。

実際のHTMLタグとCSS例はこんな感じです。
偶数番目に背景色を適用しています。

  • 1列目
  • 2列目
  • 3列目
  • 4列目
  • 5列目

HTML

<ul class="simasima">
<li>1列目</li>
<li>2列目</li>
<li>3列目</li>
<li>4列目</li>
<li>5列目</li>
</ul>

CSS

.simasima li:nth-child(2n){
background-color:#EEE;
}

注意点としては:nth-child()はIE8以下には対応してないため、jqueryを読み込んだ後にaddclassなどで対応する必要があります。

HTMLタグはそのままで、

HTML

<ul class="simasima">
<li>1列目</li>
<li>2列目</li>
<li>3列目</li>
<li>4列目</li>
<li>5列目</li>
</ul>

Javascript

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
$(".simasima li:nth-child(2n)")
.addClass("simasima_bg");
});
</script>

CSS

.simasima_bg{
background:#EEE;
}

 - CSS ,

SPONSORD LINKS

スポンサーリンク

スポンサーリンク

Message

メールアドレスが公開されることはありません。

  関連記事

関連記事はありませんでした