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

生徒

「Bootstrapのテーブルって見やすいですけど、色や罫線を自分の好みに変えることはできますか？」

先生

「はい、できますよ。BootstrapではSassという仕組みを使って、配色や罫線のスタイルを変数でまとめて管理できます。」

生徒

「変数って聞くと難しそうですが、どういうイメージですか？」

先生

「変数は“名前をつけた箱”のようなものです。箱に色の情報を入れておけば、何度でも同じ色を呼び出せます。つまり、テーブルの配色やストライプ模様を簡単に統一できるんです。」

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

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

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

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

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

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

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>