CodeZine(コードジン)

特集ページ一覧

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

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

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

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

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

図3 行にカーソルを乗せるとハイライト表示するテーブル(sample03.html)
図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;
}

  • 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