マウスの乗っている行の色を変化させるソース

下記の表は、Firefox、Opera、Internet Explorer 7 以降などのブラウザで閲覧すると、マウスを乗せた行の色が変化します。

タイトル 出版社 作者 発刊日 定価
月詠 -Moon Phase- 11 ワニブックス 有馬 啓太郎 2006/03/25 903円
Rozen Maiden 6 幻冬舎 PEACH-PIT 2006/01/24 620円
涼宮ハルヒの憂鬱 1 角川書店 谷川 流 2003/06/03 540円
魔法先生ネギま! 14 講談社 赤松 健 2006/04/17 410円

このような表を実現するためのソースは、下記のようなものです。

▼表を作るHTML
<table cellspacing="0" cellpadding="0" class="sample">
<tr><th>タイトル</th><th>巻</th><th>出版社</th><th>作者</th><th>発刊日</th><th>定価</th></tr>
<tr><td>月詠 -Moon Phase-</td><td>11</td><td>ワニブックス</td><td>有馬 啓太郎</td><td>2006/03/25</td><td>903円</td></tr>
<tr><td>Rozen Maiden</td><td>6</td><td>幻冬舎</td><td>PEACH-PIT</td><td>2006/01/24</td><td>620円</td></tr>
<tr><td>涼宮ハルヒの憂鬱</td><td>1</td><td>角川書店</td><td>谷川 流 </td><td>2003/06/03</td><td>540円</td></tr>
<tr><td>魔法先生ネギま!</td><td>14</td><td>講談社</td><td>赤松 健</td><td>2006/04/17</td><td>410円</td></tr>
</table>

ほとんど特に説明する箇所のない普通の表(table)です。 スタイルシートで「この表だけ」を装飾できるよう、class属性を使ってクラス名「sample」を付加してあります。

▼スタイルシート
<style type="text/css">
   /* ▼表の装飾(※今回の本題とは無関係の装飾) */
   table.sample { border-collapse: collapse; border: 2px solid black; }
   table.sample th { font-size: 80%; padding: 2px; border-color: #000000 gray; border-style: solid dashed double dashed; border-width: 2px 1px 3px 1px; background-color: #eeeeee; }
   table.sample td { font-size: 80%; padding: 2px; border-color: gray; border-style: solid dashed; border-width: 1px; }
   /* ▼今回の本題:行にマウスが乗ったときの装飾 */
   table.sample tr:hover { background-color: #ffcccc; color: #808080; }
</style>

「 tr:hover 」として、tr要素(表の1行を構成する要素)に対して、「マウスが上に乗ったとき」の装飾を記述しています。
もし、「 td:hover 」と書けば、td要素(表のセル1つ1つを構成する要素)に対して、マウスが乗ったときの装飾を記述できます。

上記の例では、tr要素に対するhover疑似クラスを使って、「tr要素の上にマウスが乗ったときに色を変える(=表の「行」の上にマウスが乗ったときに色を変える)」という装飾になっています。 このとき、行を構成する各セル(td要素)に対して既に色が指定されている場合、そこの色は変化しません。 この方法を使うときは、行を構成する各セルには背景色や文字色を指定しないように注意して下さい。

終わりに

今回は、リンク以外の要素にも:hover疑似クラスを使って装飾の変更が可能なことをご紹介致しました。
情報量の多い表を見やすくするのにも役に立ちますから、ぜひ使ってみて下さい。

関連記事



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。