BootstrapでレスポンシブなWebサイト制作

第3回 Bootstrapの基本スタイルを覚えよう

この記事を読むのに必要な時間:およそ 10.5 分

行間を詰める

Bootstrapのテーブルデザインは余白を多めに取ったデザインですが,行数が多いなどの理由で行間を詰めたい場合があります。その場合はtable要素にtable-condensedというclassを追加することで,行間の詰まったテーブルを作ることができます。

<table class="table table-condensed"></table>

画像

エラー・警告などのデザイン

Webページのデザインにはあまり登場しませんが,Webアプリやインターフェースをデザインしていると,必要になるエラー・警告等のclassがあります。

それぞれ,デフォルトで次のclassが準備されています。

class 説明
active 選択されている事を表す灰色の背景
success 処理済・処理成功を表す緑の背景
info 情報を表す水色の背景
warning 警告を表す黄色の背景
danger エラーを表す赤色の背景

次のようにtr要素にこれらのclassを指定することで,行自体に背景を敷くことができます。

<tr class="active"> ... </tr>
<tr class="success"> ... </tr>
<tr class="warning"> ... </tr>
<tr class="danger"> ... </tr>
<tr class="info"> ... </tr>

画像

また,thまたはtd要素に指定すれば,セル単位で背景を変更できます。

<tr>
  <td class="active"> ... </td>
  <td class="success"> ... </td>
  <td class="warning"> ... </td>
  <td class="danger"> ... </td>
  <td class="info"> ... </td>
</tr>

レスポンシブテーブル

通常のテーブルはwidth: 100%;で生成されますが,ある程度横長になるテーブルの場合,スマートフォンで表示するとセル内の文字列に対して改行が入り見づらくなります。table-responsiveというclassをつけたdiv要素でテーブルをラップすることで,スマートフォン(幅768pxより小さい画面)で表示した際に横スクロールができるようになります。

<div class="table-responsive">
  <table class="table">
    :
  </table>
</div>

画像

テーブル関連のまとめ

テーブルは色々とバリエーションがありましたが,これらのclassを重ねがけすることで,行間の狭いストライプテーブルを作るなど,様々な応用ができます。ぜひ試してみてください。

フォーム

フォームの使い方を見ていきます。フォームは基本的に,input要素など入力部品にform-controlというclassを指定して使うことになります注2)⁠

注2
LESS上のコメントアウトを外すことで簡単にすべてのフォームに適応する方法も提供されます。

label要素はチェックボックスなど一部を除いてラップするのでは無く基本的にfor属性で参照する方法が推奨されています。またinput要素とlabel要素をform-groupというclassを指定したdiv要素でラップします。

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

画像

一行フォーム

ログインフォームなど,一行で表示したいフォームも考えられます。その場合には,form要素にform-inlineというclassを,label要素にsr-onlyというclassを指定します。なお,スマートフォン(幅768pxより小さい画面)で表示した際には縦並びになります。

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

幅768pxより大きい画面幅

画像

スマートフォン(幅768pxより小さい画面)での表示

画像

sr-onlyとは?

sr-onlyを指定した要素は,一見すると非表示になりますが,スクリーンリーダーには読み上げられます。

今回の場合,デザイン上placeholder属性でinput要素の意味を表示するようになっていますが,本来HTML5ではplaceholder属性をlabel要素の代わりとして使用するのは推奨されていません。なぜならplaceholder属性は読みあげられないことがあるためです(さらには入力時に消えるため,input要素の意味がわからなくなる危険性をはらんでるのです。一瞬見て意味を理解し忘れない程度の長さにするべきです)⁠そのため,label要素を作成するようにし,そしてデザイン上不要な場合にはsr-onlyを指定しましょう。

sr-onlyの動作の詳細は,次項「ヘルパークラス群」のsr-onlyの説明を参照してください。

著者プロフィール

齋藤みつる(さいとうみつる)

高校時代には漫研とロボ研に没頭しつつ,ポートフォリオ・履歴書を様々なデザイン・SI会社に送り,採用されてから高校を中退してデザイナー・SE活動をはじめる。2011年からフリーランスとして活動を始め,2年前にナビスインタナショナル株式会社と専属フリーランス契約を結び,Web事業部の責任者となっている。

URL:http://www.navice.co.jp/