EC studio EC studio デザインブログ

2010年01月15日投稿者：谷 拓樹

[CSS3小ネタ]CSS3でシマシマの表をつくる – :nth-child

みなさん実務でCSS3は使っていますか？
不定期連載的に、CSS3の小ネタを記事としてあげていこうかと思います。

その前にCSS3って？

この記事を見られている方にはCSS3って何？という方もいると思われるので、ざっくりと概要を説明しますと、

多くのサイトで現在利用されているであろうCSS（カスケーディングスタイルシート）は、現在の主要ブラウザがほぼ対応できているCSS2またはCSS2.1というものになります。CSS3はこれらの次のレベルで、より機能的に装飾を加えることができたり、よりコード量の少なく汎用性の高いHTMLを書くことができるようになるなど、本当はざっくりじゃ全然語れないメリットがあります。

反面そのデメリットとしては、まだこのCSS3というのは各ブラウザで完全に対応できているわけではないということです。というのもまだCSS3の中身はまだまだ議論を交わしながら進められており、まだまだ仕様が不確定なものも多くあります。
そんな中でも、InternetExplorerを除いて、FirefoxやSafari、Google Chrome、Operaといった先進的なブラウザでは早々にCSS3の対応を進めています。※これらのブラウザでも古いバージョンでは未対応の場合もあります。）

この記事ではこのCSS3小ネタを紹介していくわけですが、基本的にInternetExplorerでは紹介する小ネタが使えません。（ブラウザに反映されません。）

しかしながら、ウェブサイトを閲覧するユーザーは多くのブラウザから自分が使い易い・便利なブラウザを選択して利用しています。現状WindowOSが広く普及し、プレインストールされているのがInternerExplorerなのでそのユーザーが多いのですが、すべてとは限らないということです。
これはもちろんサイトによって違いますので、一度ご利用のアクセス解析の、ユーザーが利用しているブラウザはどういうものか、何割のユーザーがどのブラウザを使っているのか調べてみてください。

InternetExplorerが9割以上だ！というサイトでは、残念ながらCSS3を使っても現状ほとんどその恩恵は得られません。
しかしそうでないサイトでは、是非紹介するテクニックで使えるものは試してもらえればと思います。
古いブラウザに対してネガティブな対応をするのではなく、新しいブラウザに対してポジティブな（プログレッシブな）対応をするためだと考えることが重要です。

本題：シマシマな表をつくる

さて前置きが長くなってしまいましたが、本題です。
こういうシマシマに色づけられた表ってよく見かけませんか？
大きな表になるほど、表の行がどれを見ているのかがわかりづらくなってしまったりするので、こうした装飾を施すと可読性が増します。
これを実現するには色々な方法があるのですが、CSS3でやるのがもっとも簡単だと思います。
今回は「:nth-child」という疑似クラス（セレクタ）を紹介します。

サンプル1　何も装飾していないテーブル

HTMLで表を作る場合は基本table要素で組まれるので、table関連のタグで作った表をベースに話を進めます。

では早速サンプル。（InternetExplorer以外で見てくださいね！）

サンプル2　CSS3のnth-childを使ったテーブル（偶数番目に着色）

この装飾の実現にはHTMLはまったく触っていません。
装飾のために適用されているCSSは下記です。

テキスト表示
CSS:
  1. /* サンプル2 */
  2. #sample02 th {
  3.  color: #fff;
  4. }
  5.  
  6. #sample02 thead tr {
  7.  background-color: blue;
  8. }
  9.  
  10. #sample02 tbody tr {
  11.  background-color: white;
  12. }
  13.  
  14. #sample02 tbody tr:nth-child(even) { /* 偶数番目の指定*/
  15.  background-color: skyblue;
  16. }

nth-child(even)　というのがCSS3の部分になります。
この記述は「偶数（even）番目のtd要素に指定したプロパティを適用する」という書き方になります。
これが決まった書き方だと思えば、そんな難しくはないと思います。

例は「偶数番目」だったのですが、「奇数番目」にしたい場合は

サンプル3　CSS3のnth-childを使ったテーブル（奇数番目に着色）

テキスト表示
CSS:
  1. /* サンプル3 */
  2. #sample03 th {
  3.  color: #fff;
  4. }
  5.  
  6. #sample03 thead tr {
  7.  background-color: blue;
  8. }
  9.  
  10. #sample03 tbody tr {
  11.  background-color: white;
  12. }
  13.  
  14. #sample03 tbody tr:nth-child(odd) { /* 奇数番目の指定*/
  15.  background-color: skyblue;
  16. }

と書きます。

サンプルは分かりやすく派手めな色にしましたが、実際にこのシマシマの部分の色のコントラストは抑えめに、彩度や明度でコントロールするのが良いでしょう。

サンプル4　CSS3のnth-childを使ったテーブル（よくある使い方）

テキスト表示
CSS:
  1. #sample04 table {
  2.  border: 1px solid #ccc;
  3. }
  4.  
  5. #sample04 th {
  6.  border: none;
  7. }
  8.  
  9. #sample04 td {
  10.  border-top: 1px solid #ececec;
  11.  border-right: 1px solid #ccc;
  12.  border-bottom: none;
  13.  border-left: 1px solid #ccc;
  14. }
  15.  
  16. #sample04 thead tr {
  17.  border-right: 1px solid #6B97BF;
  18.  border-bottom: 1px solid #6B97BF;
  19.  border-left: 1px solid #6B97BF;F;
  20.  background-color: #7DB1E0;
  21. }
  22.  
  23. #sample04 tbody tr {
  24.  border-bottom: 1px solid #ccc;
  25.  background-color: white;
  26. }
  27.  
  28. #sample04 tbody tr:nth-child(even) {
  29.  background-color: #ECECEC; /* whiteと適度に差がある配色 */
  30. }

なんかそれっぽい感じになりましたね。
最後に応用編で、色だけではなく背景画像なんかもつかってみましょう。

サンプル5　CSS3のnth-childを使ったテーブル（背景画像を使ってよりリッチに）

テキスト表示
CSS:
  1. #sample05 table {
  2.  border: 1px solid #eee;
  3. }
  4.  
  5. #sample05 th {
  6.  border: 1px solid #3FB4DA;
  7. }
  8.  
  9. #sample05 td {
  10.  border: 1px solid #ccc;
  11. }
  12.  
  13. #sample05 thead tr {
  14.  border-top: 1px solid #E2F4FA;
  15.  background:url(../wp-content/uploads/2010/01/bg_th.png) right center repeat-x;
  16. }
  17.  
  18. #sample05 tbody tr td {
  19.  background:url(../wp-content/uploads/2010/01/bg_td.png) right bottom repeat-x;
  20. }
  21.  
  22. #sample05 tbody tr:nth-child(even) td {
  23.  background:url(../wp-content/uploads/2010/01/bg_td_nth.png) right bottom repeat-x;
  24. }

いかがでしょうか？

おまけ

:nth-childを紹介してきたわけなのですが、表をより扱い易いものにするための、CSS2の:hoverをさらに活用してみましょう。
:hoverについてはa:hoverという形で普段使っていると思いますが、a要素以外にも適用できます。しかもこれについてはInternetExplorerの7以上から使えます。
今回おまけとしての紹介にはなりますが、下記に紹介する:hoverを使った表の行をハイライトする方法は対応するブラウザ範囲が広いということで、nth-child以上に活用できるかもしれません。
※一応メインはCSS3ということで。

おまけ

テキスト表示
CSS:
  1. /* おまけ */
  2. #omake table {
  3.  border: 1px solid #eee;
  4.  border-collapse: separate;
  5. }
  6.  
  7. #omake th {
  8.  border-top: 1px solid #E2F4FA;
  9.  border-right: none;
  10.  border-bottom: 1px solid #E2F4FA;
  11.  border-left: none;
  12. }
  13.  
  14. #omake td {
  15.  border-top: 1px solid #fff;
  16.  border-right: 1px solid #ccc;
  17.  border-bottom: 1px solid #ccc;
  18.  border-left: 1px solid #fff;
  19. }
  20.  
  21. #omake thead tr {
  22.  border-top: 1px solid #E2F4FA;
  23.  background:url(../wp-content/uploads/2010/01/bg_th.png) right center repeat-x;
  24. }
  25.  
  26. #omake tbody tr {
  27.  border-bottom: 1px solid #ccc;
  28.  background-color: white;
  29. }
  30.  
  31. #omake tbody tr:nth-child(even) {
  32.  background-color: #ECECEC;
  33. }
  34.  
  35. #omake tbody tr:hover { /* 行にマウスオーバーした時のスタイル */
  36.   background-color: #ccc;
  37. }

まとめ

InternetExplorerで見ると、サンプル1のような普通の表に見えます。
しかしそれ以外の最近のブラウザであれば、サンプル2以降のように見えます。

こうした非常に簡単にできるテクニックが、少ない工数で導入できるのであれば、InternetExplorerユーザーを除いた数割のユーザーに対してだけであっても、サイトにとっては価値のある対応だと思います。
このテクニックを試してみるかどうかは、あなたとそのウェブサイト次第ですが、是非これを機会にCSS3を少しずつでも試してみてください。
※table要素以外でも使えるので色々試してみてください。

今回のサンプルデータはまとめてダウンロードできるようにします。
最後のサンプルで使った画像なども使いたいということであればご自由にお使いください。

CSS3でシマシマの表をつくるサンプルセット

もっと高度なnth-childの使い方や、JavaScriptを利用した方法などを知りたい方は下記の記事が参考になるかと思います。
ASCII.jp：CSS3のセレクターで作るストライプテーブル ｜Web制作の現場で使えるjQuery　UIデザイン入門

また次回は違うCSS3を紹介したいと思います。


関連した記事：
  • 関連する投稿はありません。
この記事にTwitterでコメント

■ IT経営実践会

EC studio が長年培ってきた
全てのIT活用ノウハウをマニュアルで提供！

国内初のGoogle Appsを利用した会員サービスです。

会員専用の掲示板による交流や
定期的に勉強会も実施しています。

中小企業の利益を増やす、IT経営実践会

ブックマークプラス by SEO対策

カテゴリ: HTML/CSS | 投稿者：谷 拓樹 | | コメント (0)
前の記事：
次の記事：

この記事へのコメント (0)

コメントはまだありません。

コメントを投稿

WBSで特集されました
IT経営実践会

取材に関するお問い合わせ

090-1489-4909（担当：大崎）

投稿者
イーセットスマートセキュリティ
カテゴリー
人気のエントリー
最近のエントリー
社長に見せるアクセス解析ツール Web Analyst（ウェブアナリスト）
アーカイブ
代理店制度のご案内
MindManager（マインドマネージャー）でマインドマップ

PING送信プラス by SEO対策
RSSリーダーに登録する
  • はてなRSSに追加
  • livedoor Readerに追加
  • My Yahoo!に追加
  • Googleに追加
  • goo RSSリーダーに追加
  • Bloglinesに追加
  • Technoratiに追加
  • PAIPOREADERに追加
  • newsgatorに追加
  • feedpathに追加

Powered by SEO対策
RSSプラス

RSSの購読者数を増やす
RSSプラスを設置しませんか？

BLOG オフィシャルブログ

社長ブログ
EC studio社長ブログ

ブログを読む

技術ブログ
技術部のブログ

ブログを読む

デザインブログ
デザイン部のブログ

ブログを読む

RECRUIT 採用情報

EC studio 採用情報の詳細はこちら

Copyright© EC studio, All Rights Reserved.