連載
» 2016年04月11日 05時00分 UPDATE

HTML5アプリ作ろうぜ!(11):Webデザイン初心者でもできる、Bootstrapの使い方超入門 (3/4)

[山崎 大助,デジタルハリウッド大学院 非常勤講師/INOP/U-SYS]

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

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

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

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


  <div  class="container">
    <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
      <td>2</td>
      <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
  </div>
sample3.htmlから抜粋
html5app11_23.jpg sample3.html

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

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

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

枠線を追加する

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

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

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

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

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

padding値を通常の半分にする

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

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

セルの背景色を変える

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

    <div class="container">
      <table class="table table-striped table-bordered table-hover table-condensed">
      <thead>
        <tr class="active">  
……
        <tr class="success">
……
        <tr class="warning">
……
        <tr class="danger">
……
        <tr class="info">
……
sample3.5.htmlから抜粋
html5app11_28.jpg sample3.5.html

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

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

    <div class="container">
      <div class="table-responsive">
      <table class="table table-striped table-bordered table-hover table-condensed">
……
sample3.6.htmlから抜粋
html5app11_29.jpg sample3.6.html

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

Focus

- PR -

RSSについて

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

メールマガジン登録

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