テーブルのデザインをかっこ良くしたい
表のデザインを一行ずつ変更したい
価格表やデータなどは、表を使う事によってわかりやすく、そして見やすいものに変化します。見やすくする代表的なデザインは、一行ずつデザインを変更するというものです。
このような表を見たことはありませんが、一行毎にデザイン背景の色を変化させることで、視点が上下にずれることを防止して、読みやすくなっています。
| 名前 | 身長 | 体重 | 胸囲 | 足のサイズ |
|---|---|---|---|---|
| タナカ | 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の公式サイト
1 | <script type="text/javascript" src="/ご自身のサーバーの設置フォルダ名/jquery-1.8.1.min.js"></script> |
また、サーバーへの設置が難しいようであれば、下記の一文をただ追加するだけ、設置が完了します。この記述は、外部のJqueryファイルを読み込む形式ですので、外部のサーバーがダウンしたり、ファイルが削除されたりすると、機能しなくなるので、注意が必要です。ご自身のサーバーに設置することをオススメします。
1 | <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script> |
テーブルを作成する
上記の例は、このようなソースを使っています。idは任意のものを使用してもらって構いません。
thは項目名、tdはデータの内容を記載するようにテーブルを制作しましょう。
1 2 3 4 5 6 7 8 | <table id="tableStyle01" style="width:100%;text-align:center;"> <tr><th>名前</th><th>身長</th><th>体重</th><th>胸囲</th><th>足のサイズ</th></tr> <tr><th>タナカ</th><td>190cm</td><td>51kg</td><td>90cm</td><td>25.5cm</td></tr> <tr><th>スズキ</th><td>150cm</td><td>151kg</td><td>110cm</td><td>29cm</td></tr> <tr><th>キムラ</th><td>162cm</td><td>70kg</td><td>100cm</td><td>28.5cm</td></tr> <tr><th>サトウ</th><td>181cm</td><td>63kg</td><td>150cm</td><td>23.5cm</td></tr> <tr><th>モリシタ</th><td>175cm</td><td>41kg</td><td>80cm</td><td>32.5cm</td></tr> </table> |
Jqueryで表をデザインする
上記の例で、idの設定を「tableStyle01」としました。任意の名前を使っている場合は、この部分を統一するようにしましょう。evenは偶数行、oddは奇数行をそれぞれ表しています。
.cssは、cssの設定を追加するという意味です。この場合は、background-colorに任意の色を設定するという内容になります。たったこれだけの設定で全てのテーブルを操作することができます。
1 2 3 4 5 6 | <script> $(document).ready(function(){ $('table#tableStyle01 tr:even').css('background-color', '#FF9966'); $('table#tableStyle01 tr:odd').css('background-color', '#993300'); }); </script> |
まとめ
大量にある表をどのようにデザイン管理するのか？それが今までは課題でした。テーブルの種類毎にデザインを変更したい場合は、idの名前を複数作り、適用すれば簡単に行えます。統一感のある表はホームページの信頼性を高めることができます。Jqueryを使うともっとリッチなコンテンツも作ることができるので、管理面で特に大きな時間的コストの削減を行うことが可能です。
Amazonで購入したおすすめ商品
お疲れ様です。パソコン仕事は体を痛めます。長時間のパソコン仕事で、肩や目が痛い方はこちらがおすすめです。
快適な環境で仕事をしたいですね。
肩が上がらない。姿勢が悪くなる。
腕を広げてタイピングできるので、肩への負担が軽減されます。
目の奥が痛い！時に。
画面の色を損なうことなく、パソコンを長時間見るときに役立ちます。
見た目はエッジが効いている？ので、集中モードの時に。
ネットが遅くて困る！接続数足りてる？
パソコン・スマホ・タブレットを８０台まで接続できてこの値段。
