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

CSSで作るWeb用パーツ（4）

行にカーソルを乗せるとハイライト表示するテーブル

　縦列をスタイルの対象とする方法を学んだところで、図3のように縦列をグループごとに色分けし、横行にカーソルを乗せるとハイライト表示するテーブルをスタイリングしてみましょう。

図3　行にカーソルを乗せるとハイライト表示するテーブル（sample03.html）

　HTMLソースは次のようになります。縦列は、colgroup要素で1列、4列、4列にグループ化し、左端の1列にはmonth（月）、次の4列をtokyo（東京）、続く4列にosaka（大阪）というID名を付けました。さらにcolgroup要素内にcol要素を配置して、それぞれ、average（平均気温）、max（最高気温）、min（最低気温）、rain（降水量）というクラス名を付けました。

リスト5　行にカーソルを乗せるとハイライト表示するテーブル／HTML（sample03.html）

<table>
  <caption>東京と大阪の2013年の気象データ</caption>
  <colgroup span="1" id="month"></colgroup>
  <colgroup id="tokyo">
    <col span="1" class="average" />
    <col span="1" class="max" />
    <col span="1" class="min" />
    <col span="1" class="rain" />
  </colgroup>
  <colgroup id="osaka">
    <col span="1" class="average" />
    <col span="1" class="max" />
    <col span="1" class="min" />
    <col span="1" class="rain" />
  </colgroup>
  <thead>
    <tr><th></th><th colspan="4">東京</th><th colspan="4">大阪</th></tr>
    <tr><th>月</th><th>平均気温(℃)</th><th>最高気温(℃)</th><th>最低気温(℃)</th><th>降水量(mm)</th><th>平均気温(℃)</th><th>最高気温(℃)</th><th>最低気温(℃)</th><th>降水量(mm)</th></tr>
  </thead>
  <tbody>
    <tr><td>1月</td><td>5.5</td><td>14.4</td><td>-1.4</td><td>70</td><td>5.2</td～中略～
  </tbody>
</table>

縦列に背景色と境界線を付ける

　サンプルでは、東京（tokyo）と大阪（osaka）のcolgroupを対象に背景色を指定しました。東京と大阪の間の境界線は、東京のcolgroupに右ボーダーを付けて実現しています。スタイルの対象はcolgroup要素なので、borderプロパティが使えるように、テーブルセルのボーダーの表示形式を「border-collapse:collapse;」にする必要があります。

　また、東京・大阪の最高気温（max）と降水量（rain）の縦列には半透明の白を指定して、ストライプにしています。半透明の指定は、CSS3のrgba(R, G, B, A)を使用しています。Red、Green、Blueの値に続けて、カンマで区切って透明度Alphaの値を指定します。透明度は0～1の範囲で、0は完全に透明、1は不透明です。「rgba(255, 255, 255, 0.5);」の場合は半透明の白を50%、という指定になります。

リスト6　縦列に背景色を付ける／CSS（sample03.html）

table{
  border-collapse: collapse; /* colgroupでborderプロパティを使うため、collapseにする */
}
#tokyo {
  background: rgba(255, 230, 230, 1);
  border-right: 5px solid #fff; /* 右側に白の境界線 */
}
#osaka {
  background: rgba(230, 230, 255, 1);
}
.max, .rain {
  background: rgba(255, 255, 255, 0.5); /* 半透明の白を50% */
}

行にカーソルを乗せるとハイライト表示

　同じ要領で、見出しセルには「background: rgba(0, 0, 0, 0.05);」を指定して、不透明の黒を5%指定しています。さらに、カーソルホバー時に横列をハイライトするよう、不透明の黄色を30%乗算しました。不透明にすることで、縦列と横行の色が乗算されてホバー時のハイライトが自然な感じになります。さらにカーソルが乗っているセルは不透明にし、ハッキリと目立たせるようにしています。

リスト7　行にカーソルを乗せるとハイライト表示するテーブル／CSS（sample03.html）

thead tr:nth-child(2) th {
  background: rgba(0, 0, 0, 0.05); /* 半透明の黒を5% */
} 
tbody tr:hover { /* ホバー時の行（横） */
  background: rgba(255, 255, 150, 0.3); /* 半透明の黄色を30% */
}
tbody td:hover { /* ホバー時のセル */
  background: rgba(255, 255, 150, 1); /* 不透明の黄色 */
}

キャプションの装飾

　キャプションは、デフォルトでは、テーブルの上にセンタリングされて表示されますが、「caption-size:bottom;」を指定することでテーブルの下に配置できます。右寄せにするには、「text-align: right;」を指定します。サンプルでは、さらに「:before擬似要素」とcontentプロパティを使って、caption要素の直前に「▲」のアイコンを表示しています。

リスト8　行にカーソルを乗せるとハイライト表示するテーブル／CSS（sample03.html）

caption {
  caption-side: bottom; /* キャプションを下に */
  text-align: right;
  padding-top: 5px;
  font-size: 80%;
}
caption:before {
  content: "▲";
  padding-right: 0.5em;
}