Webデザイン初心者でもできる、Bootstrapの使い方超入門(3/4 ページ)

» 2016年04月11日 05時00分 公開
[山崎 大助デジタルハリウッド大学院 非常勤講師/INOP/U-SYS]

Bootstrapデフォルトのテーブルスタイル

 Bootstrapのテーブルは、以下ルール内で使用しましょう。

ルール1:class="container"の中に

ルール2:table要素に対してclass="table"を記載

  1. <div class="container">
  2. <table class="table">
  3. <thead>
  4. <tr>
  5. <th>#</th>
  6. <th>First Name</th>
  7. <th>Last Name</th>
  8. <th>Username</th>
  9. </tr>
  10. </thead>
  11. <tbody>
  12. <tr>
  13. <td>1</td>
  14. <td>Mark</td>
  15. <td>Otto</td>
  16. <td>@mdo</td>
  17. </tr>
  18. <tr>
  19. <td>2</td>
  20. <td>Jacob</td>
  21. <td>Thornton</td>
  22. <td>@fat</td>
  23. </tr>
  24. <tr>
  25. <td>3</td>
  26. <td>Larry</td>
  27. <td>the Bird</td>
  28. <td>@twitter</td>
  29. </tr>
  30. </tbody>
  31. </table>
  32. </div>
sample3.htmlから抜粋
sample3.html

1行間隔で背景色を変える

 table要素のclassに対して「table-striped」を追加すると、1行間隔で背景色を変えることができます。

  1. <div class="container">
  2. <table class="table table-striped">
  3. ……
sample3.1.htmlから抜粋
sample3.1.html

枠線を追加する

 table要素のclassに対して「table-bordered」を追加すると、テーブルに枠線を追加できます。

  1. <div class="container">
  2. <table class="table table-striped table-bordered">
  3. ……
sample3.2.htmlから抜粋
sample3.2.html

マウスオーバー時のエフェクトを追加する

 table要素のclassに対して「table-hover」を追加すると、テーブルにマウスオーバーしたときのエフェクトを追加できます。

  1. <div class="container">
  2. <table class="table table-striped table-bordered table-hover ">
  3. ……
sample3.3.htmlから抜粋,http://sample.atmarkit.jp/fux/1403/19/sample3.3.html
sample3.3.html(#が2の行をマウスオーバーしている)

padding値を通常の半分にする

 table要素のclassに対して「table-condensed」を追加すると、テーブルのpadding値を通常の半分にすることができます。

  1. <div class="container">
  2. <table class="table table-striped table-bordered table-hover table-condensed">
  3. ……
sample3.4.htmlから抜粋
sample3.4.html

セルの背景色を変える

 tr要素td要素のclassに対して「active」「success」「warning」「danger」「info」のいずれかを指定すると、それぞれの値に対応した背景色にすることができます。

  1. <div class="container">
  2. <table class="table table-striped table-bordered table-hover table-condensed">
  3. <thead>
  4. <tr class="active">
  5. ……
  6. <tr class="success">
  7. ……
  8. <tr class="warning">
  9. ……
  10. <tr class="danger">
  11. ……
  12. <tr class="info">
  13. ……
sample3.5.htmlから抜粋
sample3.5.html

テーブルをレスポンシブ対応する

 「div class="container"」要素とtable要素の間に「div class="table-responsive"」要素を追加すると、テーブルをレスポンシブ対応できます。具体的に言うと、ブラウザーウィンドウを狭くすると、table要素内にスクロールバーが出現します。

  1. <div class="container">
  2. <div class="table-responsive">
  3. <table class="table table-striped table-bordered table-hover table-condensed">
  4. ……
sample3.6.htmlから抜粋
sample3.6.html

Copyright © ITmedia, Inc. All Rights Reserved.

スポンサーからのお知らせPR

HTML5�ス�ス�ス�ス�ス�ス�ス�ス鬮ッ蜿・�ケ�「�ス�ス�ス�スX 鬯ッ�ョ�ス�ォ�ス�ス�ス�ェ鬮ッ蛹コ�サ繧托スス�ソ�ス�ス�ス�ス�ス�ス�ス�ス�ス�コ鬮」蛹�スス�オ髫エ竏オ�コ�キ�ス�ク�ス�キ�ス�ス�ス�ケ髫エ雜」�ス�「�ス�ス�ス�ス�ス�ス�ス�ウ鬯ゥ蟷「�ス�「�ス�ス�ス�ァ�ス�ス�ス�ス�ス�ス�ス�ュ鬯ゥ蟷「�ス�「髫エ雜」�ス�「�ス�ス�ス�ス�ス�ス�ス�ウ鬯ゥ蟷「�ス�「�ス�ス�ス�ァ�ス�ス�ス�ス�ス�ス�ス�ー

鬯ョ�ォ�ス�エ髯晢スキ�ス�「�ス�ス�ス�ス�ス�ス�ス�ャ鬯ョ�ォ�ス�エ鬯イ�ス�シ螟イ�ス�ス�ス�ス�ス�ス�ス�・鬯ョ�ォ�ス�エ髯晢スカ�ス�キ�ス�ス�ス�」�ス�ス�ス�ッ鬮」蜴�スス�ォ�ス�ス�ス�」

注目のテーマ

4AI by @IT - AIを作り、動かし、守り、生かす
Microsoft & Windows最前線2025
AI for エンジニアリング
ローコード/ノーコード セントラル by @IT - ITエンジニアがビジネスの中心で活躍する組織へ
Cloud Native Central by @IT - スケーラブルな能力を組織に
システム開発ノウハウ 【発注ナビ】PR
あなたにおすすめの記事PR

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。