【CSS】リストやテーブルをしましまにするには？
2019/06/21
リストやテーブルをしましまにしているサイトを良く見かけます。
ちょっと前まではjqueryを使ってcssのクラスを適用する方法がありましたが、
今はcssだけで対応できるようになっているらしく、調べてみたら簡単に実装できました。
スポンサードサーチ
CSSの疑似クラスの:nth-child(n) を使う
CSSの疑似クラスの:nth-child(n)を使えば超カンタン！
リストタグを例にサンプルコードです。
li:nth-child(2n)
liの偶数番目に背景色が付きます。
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>
<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;
}
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>
<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>
<script>
$(function() {
$(".simasima li:nth-child(2n)")
.addClass("simasima_bg");
});
</script>
CSS
.simasima_bg{
background:#EEE;
}
background:#EEE;
}
SPONSORD LINKS
スポンサーリンク
関連記事
関連記事はありませんでした