ホームページ作成

【ホームページ作成】マウスが乗った行だけ装飾を変化させる

テーブル（表）の作成・装飾 (HTML,CSS)

更新日：2006年05月15日

マウスが乗った行だけ装飾を変化させる

西村文宏

リンクの上にマウスを乗せたときにリンク文字の装飾を変化させるのによく使われる「hover疑似クラス」は、実はリンク以外に対しても使えます。うまく活用すると、大きな表をとても見やすく（使いやすく）できます。

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

下記の表は、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疑似クラスを使って装飾の変更が可能なことをご紹介致しました。
情報量の多い表を見やすくするのにも役に立ちますから、ぜひ使ってみて下さい。

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！