JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

Bootstrapのコンテキストクラスとは？テーブルの行・セルに色を付ける方法

Bootstrapのコンテキストクラス（Contextual Class）を使うと、テーブルの行や個々のセルの背景色を簡単に変更できます。状態に応じた色分けを行うことで、ユーザーにとって視覚的に分かりやすい表を作成できます。

主なコンテキストクラスの一覧

用意されているクラスは以下のとおりです。

クラス名説明
.active特定の行やセルに、マウスホバー時と同じ色を適用します
.success成功した操作やポジティブな結果を示します（緑系の色）
.warning注意が必要な可能性がある警告を示します（黄色系の色）
.danger危険な、または否定的な可能性のある操作を示します（赤系の色）

使用例：activeクラスの適用

次の例では、テーブルの最初の行（<tr>）にactiveクラスを指定し、背景色をハイライトしています。

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Table</title>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="/scripts/jquery.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    <table class="table">
        <thead>
            <tr>
                <th>科目</th>
                <th>点数</th>
                <th>学生名</th>
            </tr>
        </thead>
        <tbody>
            <tr class="active">
                <td>数学</td>
                <td>90</td>
                <td>Amit</td>
            </tr>
            <tr>
                <td>理科</td>
                <td>80</td>
                <td>Aman</td>
            </tr>
            <tr>
                <td>英語</td>
                <td>85</td>
                <td>Rahul</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

補足ポイント

これらのクラスは行単位だけでなく、<td> や <th> など個別のセルにも適用可能です。また、Bootstrap 4以降では bg-success、bg-warning、bg-danger といった bg-* 系のユーティリティクラスが推奨されているため、利用しているBootstrapのバージョンに合わせて使い分けるとよいでしょう。

  1. HTMLのth要素におけるcolspan属性の使い方をわかりやすく解説

    <th>要素のcolspan属性は、見出しセル（ヘッダーセル）が横方向にまたぐ列の数を指定するために使用されます。テーブルで複数の列にまたがる見出しを作成したい場合に便利な属性です。 colspan属性の基本構文 colspan属性の書き方は以下のとおりです。 <th colspan="num"> ここで「num」には、見出しセルがまたぐ列の数（正の整数）を指定します。たとえば「2」を指定すれば、その見出しセルは2列分の幅を持つことになります。 実装例 それでは、<th>要素のcolspan属性を実装した具体的な例を見てみましょう。以下の

  2. HTMLのcolgroupタグとは？テーブルの列をまとめてスタイルする方法

    <colgroup>タグとは<colgroup>タグは、HTMLテーブル内の1つ以上の列（カラム）をひとつのグループとしてまとめるための要素です。このタグを使うことで、グループに含まれるすべての列に対して、まとめてスタイルを適用できます。セルや行ごとに個別にスタイルを記述する必要がないため、コードがすっきりし、テーブル全体のデザイン管理も効率的になります。主な属性span − 列グループが対象とする列の数を指定します。たとえば「span=3」と設定すると、先頭から3列分が同じグループとして扱われます。使用例それでは、<colgroup>タグを使った実際の実装