スポンサードリンク

一行おきにテーブルの行のデザインを変更する方法。無料で簡単Jqueryを使ってみませんか?

わかりやすい表を制作する
テーブルのデザインをかっこ良くしたい
表のデザインを一行ずつ変更したい

価格表やデータなどは、表を使う事によってわかりやすく、そして見やすいものに変化します。見やすくする代表的なデザインは、一行ずつデザインを変更するというものです。
このような表を見たことはありませんが、一行毎にデザイン背景の色を変化させることで、視点が上下にずれることを防止して、読みやすくなっています。

名前 身長 体重 胸囲 足のサイズ
タナカ 190cm 51kg 90cm 25.5cm
スズキ 150cm 151kg 110cm 29cm
キムラ 162cm 70kg 100cm 28.5cm
サトウ 181cm 63kg 150cm 23.5cm
モリシタ 175cm 41kg 80cm 32.5cm

一行一行色をつけていくのは大変。全ての表を同じデザインスタイルに統一したい。
そんな時にjqueryを使うと、簡単に設定ができます。Jqueryは、無料のJavascriptのライブラリで、どなたでも利用できます。このページでは、Jqueryの導入方法と、テーブルのデザイン変更について少しご説明します。

Jqueryを使う

もし、現在Wordpressを使われているのであれば、もしかしたら、既に導入されているかもしれません。それほどメジャーで誰でも使っているJavasriptのプラグインです。
ご自身のホームページが既にJqueryを使っているかどうかは、ソースをご覧いただければわかると思います。ソースを開いて、「jquery」という文字で検索をかけてみてください。該当するものがあれば、既に導入済みだと思います。なぜ既に導入されているかというと、使用しているプラグインが、Jqueryで開発されている場合、プラグインを「有効化」した時に、Jqueryのライブラリも導入されているからです。

Jqueryは動きを制御する機能を追加するのが主な特徴です。スライドショーやアコーディオン型のメニューなどは、主にJqueryが使用されている場合が多いです。
調べてみて、導入されていないのでしたら、下記のホームページからダウンロードして、設置してください。
Jqueryの公式サイト

また、サーバーへの設置が難しいようであれば、下記の一文をただ追加するだけ、設置が完了します。この記述は、外部のJqueryファイルを読み込む形式ですので、外部のサーバーがダウンしたり、ファイルが削除されたりすると、機能しなくなるので、注意が必要です。ご自身のサーバーに設置することをオススメします。

テーブルを作成する

上記の例は、このようなソースを使っています。idは任意のものを使用してもらって構いません。
thは項目名、tdはデータの内容を記載するようにテーブルを制作しましょう。

Jqueryで表をデザインする

上記の例で、idの設定を「tableStyle01」としました。任意の名前を使っている場合は、この部分を統一するようにしましょう。evenは偶数行、oddは奇数行をそれぞれ表しています。
.cssは、cssの設定を追加するという意味です。この場合は、background-colorに任意の色を設定するという内容になります。たったこれだけの設定で全てのテーブルを操作することができます。

まとめ

大量にある表をどのようにデザイン管理するのか?それが今までは課題でした。テーブルの種類毎にデザインを変更したい場合は、idの名前を複数作り、適用すれば簡単に行えます。統一感のある表はホームページの信頼性を高めることができます。Jqueryを使うともっとリッチなコンテンツも作ることができるので、管理面で特に大きな時間的コストの削減を行うことが可能です。

Pocket
LinkedIn にシェア


スポンサードリンク