Bootstrapでテーブルをカスタマイズ！Sassと変数で配色や罫線を統一しよう

1. Sassと変数でテーブルを統一するメリット

1. Sassと変数でテーブルを統一するメリット

Bootstrapはあらかじめ便利なデザインが用意されていますが、そのままだとプロジェクトごとに「色がバラバラ」「罫線の濃さが統一されない」といった問題が出やすくなります。そこで役立つのがSass（サス）です。

SassはCSSをより便利に書ける仕組みで、特に「変数」が重要です。変数を使えば、例えば「表の背景色は水色」「罫線は薄いグレー」と一度決めたら、全てのテーブルに一括で反映できます。これにより、修正も楽になり、デザインが整って見やすくなるのです。

2. Bootstrapのテーブルをカスタマイズする基本

2. Bootstrapのテーブルをカスタマイズする基本

Bootstrapでは、.table クラスを使うだけで表がきれいに表示されます。さらに .table-striped を追加すると、交互に背景色が付くストライプ模様のテーブルになります。

ただし、その色や罫線のスタイルはデフォルトのままです。これを自分の好みに変えるには、Sassの変数を編集します。変数を設定するときは、Bootstrapが提供している公式の変数名を上書きするのが基本です。

3. 実際のカスタマイズ例

3. 実際のカスタマイズ例

例えば、テーブルの背景色を淡い水色にして、罫線を薄いグレーに統一する場合を考えましょう。Sassでは次のように書きます。

<style>
    /* テーブルの背景色と罫線色を変数で管理 */
    $table-bg: #e6f7ff;
    $table-border-color: #cccccc;
    $table-striped-bg: #f0faff;

    /* Bootstrapのテーブルに反映するカスタムCSS */
    table.table {
        background-color: $table-bg;
        border: 1px solid $table-border-color;
    }

    table.table tr {
        border-bottom: 1px solid $table-border-color;
    }

    table.table-striped tbody tr:nth-of-type(odd) {
        background-color: $table-striped-bg;
    }
</style>

<table class="table table-striped">
    <thead>
        <tr>
            <th>名前</th>
            <th>年齢</th>
            <th>職業</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>田中</td>
            <td>25</td>
            <td>エンジニア</td>
        </tr>
        <tr>
            <td>佐藤</td>
            <td>30</td>
            <td>デザイナー</td>
        </tr>
    </tbody>
</table>

4. 変数を使うと修正が簡単になる

4. 変数を使うと修正が簡単になる

もし「罫線の色を黒にしたい」となった場合でも、$table-border-color の変数を書き換えるだけで済みます。全てのテーブルに自動的に反映されるので、1つ1つ手作業で直す必要はありません。

これは、まるで「お店の制服を一気に作り直す」ようなものです。制服の色を一度決めれば、従業員全員が同じ服を着られるように、変数を設定するだけで全ての表に統一感が出るのです。

5. 初心者におすすめの工夫

5. 初心者におすすめの工夫

初心者の方がSassを使うときには、次の工夫をすると分かりやすくなります。

• 色の変数は「$table-bg-light」や「$table-border-gray」のように、名前に意味をつける
• 背景色・罫線色・ストライプ色を3つだけ決めて、まずはシンプルに始める
• 色を変えるときは必ず変数だけを書き換えるようにして、直接数値を埋め込まない

こうすることで、プロジェクトが大きくなっても整理された状態で保てます。検索エンジンからも「Bootstrap Sass テーブル カスタマイズ」「テーブル ストライプ 変数 統一」といったキーワードで記事が見つかりやすくなるでしょう。

まとめ

まとめ

BootstrapテーブルとSass変数の考え方を整理しよう

この記事では、Bootstrapのテーブルをカスタマイズする方法として、 Sassと変数を使って配色や罫線を統一管理する考え方を学びました。 Bootstrapの table クラスは、 そのまま使っても十分に見やすいデザインですが、 実際のWebサイトや業務システムでは、 「会社のブランドカラーに合わせたい」 「罫線をもっと薄くして見やすくしたい」 「ストライプの色を優しくしたい」 といった調整が必要になる場面が多くあります。 そうしたときに力を発揮するのが、Sassの変数です。

変数を使う最大のメリットは、 色や罫線の情報を一か所にまとめて管理できる点です。 テーブルの背景色、枠線の色、ストライプの色を それぞれ変数として定義しておけば、 デザインを変更したくなったときでも、 変数の値を修正するだけで全てのテーブルに反映されます。 これは、テーブルが増えれば増えるほど、 大きな時間短縮とミス防止につながります。

テーブル配色を統一することの重要性

テーブルは、一覧表示やデータ管理で頻繁に使われる要素です。 配色や罫線がバラバラだと、 利用者は無意識のうちにストレスを感じてしまいます。 Sass変数を使って配色を統一することで、 画面全体に一体感が生まれ、 情報が整理されて見えるようになります。 特に管理画面や業務システムでは、 「見やすさ」「読みやすさ」「疲れにくさ」がとても重要です。 その土台を支えるのが、テーブルデザインの統一です。

また、ストライプテーブルの背景色を調整することで、 行と行の区別がはっきりし、 数字や文字を目で追いやすくなります。 罫線の色を薄めに設定すれば、 情報の区切りを保ちつつ、 全体として柔らかい印象のデザインに仕上げることも可能です。 こうした細かな調整を、 すべて変数で管理できる点が、 Sassを使う大きな価値だと言えるでしょう。

まとめとして確認するテーブルカスタマイズ例

ここで、今回の内容を踏まえた テーブル配色を変数でまとめて管理するサンプルを振り返ります。 背景色・罫線色・ストライプ色を意識することで、 見やすいテーブルを作ることができます。

<style>
    $table-bg: #f5fbff;
    $table-border-color: #d0d7de;
    $table-striped-bg: #eaf4ff;

    table.table {
        background-color: $table-bg;
        border: 1px solid $table-border-color;
    }

    table.table th,
    table.table td {
        border-bottom: 1px solid $table-border-color;
    }

    table.table-striped tbody tr:nth-of-type(odd) {
        background-color: $table-striped-bg;
    }
</style>

<table class="table table-striped">
    <thead>
        <tr>
            <th>商品名</th>
            <th>価格</th>
            <th>在庫</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>ノートパソコン</td>
            <td>120000円</td>
            <td>有</td>
        </tr>
        <tr>
            <td>マウス</td>
            <td>3000円</td>
            <td>無</td>
        </tr>
    </tbody>
</table>

このように、最初に変数を決めておけば、 テーブルが増えても同じルールで管理できます。 後から色を変えたくなっても、 変数を書き換えるだけで済むため、 修正作業がとても楽になります。 初心者の方ほど、 早い段階で「変数で管理する習慣」を身につけることが大切です。