先生と生徒の会話形式で理解しよう

生徒

「先生、Bootstrapでテーブルを作ったら、ダークモードにすると文字や線が見にくくなったんですけど、どうしたらいいですか？」

先生

「ダークモードでは背景が暗くなるので、罫線やストライプの色を調整しないと見づらくなりますね。Bootstrapには便利なクラスが用意されているので、それを組み合わせれば解決できますよ。」

生徒

「ストライプとかホバーって何ですか？」

先生

「ストライプは行ごとに色を交互につけて見やすくする機能、ホバーはマウスを重ねたときに背景色を変えて強調する機能のことです。それでは具体的に見ていきましょう。」

1. ダークモード用のテーブルクラス

Bootstrapには table-dark というクラスがあり、これを使うとテーブル全体をダークテーマにできます。背景が黒っぽくなり、文字が白っぽくなって読みやすくなります。白い紙に黒いペンで書くのと逆で「黒板に白いチョークで書く」イメージです。


<table class="table table-dark">
  <thead>
    <tr>
      <th>番号</th>
      <th>名前</th>
      <th>メール</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>田中</td>
      <td>tanaka@example.com</td>
    </tr>
    <tr>
      <td>2</td>
      <td>佐藤</td>
      <td>sato@example.com</td>
    </tr>
  </tbody>
</table>

ブラウザ表示

2. 罫線を見やすく調整する

罫線とは、テーブルの行や列を区切る線のことです。ダークモードでは線が背景と同化して見づらくなることがあります。table-bordered を使うと、しっかりとした枠線が表示されて見やすくなります。


<table class="table table-dark table-bordered">
  <thead>
    <tr>
      <th>番号</th>
      <th>名前</th>
      <th>メール</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>鈴木</td>
      <td>suzuki@example.com</td>
    </tr>
    <tr>
      <td>2</td>
      <td>高橋</td>
      <td>takahashi@example.com</td>
    </tr>
  </tbody>
</table>

ブラウザ表示

3. ストライプで見やすさをアップ

長いテーブルだと行が多くて目が迷いやすいですが、table-striped を使うと1行ごとに背景が少し変わり、視線を追いやすくなります。まるでノートに罫線が引かれているのと同じように、見やすさが格段に上がります。


<table class="table table-dark table-striped">
  <thead>
    <tr>
      <th>番号</th>
      <th>商品名</th>
      <th>価格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>ノートPC</td>
      <td>120,000円</td>
    </tr>
    <tr>
      <td>2</td>
      <td>スマートフォン</td>
      <td>80,000円</td>
    </tr>
  </tbody>
</table>

ブラウザ表示

4. ホバーで操作性を高める

テーブルの行にマウスを乗せたとき、背景色が変わると「今どこを見ているのか」が分かりやすくなります。Bootstrapでは table-hover を追加するだけで、この機能を有効にできます。ユーザーにとって直感的に分かりやすいデザインになります。


<table class="table table-dark table-hover">
  <thead>
    <tr>
      <th>番号</th>
      <th>カテゴリ</th>
      <th>説明</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>家電</td>
      <td>生活を便利にする製品</td>
    </tr>
    <tr>
      <td>2</td>
      <td>家具</td>
      <td>快適な暮らしを支える製品</td>
    </tr>
  </tbody>
</table>

ブラウザ表示

5. ストライプとホバーを同時に使う

もちろん、table-striped と table-hover を同時に使うこともできます。行の見やすさと操作性を両立できるので、実際のWebサイトでは組み合わせるのがおすすめです。

6. 初心者にも分かる調整の効果

罫線・ストライプ・ホバーを工夫するだけで、同じテーブルでも見やすさが全然違います。例えば、ストライプは「ノートの横罫」、ホバーは「指で行をなぞる」感覚に近く、ユーザーが迷わず情報を読み取れるようになります。Bootstrapのクラスを正しく使えば、初心者でも簡単にプロ仕様の見やすいテーブルを作成できます。