PR

CSS3で視認性の高いテーブルを作る

2011年8月4日(木)
宮本 麻矢(著)山田 祥寛(監修)

こんなに便利 :nth-child()

今回はCSS3で追加された:nth-child()擬似クラスを使って、1行ごとに背景色を変えて表示するゼブラテーブルや、土曜・日曜・祝祭日に平日と異なるスタイルを適用させたカレンダーなどを作成してみましょう。

:nth-child()擬似クラスの書式はE:nth-child(n)で、ある要素のn番目の子要素Eにスタイルを適用します。例えば、ol li:nth-child(3)とすれば、ol要素の3番目の子要素のli要素にスタイルが適用されます。

次の例は、上から順にそれぞれのli要素に、1位から3位までのランキングアイコンを表示するものです。

図1:ランキングアイコン表示例

CSS2.1であれば、次のように、HTML側にidやclass属性を付けて制御するのが一般的です。

[リスト01]CSS2.1の場合のHTMLソース

<ol>
<li class="rank1">ランキング1位</li>
<li class="rank2">ランキング2位</li>
<li class="rank3">ランキング3位</li>
</ol>

CSS3の:nth-child()擬似クラスを使えば、スタイルの適用先を細かく指定できるので、次のようにHTMLコードはシンプルなままでOK、スタイルのためのコードを追記する必要はありません。

[リスト02]CSS3の場合のHTMLソース:ランキング表示(rank.html)

<ol>
<li>ランキング1位</li>
<li>ランキング2位</li>
<li>ランキング3位</li>
</ol>

:nth-child()擬似クラスを使ったランキングアイコン表示のCSSソースは次のようになります。

[リスト03]:nth-child()擬似クラスを使ったランキング表示(rank.css)

ol li:nth-child(1) {
  background: url("../img/rank1.gif") no-repeat left center;
}
ol li:nth-child(2) {
  background: url("../img/rank2.gif") no-repeat left center;
}
ol li:nth-child(3) {
  background: url("../img/rank3.gif") no-repeat left center;
}

ol li:nth-child(1)、ol li:nth-child(2)、ol li:nth-child(3)で、それぞれ1~3番目の子要素が、スタイルの適用対象になります。

それぞれbackgroundプロパティで、背景画像を左側に1度だけ表示させています。リストマーカーの画像は、list-style-imageプロパティでも指定できますが、このプロパティでは画像の位置指定ができないため、意図した位置に配置するのが難しくなります。そのため、実務的には、この例のように、backgroundプロパティを使用して、背景画像を左に1度だけ表示させ、リストマーカーとして利用するのが一般的です。

さらに便利な:nth-child()

:nth-child()擬似クラスは、E:nth-child(n)のnにevenやoddを入れて、偶数番目や奇数番目を指定することもできます。さらに、an+bという記述も可能です。nには0から順番に整数が代入されて計算されます。例えば「ol li:nth-child(2n+1)」であれば奇数番目を指定したことになり「ol li:nth-child(odd)」と同じ意味になります。同様に2nであれば偶数番目、evenと同じになります。

次の例では、ol li:nth-child(even)で偶数行に対して背景色を赤、ol li:nth-child(2n+1)で奇数行に対して背景色が黄色になるよう指定しています。

図2:サンプルCSSの実行結果

[リスト04]:HTMLソース(even.html)

<ol>
<li>テスト</li>
<li>テスト</li>
~略~
<li>テスト</li>
<li>テスト</li>
</ol>

[リスト05]:nth-child()擬似クラスの使用例(even.css)

ol li:nth-child(even){  /* (2n)と同様 */
  background-color: red;
}
ol li:nth-child(2n+1){  /* (odd)と同様 */
  background-color: yellow;
}

次のように、ul li:nth-child(3n-2)とすれば、1月から3ヶ月ごとのような場合にも利用できます。

[リスト06]:nth-child(3n-2)の例(3n.css)

ul li:nth-child(3n-2){
  background-color: red;
}

図3:サンプルCSSの実行結果

ol li:nth-child(-n+5)というように指定すれば、最初の要素から複数個指定できます。

[リスト07]:nth-child(-n+5)の例(n5.css)

ol li:nth-child(-n+5){
  background-color: red;
}

図4:サンプルCSSの実行結果

逆に最後から指定したい場合は、:nth-last-child()擬似クラスを使用します。ただし、第2回で紹介したjQueryのセレクタには対応していないので、未対応ブラウザを対応させるには、後述するjQueryプラグイン(http://plugins.jquery.com/)などを利用する必要があります。

[リスト08]:nth-last-child(-n+5)の例(last.css)

ol li:nth-child(-n+5){
  background-color: red;
}

図5:サンプルCSSの実行結果

未対応のブラウザをjQueryで補完

前回の記事で、CSS3をサポートしていないブラウザに対して、jQueryを使用する方法を紹介しましたが、ここでも、IE 8以下のように、:nth-child()擬似クラスをサポートしていないブラウザには、jQueryを使用して対応することにしましょう。

rank.cssに対応していないブラウザのためのrank.jsコードは次のようになります。jQueryの詳しい使い方については、前回の記事を参照していただくとして、ここでは、画像ファイルのurlがhtmlファイルからのパスになる点に注意してください。また、:nth-child()については、他のサンプルも同様の方法で対応できますので、実際のサンプルコードを参照してください。

[リスト09]未対応ブラウザ用コード(rank.js)

$(function(){
  $("ol li:nth-child(1)").css("background", "url('img/rank1.gif') no-repeat left center");
  $("ol li:nth-child(2)").css("background", "url('img/rank2.gif') no-repeat left center");
  $("ol li:nth-child(3)").css("background", "url('img/rank3.gif') no-repeat left center");
});

:nth-last-child()については、jQueryのセレクタに対応していないため、別途、jQueryプラグインなどを利用して対応する必要があります。サンプルでは、nth-last-child selector(http://plugins.jquery.com/project/ba-jquery-nth-last-child-plugin)をダウンロードして保存し、ヘッダで読み込んで利用しています。まずjQuery本体(jquery.js)、次にプラグインファイル(nth-last-child.js)、最後にスタイルを定義したjsファイル(last.js)の順で記述しています。

[リスト10]HTMLソース:jsファイルの指定例

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/nth-last-child.js"></script>
<script type="text/javascript" src="js/last.js"></script>
Think IT会員限定特典
  • 「CSS3で視認性の高いテーブルを作る」サンプルプログラム

著者
宮本 麻矢(著)山田 祥寛(監修)
WINGSプロジェクト

有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表:山田祥寛)。おもな活動は、Web開発分野の書籍/雑誌/Web記事の執筆。ほかに海外記事の翻訳、講演なども幅広く手がける。2011年3月時点での登録メンバは36名で、現在もプロジェクトメンバーを募集中。執筆に興味のある方は、どしどしご応募頂きたい。著書多数。
http://www.wings.msn.to/

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています