loading
 読み込み中...
ウェブの触手-日々の生活に新たなスパイスを-
アイキャッチ画像
Home > [ウェブデザイン] > 【CSS3】表テーブルで1行おきに色を付けるやり方とマウスオーバーで行をハイライトするやり方
この記事は約4分で読めます。

【CSS3】表テーブルで1行おきに色を付けるやり方とマウスオーバーで行をハイライトするやり方

投稿日:2017.11.7

表テーブルを作る時、簡単な表ならさほど気にする必要はないんですが、
項目が多かったり縦に長い表だったりする時は
若干見にくい表になる場合もありえます。

たとえば同一行内にいくつもの項目があったりすると、左端と右端のデータを参照する時、
「この数値に対応するデータはここの数字だよな」なんて
何度も目線を左に右にわしてみた経験はないですか?

あるいはマウスで行を横になぞってみて同一行であることを確認したりとか。

この場合、今どの行のデータを見ているのかが
明示的にわかるととても便利ですよね。

今回はサイト訪問者にやさしい表テーブル作りのTipsをご紹介します。

↓↓↓簡単にサイトが作れる次世代ツール↓↓↓

SIRIUSレビューイメージ画像

1行おきに背景色を変える

行の背景色1行おきに変えてあげると視認性は一気に高まるってもんです。

例えばこんなHTMLで作った表があるとします。

 

これを実際に表示させたのがコチラ↓。

  分量 糖質 カロリー
ごはん お茶碗1杯(150g) 55.2g 252kcal
切り餅 1個(50g) 24.8g 118kcal
食パン 1枚(50g) 22.2g 132kcal
マフィン 1個(75g) 29.7g 171kcal
クリームパン 1個(70g) 28.2g 214kcal
ロールパン 1個(30g) 14.0g 95kcal
ピザ 1切れ 34g 214kcal
シリアル 1食分(50g) 43.5g 191kcal
パスタ
(乾麺)
1人前(90g) 62.6g 340kcal
うどん
(ゆで)
1食分(220g) 52.0g 263kcal
そうめん
(乾麺)
1食分(100g) 67.1g 342kcal
そば
(ゆで)
1食分(180g) 43.2g 238kcal
インスタント
ラーメン
麺1食分(90g) 53.1g 412kcal
小麦粉
(薄力粉)
100g 73.5g 368kcal
片栗粉 大さじ1 7.3g 29kcal

いかがでしょう、項目が多いので若干見にくい面があるかと思うのですが。

しかしこれがもし背景色が1行おきに変わってたとしたらどうでしょう。

こちら↓が実際に1行おきに背景色を変えた改良版です。

  分量 糖質 カロリー
ごはん お茶碗1杯(150g) 55.2g 252kcal
切り餅 1個(50g) 24.8g 118kcal
食パン 1枚(50g) 22.2g 132kcal
マフィン 1個(75g) 29.7g 171kcal
クリームパン 1個(70g) 28.2g 214kcal
ロールパン 1個(30g) 14.0g 95kcal
ピザ 1切れ 34g 214kcal
シリアル 1食分(50g) 43.5g 191kcal
パスタ
(乾麺)
1人前(90g) 62.6g 340kcal
うどん
(ゆで)
1食分(220g) 52.0g 263kcal
そうめん
(乾麺)
1食分(100g) 67.1g 342kcal
そば
(ゆで)
1食分(180g) 43.2g 238kcal
インスタント
ラーメン
麺1食分(90g) 53.1g 412kcal
小麦粉
(薄力粉)
100g 73.5g 368kcal
片栗粉 大さじ1 7.3g 29kcal

どうですか、前よりもさらに見やすくなったと思うのですが。

これはスタイルシートに以下を加筆すればOKです。

1行目の「nth-child(even)」というのが「偶数(even)番目の行」という意味で、
2行目の「background-color」背景色を指定(#ECECEC)してます。

#sampleというIDは今回の表につけたIDです。

背景色も今回はたまたま”#ECECEC”にしたまでのことです。

奇数行にしたければ「tr:nth-child(odd)」と変えればOKです。

 

スポンサーリンク

マウスオーバーで行ハイライト

続いてマウスオーバーした時に背景色を変えるやり方です。

これはマウスオーバーを意味する”hover”を使って
以下のように書けばOKです。

(2行目の背景色はお好きなモノに変えてください。)

 

そして実際の表示例がコチラ↓。

マウスを乗せるとその行全体の背景色が変わります。

(今回の例はPC上で閲覧時に効果の出るTipsです。スマホの場合はマウスオーバーという概念がなく、タップすると色が変わります)

  分量 糖質 カロリー
ごはん お茶碗1杯(150g) 55.2g 252kcal
切り餅 1個(50g) 24.8g 118kcal
食パン 1枚(50g) 22.2g 132kcal
マフィン 1個(75g) 29.7g 171kcal
クリームパン 1個(70g) 28.2g 214kcal
ロールパン 1個(30g) 14.0g 95kcal
ピザ 1切れ 34g 214kcal
シリアル 1食分(50g) 43.5g 191kcal
パスタ
(乾麺)
1人前(90g) 62.6g 340kcal
うどん
(ゆで)
1食分(220g) 52.0g 263kcal
そうめん
(乾麺)
1食分(100g) 67.1g 342kcal
そば
(ゆで)
1食分(180g) 43.2g 238kcal
インスタント
ラーメン
麺1食分(90g) 53.1g 412kcal
小麦粉
(薄力粉)
100g 73.5g 368kcal
片栗粉 大さじ1 7.3g 29kcal

いかがです?

だいぶ見やすくなったんじゃないでしょうか。

記事はお役にたてましたか?

記事にご興味をもっていただけましたら
下のソーシャルボタンで共有していただけると嬉しいです^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

スポンサーリンク

おススメTCDテーマ

WordPressテーマ「NEXTAGE (tcd021)」

コメント(0件)

コメントをどうぞ

入力いただいたメールアドレスは公開されません。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

先頭へ