Bootstrapでテーブルのダークモードを最適化！罫線・ストライプ・ホバーを見やすく調整する方法

1. ダークモード用のテーブルクラス（table-dark）

1. ダークモード用のテーブルクラス（table-dark）

Bootstrapでテーブルをダークモードに対応させる最も簡単で強力な方法が、table-dark クラスの使用です。このクラスを適用するだけで、テーブルの背景が深いグレー（黒に近い色）になり、文字色が自動的に白抜きへと切り替わります。

プログラミングに慣れていない方でも、HTMLの <table> タグにこのクラスを一つ追加するだけで、一気にWebサイトの雰囲気をモダンな「ダークテーマ」へ変えることができます。例えば、夜間の閲覧時やスタイリッシュな管理画面を作りたいときに、この設定は欠かせません。基本となる「table」クラスと一緒に記述するのがルールです。

<table class="table table-dark">
    <thead>
        <tr>
            <th>ID</th>
            <th>ユーザー名</th>
            <th>登録ステータス</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>001</td>
            <td>田中 太郎</td>
            <td>有効</td>
        </tr>
        <tr>
            <td>002</td>
            <td>佐藤 花子</td>
            <td>停止中</td>
        </tr>
        <tr>
            <td>003</td>
            <td>鈴木 一郎</td>
            <td>有効</td>
        </tr>
    </tbody>
</table>

上のコードを見ると、背景が暗くなることで情報のコントラストがはっきりし、プロが作ったような洗練された印象になります。まずはこの基本のクラスを覚えて、ダークモード対応の第一歩を踏み出しましょう。

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

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. ストライプで見やすさをアップ

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. ホバーで操作性を高める

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. ストライプとホバーを同時に使う

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

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

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

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

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