CodeZine(コードジン)

特集ページ一覧

デザインサンプルで学ぶCSSによるスタイリング~「テーブル(ハイライト表示/縦列のスタイリング)」編

CSSで作るWeb用パーツ(4)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2014/07/17 17:15
目次

行と列をハイライト表示するテーブル

 最後に、図4のような、行と列をハイライト表示するテーブルをスタイリングしてみましょう。さきほどの例では、列の背景色と行のハイライト色が乗算されるように設定しましたが、今回のサンプルでは、行も列もハイライト表示させます。

図4 行と列をハイライト表示するテーブル(sample04.html)
図4 行と列をハイライト表示するテーブル(sample04.html)

col要素で縦列をマークアップする

 HTMLは次のようになります。tableに「zebra」というIDを付け、縦列はcol要素を5列分の5個配置してマークアップしています。

リスト9 横行と縦列をハイライト表示するテーブル/HTML(sample04.html)
<table id="zebra">
  <caption>都道府県と県庁所在地</caption>
  <colgroup id="no">
    <col /><col /><col /><col /><col />
  </colgroup>
  <thead>
    <tr>
      <th>コード</th><th>都道府県名</th><th>ふりがな</th><th>県庁所在地</th><th>ふりがな</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>01</td><td>北海道</td><td>ほっかいどう</td><td>札幌市</td><td>さっぽろし</td>
    </tr>
~中略~
  </tbody>
</table>

テーブルの背景の概念

 さきほどのサンプルでは、列に対して行のハイライトであったため、「tr:hover」で簡単にハイライト色を乗算させることができました。今回のサンプルは「tr:nth-child(even)」で、偶数行ごとに背景色を付けたゼブラテーブルにしていますが、この行に対してもハイライト色を乗算させたいので、「tr:hover」を使うことができません。これを使うとホバー時のスタイルが優先され、ゼブラの背景色のスタイルは無効になるからです。

 ここで、テーブルの背景の概念を確認しておきましょう。テーブルの背景は、図5のように上から「セル、行、行グループ、列、列グループ、テーブル」の順でレイヤーになっていると考えてください。

図5 テーブルのレイヤー(sample04.html)
図5 テーブルのレイヤー(sample04.html)

jQueryの利用

 話を戻して、サンプルでは、「tr:nth-child(even)」で偶数行に背景色を付けたので、ホバー時に色を乗算させたい場合は、行の上のセル、つまりtdに背景色を付ける必要があります。横一行なので、その行のtdすべてが対象になります。また、colgroupやcol要素は「:hover擬似クラス」が効かないため、列のハイライト表示も他の方法を考える必要があります。そこで、jQueryで次のような機能を付けてみました。

  • カーソルが乗ったセル(td)に「on」というクラス名を付ける
  • カーソルが乗ったセルと兄弟要素のセルに「hover」というクラス名を付ける
  • カーソルが乗ったセルが何番目のセルかを取得し、同じ順番にあるcol要素に「hover」というクラス名を付ける
リスト10 横行と縦列をハイライト表示するテーブル/jQuery(sample04.html)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script stype="text/javascript">
$(function(){
  $('#zebra td').hover(function() {
    $(this).toggleClass('on');
    $(this).siblings().toggleClass('hover');
    $('#zebra col:eq('+$(this).index()+')').toggleClass('hover');
  });
});
</script>

 あとは、CSSでそれぞれのクラスに対し背景色を指定するだけです。ここでは偶数行に薄いブルー、ハイライトにイエローを指定しました。rgba()で半透明を設定しているので、偶数行にカーソルが乗った場合は、色が乗算されてグリーンっぽくなります。

リスト11 横行と縦列をハイライト表示するテーブル/HTML(sample04.html)
tbody tr:nth-child(even){ /*偶数行の色 */
  background-color: rgba(204,255,255,0.5);
}
col.hover, td.hover{ /* 列と行(のセルすべて)のハイライト */
  background-color: rgba(255,255,102, 0.3);
}
td.on{ /* カーソルの乗ったセル */
  background-color: rgba(255,255,102,0.5);
} 

まとめ

 本記事では、テーブルの列をスタイリングする際に覚えておくと良いポイントを紹介しました。colgroupとcol要素は、使えるプロパティが限定的ですが、CSS3のセレクタやjQueryと合わせて使うことで、スタイルを適用できることがお分かりいただけたと思います。

 次回は、CSSを使ったフォームのスタイリング方法をご紹介します。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:CSSで作るWeb用パーツ

もっと読む

著者プロフィール

  • WINGSプロジェクト 宮本麻矢(ミヤモト マヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5