表を一行ごとに色分けする

1月 | 2013 | comemo | ページ 12

WordPress.com のCSS編集機能は、CSS3にもだいたい対応するようになっているようなので(詳細に調べたわけではありません。使っていてのなんとなくの感触です)、Web 上で紹介されているCSSをそのまま WordPress.com のブログにもだいたい適用できるようになっているようです。

今回は、表を一行ごとに色分けする方法について、ネットで検索し、WordPress.com でも適用できることを実際に確認してみました。試してみたCSSは、以下の記事で紹介されていたものです。

tablecolor01
テーブルやリストを一行ごとに背景色を付ける | CSSリファレンス

以下のCSSをCSSスタイルシートエディターに入力すると、

tr:nth-child(even) {
	background-color: #c8ebfa;
}

たしかに表が一行ごとに色分け(奇数行の背景色が「#c8ebfa」に設定)されました。

tablecolor03rect3015tablecolor04

なお、記事「CSS3 :nth-child() Selector」によると、ie8 などでは機能しないようですが、装飾として使っているぶんには、特に問題ないかな、と個人的には思います。

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。