【Bootstrap】表の行にマウスを合わせたときに色を変える方法

今回は、Vue.jsで表の行にマウスを合わせたときに色を変える方法をご紹介します。

今回はJavaScriptフレームワークVue.jsとBootstrapのバージョン5.0.2を使用しています。

表の行にマウスを合わせたときに色を変える方法
ホバーの色を変える方法
【注意】　.table-hoverクラスを追加し、<style>でも色を指定する場合
まとめ

表の行にマウスを合わせたときに色を変える方法

まず、行にマウスを合わせたときに色を変える方法をご紹介します。

実際に作成した表のサンプルは次のようになります。

サンプルの表の
列項目は「名前」,「年齢」,「出身地」、
行項目は「1」,「2」,「3」としています。

Hello, world!

	名前	年齢	出身地
1	田中	20	東京
2	鈴木	25	大阪
3	佐藤	30	北海道

この行にマウスを合わせたときに色が変わる表のサンプルコードは次のようになっています。

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col" >
      <th scope="col">名前</th>
      <th scope="col">年齢</th>
      <th scope="col">出身地</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>田中</td>
      <td>20</td>
      <td>東京</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>鈴木</td>
      <td>25</td>
      <td>大阪</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>佐藤</td>
      <td>30</td>
      <td>北海道</td>
    </tr>
  </tbody>
</table>

HTMLで基本的な表を作成するには<table>タグを使用します。

そして、<table>タグ内のclassに.tableクラスを<table class="table">のように追加することで、Bootstrapの表スタイルが適用されます。

<table>タグ内のclassに.table-hoverクラスを<table class="table table-hover">のように追加することで、マウスを合わせたときに表の行の色が変わるホバー状態にすることができます。

・基本的な表の作成方法
・表作成で使用するHTMLタグの意味
を知りたい方はこちらの記事を参考にしてください。

【Vue.js】Bootstrapで表（table）を作成する方法

Bootstrapを使用したシンプルな表(table)の作成方法を初心者向けに解説！HTMLタグや属性の説明も含め、具体的なコード例を紹介します。名前、年齢、出身地を表示する実用的なサンプルを見ながら、表の基本スタイルを簡単に適用する方法が学べます。

ホバーの色を変える方法

続いて、ホバーの色を変更する方法を紹介します。

ホバーとは、マウスカーソルを要素の上に重ねた（乗せた）状態のことです。
今回は表の行にマウスを合わせた状態の事を指します。

Bootstrapの.table-hoverクラスを使用すると、ホバーの色は灰色となります。

そこで次は.table-hoverクラスを使用せず、cssのスタイルを実装してホバーの色を灰色以外にしていきます。

実際に作成した表のサンプルは次のようになります。

Hello, world!

	名前	年齢	出身地
1	田中	20	東京
2	鈴木	25	大阪
3	佐藤	30	北海道

サンプルでは、表の行にマウスのカーソルを合わせると水色に行の色が変わるようになっています。

サンプルコードは次のようになります。

<table class="table">
  <thead>
    <tr>
      <th scope="col" >
      <th scope="col">名前</th>
      <th scope="col">年齢</th>
      <th scope="col">出身地</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>田中</td>
      <td>20</td>
      <td>東京</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>鈴木</td>
      <td>25</td>
      <td>大阪</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>佐藤</td>
      <td>30</td>
      <td>北海道</td>
    </tr>
  </tbody>
</table>

<style scoped>
tbody tr:hover {
    background-color:#bce2e8 ;
}
</style>

<style>タグの中でホバーの色を指定します。

今回は<tbody>タグ内の<tr>タグにマウスを合わせた場合、つまり表の本体部分の行にマウスを合わせた場合に背景色background-colorがカラーコードの#bce2e8（水色）に変わるように指定しています。

<style scoped>
tbody tr:hover {
    background-color:#bce2e8 ;
}
</style>

水色以外の色を指定する場合も、色見本を参照して希望の色のカラーコードをbackground-colorに記述することで指定できます。

【注意】　.table-hoverクラスを追加し、<style>でも色を指定する場合

次に、Bootstrapの.table-hoverクラスと<style>タグでの色指定が重複している場合の注意事項をご紹介します。

次のサンプルコードのように、<table>タグ内のclassに.table-hoverクラスを追加し、さらに<style>タグ内でhoverの色を指定してみます。

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col" >
      <th scope="col">名前</th>
      <th scope="col">年齢</th>
      <th scope="col">出身地</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>田中</td>
      <td>20</td>
      <td>東京</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>鈴木</td>
      <td>25</td>
      <td>大阪</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>佐藤</td>
      <td>30</td>
      <td>北海道</td>
    </tr>
  </tbody>
</table>

<style scoped>
tbody tr:hover {
    background-color:#bce2e8 ;
}
</style>

このように記述すると、表の行にマウスのカーソルを合わせて変化する色は.table-hoverクラスの「灰色」と「styleで指定した色」が重なった色になってしまいます。

Hello, world!

	名前	年齢	出身地
1	田中	20	東京
2	鈴木	25	大阪
3	佐藤	30	北海道

表のホバーの色を指定する際は、.table-hoverクラスを追加せず<style>のみで指定すると灰色がかった色にならないのでお勧めです。

まとめ

今回は、Bootstrapを使って表の行にマウスを合わせたときに色を変える方法をご紹介しました。

table-hoverクラスを使えば簡単にホバーを追加できますし、CSSで独自の色に変更することも可能です。

また、table-hoverクラスとCSSの指定が重なると意図しない色になることがあるため、どちらか一方を使うのがおすすめです。

自分のデザインに合った方法で、表を作成してみてください！

vue.jsで表を作成したい方は、こちらの記事もご覧ください。