Bootstrapの.table-smを完全解説！テーブルの情報密度を調整して読みやすくする方法
生徒
「Bootstrapでテーブルを作ったら、文字が大きくて一画面に情報が収まらないです。」
先生
「Bootstrapには.table-smというクラスがあり、テーブルの行の高さや余白を小さくできます。」
生徒
「小さくすると読みにくくならないですか。」
先生
「読みやすさを保ちながら情報量を増やす工夫があります。それでは具体的に確認していきましょう。」
1. Bootstrapの.table-smとは何か
Bootstrapのテーブルデザインでは、デフォルト状態では行の余白が広めに設定されています。この余白は見た目が整いやすく初心者でも扱いやすい利点がありますが、データ一覧や管理画面では一度に表示できる情報量が少なくなってしまいます。
.table-smはテーブルの上下余白を縮小して表示するBootstrapの便利な機能です。余白とは文字の上下にある空間のことで、この空間を小さくすることで同じ画面サイズでも多くの行を表示できます。特にデータベース一覧表示や商品一覧、顧客管理画面などで利用されることが多い重要なテーブル装飾です。
Bootstrap初心者の人は、まずテーブルは.tableクラスで作るという基本を覚える必要があります。そのうえで.table-smを追加すると、より多くの情報をコンパクトに表示できます。これは新聞の文字サイズを少し小さくして一ページの情報量を増やすイメージに近いです。
2. 基本の.table-smの使い方
.table-smは非常に簡単に使用できます。通常のBootstrapテーブルに対してクラスを追加するだけで情報密度を調整できます。情報密度とは一つの画面に表示される情報の量を意味します。
初心者の人が最初に覚えるべきポイントは、Bootstrapでは複数のクラスを半角スペースで並べて指定できる点です。この仕組みによりデザインを柔軟に変更できます。
<table class="table table-sm">
<thead>
<tr>
<th>商品名</th>
<th>価格</th>
<th>在庫</th>
</tr>
</thead>
<tbody>
<tr>
<td>ノートパソコン</td>
<td>80000円</td>
<td>15</td>
</tr>
<tr>
<td>マウス</td>
<td>2000円</td>
<td>50</td>
</tr>
</tbody>
</table>
このように.table-smを追加するだけで、行の高さが小さくなり一覧性が向上します。管理システムや業務アプリでは頻繁に使用される重要なテーブル最適化方法です。
3. 読める最小サイズの目安とは
.table-smは便利ですが、過度に情報を詰め込むと視認性が低下します。視認性とは文字や情報が見やすいかどうかを意味します。Bootstrap公式でも.table-smは読みやすさを維持する範囲で使用することが推奨されています。
一般的な目安として、文字サイズは最低でもブラウザ標準サイズを維持することが重要です。文字サイズを極端に小さくすると高齢者や視力の弱い利用者が読みづらくなります。業務システムではアクセシビリティという概念が重要で、これは誰でも利用できる設計思想を意味します。
.table-smは文字サイズを変更せず余白のみを縮小するため、安全に情報密度を高められる特徴があります。この設計はユーザー体験を維持しながら表示効率を改善するため、多くの企業システムでも採用されています。
4. スクロールテーブルと組み合わせる方法
大量のデータを表示する場合は、スクロールテーブルと組み合わせることでさらに利便性が向上します。スクロールテーブルとは高さを固定して内部だけスクロールさせる仕組みです。
<div style="height:200px; overflow-y:auto;">
<table class="table table-sm table-bordered">
<thead>
<tr>
<th>社員番号</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>
</div>
スクロール表示は表全体が長くならないため、画面レイアウトが崩れにくくなります。.table-smと組み合わせることで一画面に表示できるデータ件数を増やせます。
5. 固定ヘッダーと.table-smの活用
固定ヘッダーとはスクロールしても見出し行が表示され続ける機能です。データ量が多い場合でもどの列の情報か迷わなくなります。業務画面では非常に重要な操作性向上技術です。
<style>
thead th {
position: sticky;
top: 0;
background: white;
}
</style>
<div style="height:200px; overflow-y:auto;">
<table class="table table-sm table-striped">
<thead>
<tr>
<th>日付</th>
<th>商品名</th>
<th>数量</th>
</tr>
</thead>
<tbody>
<tr>
<td>2026/01/01</td>
<td>キーボード</td>
<td>10</td>
</tr>
<tr>
<td>2026/01/02</td>
<td>ディスプレイ</td>
<td>5</td>
</tr>
<tr>
<td>2026/01/03</td>
<td>USBメモリ</td>
<td>25</td>
</tr>
</tbody>
</table>
</div>
固定ヘッダーと情報密度調整を同時に行うことで、長い一覧データでもストレスなく閲覧できます。これはデータ管理システムの操作効率を大きく向上させる重要な設計です。
6. 他のBootstrapテーブル装飾との組み合わせ
.table-smは単独でも使用できますが、Bootstrapには視認性を改善する多数の装飾があります。例えば.table-stripedは行ごとに背景色を変更して読み間違いを防ぎます。.table-hoverはマウスを重ねた行を強調表示できます。
<table class="table table-sm table-striped table-hover">
<thead>
<tr>
<th>番号</th>
<th>顧客名</th>
<th>住所</th>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td>田中商店</td>
<td>東京都</td>
</tr>
<tr>
<td>1002</td>
<td>中村工業</td>
<td>大阪府</td>
</tr>
</tbody>
</table>
情報密度を上げながらも視線誘導を行えるため、利用者の疲労軽減にもつながります。業務効率やユーザー満足度を高める重要なBootstrapテーブル設計です。
7. .table-smを使う場面と注意点
.table-smは特に大量データ一覧表示、業務管理システム、顧客管理、商品管理、売上管理画面などで効果を発揮します。表示件数を増やせるためスクロール回数が減少し操作時間短縮につながります。
しかしスマートフォン表示では画面幅が狭いため、情報を詰め込みすぎるとタップ操作が難しくなります。そのためレスポンシブデザインという画面サイズに応じてレイアウトを変える設計を併用することが重要です。
初心者はまずパソコン表示で.table-smの効果を確認し、次にスマートフォン表示で操作しやすさを確認する習慣を身につけることが推奨されます。この確認作業を行うことで実用性の高いBootstrapテーブルを設計できます。
8. 初心者が覚えておくべきテーブル設計の基本
Bootstrapテーブル設計では読みやすさと情報量のバランスが最重要です。.table-smは情報量を増やすための機能ですが、それだけに頼ると使いづらい画面になる可能性があります。
テーブル設計では見出しの明確化、色分け、スクロール制御、固定ヘッダーなど複数の技術を組み合わせることが大切です。これらを適切に設計することで初心者でも扱いやすく業務効率の高い画面を作成できます。
BootstrapはHTMLだけで高度なデザインを実現できるフレームワークです。プログラミング経験がない人でもクラス指定だけで高品質なテーブル画面を作成できるため、多くの企業システムやWebアプリ開発で採用されています。
まとめ
Bootstrapの.table-smはテーブルの余白を小さくして情報密度を高めるための非常に実用的な機能です。データ一覧や管理画面など、多くの情報を一画面で確認したい場面では特に効果を発揮します。余白を適切に調整することで、スクロール回数を減らし、ユーザーが効率的に情報を把握できるようになります。
ただし、単純に情報量を増やすだけではなく、読みやすさとのバランスを取ることが重要です。文字サイズを極端に小さくしたり、詰め込みすぎると視認性が低下してしまいます。そのため.table-smは余白だけを調整する安全な方法として利用し、視認性を維持しながら効率を向上させる設計が求められます。
また、スクロールテーブルや固定ヘッダーと組み合わせることで、さらに使いやすい画面を作ることができます。大量データを扱う場合でも、列の意味を見失わずに操作できるため、業務効率の向上につながります。これらのテクニックは実務でも頻繁に利用される重要な設計方法です。
Bootstrapの他の装飾クラスと併用することも重要なポイントです。行の色分けやホバー効果を加えることで視線誘導がしやすくなり、誤読や入力ミスを防ぐことができます。情報密度を上げながらも読みやすさを確保するためには、複数の機能を組み合わせることが必要です。
さらに、スマートフォン対応も忘れてはいけません。画面幅が狭い環境では情報を詰め込みすぎると操作しにくくなります。そのためレスポンシブ対応を意識し、画面サイズに応じた表示調整を行うことが大切です。パソコンとスマートフォンの両方で確認する習慣を身につけることで、より実用的なテーブル設計が可能になります。
<table class="table table-sm">
<thead>
<tr>
<th>商品名</th>
<th>価格</th>
<th>在庫</th>
</tr>
</thead>
<tbody>
<tr>
<td>キーボード</td>
<td>3000円</td>
<td>20</td>
</tr>
<tr>
<td>マウス</td>
<td>1500円</td>
<td>40</td>
</tr>
</tbody>
</table>
基本的な.table-smの使い方はこのようにシンプルです。既存のテーブルにクラスを追加するだけで、表示効率を改善できます。まずはこの基本形を確実に理解することが重要です。
<div style="height:200px; overflow-y:auto;">
<table class="table table-sm table-striped">
<thead>
<tr>
<th>番号</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>
</tbody>
</table>
</div>
スクロールと組み合わせることで、画面サイズを維持したまま多くの情報を表示できます。この設計は業務システムにおいて非常に有効です。
<style>
thead th {
position: sticky;
top: 0;
background: white;
}
</style>
<table class="table table-sm table-bordered">
<thead>
<tr>
<th>日付</th>
<th>商品</th>
<th>数量</th>
</tr>
</thead>
<tbody>
<tr>
<td>2026/01/01</td>
<td>ノート</td>
<td>10</td>
</tr>
<tr>
<td>2026/01/02</td>
<td>ペン</td>
<td>30</td>
</tr>
</tbody>
</table>
固定ヘッダーを組み合わせることで、長いデータでも列の意味を見失うことなく操作できます。このような工夫を取り入れることで、より実践的なテーブル設計が可能になります。
生徒
「table-smは余白を小さくして情報をたくさん表示するための機能なんですね」
先生
「その通りです。ただし読みやすさとのバランスがとても大切です」
生徒
「スクロールや固定ヘッダーと組み合わせるとさらに便利になるのも分かりました」
先生
「はい。複数の機能を組み合わせることで実務でも使える画面になります」
生徒
「スマートフォンでも確認するのが重要なんですね」
先生
「その意識があると使いやすいテーブル設計ができるようになります」
【60分集中】CSSを1行も書かない！？Bootstrap 5ユーティリティクラス活用で開発工数を50%削減
「スピード」が武器になる。Bootstrap 5で商用クオリティのWebサイトを高速構築。
本講座では、世界シェアNo.1のフレームワークBootstrap 5を使いこなし、ゼロからレスポンシブサイトを組み上げる「現場最速のワークフロー」を学びます。単なる導入に留まらず、ユーティリティクラスを活用した効率化と、実務で必須となるカスタマイズ技法を60分で完全習得します。
具体的なワークショップ内容と環境
【つくるもの】
モダンなランディングページ（LP）やダッシュボードのプロトタイプを作成します。ナビゲーション、ヒーローセクション、カードレイアウト、フッターなど、Bootstrapのコンポーネントを組み合わせて「一瞬で形にする」感動を体験してください。
【開発環境】
VS CodeにBootstrap 5専用のSnippet（補完機能）を導入し、手入力を最小限にする環境を構築。最新のCDN利用法や、表示速度（Core Web Vitals）を意識した最適な読み込み設定など、プロの初期設定を伝授します。
この60分で得られる3つの革新スキル
スマホ・タブレット・PCでレイアウトを自由自在に切り替える「ブレイクポイント」の極意を学びます。
CSSを1行も書かずに、マージン・パディング・カラーを制御。開発工数を半分以下にする実戦術を習得します。
「Bootstrap感」を消し、独自のブランドイメージに合わせるための、上書きの作法とデザインの整え方を伝授します。
※本講座は、HTML/CSSの基本を理解した方向けの「実践加速講座」です。制作会社のコーダーや副業フリーランスとして「案件の回転率」を上げ、市場価値を最大化させたい方をモクモクがバックアップします。
Bootstrap 5を楽しみながら、一緒に学びましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
