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

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

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

横並びのフォーム

第2回で説明したグリッドシステムを利用できるフォームです。form要素にform-horizontalというclassを指定して使います。そうするとform-groupのついたdiv要素がグリッドシステムでいうrow要素の働きをします。そして,label要素にはcontrol-labelというclassをつけた上でグリッドシステムで幅を,input要素はdivでラップした上でグリッドシステムで幅を指定します。

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

画像

マークアップ方法が違うチェックボックスとラジオボタン要素

前項で基本的にlabel要素はfor属性でinput要素を参照すると述べましたが,例外があります。それがチェックボックスとラジオボタン要素です。この要素は例外的にlabel要素でinput要素をラップします。

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    これはチェックボックスである
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    ラジオボタン要素である
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    こちらを選択すると上のラジオボタン要素の選択状態が外れる
  </label>
</div>

画像

インラインチェクボックス

選択肢名が短いチェックボックスやラジオボタンを横並びで表示したい時,チェックボックスの場合はcheckbox-inline,ラジオボタンの場合はradio-inlineというclassをlabel要素に指定します。

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

画像

静的な要素

フォーム内に入力できない確定の情報を表示したい場合,p要素にform-control-staticというclassを指定することで,フォームのデザインに合わせて静的な要素を表示できます。

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

画像

バリデーションの表示方法

最近ではフォームにバリデーション機能(入力のミスをチェックする機能)をつけることが多くなっています。Bootstrapでもバリデーション結果を表示するためのclassが用意されています。使用方法はform-group要素(form-groupをclassに指定した要素)にhas-[ステータス]というclassを追加することで利用できます。

class 説明
has-success 入力結果に問題が無いことを示す緑色の表示
has-warning 入力結果に警告があることを示すオレンジ色の表示
has-error 入力結果にエラーがあることを示す赤色の表示

送信時のチェックや登録フォームでユーザー名が重複してないかなどのチェックに使うことになると思いますが,大抵の場合はJavaScript・jQueryを使用して動的に指定することになるでしょう。

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">入力問題無し</label>
  <input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">入力結果に警告有り</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">入力結果に誤り有り</label>
  <input type="text" class="form-control" id="inputError1">
</div>

画像

グラフィックアイコンを併用したバリデーション

前項ではフォームの色を変更しましたが,グラフィックアイコンと併用して利用することもできます。その場合には後述で説明するグラフィックアイコンのclassを追加し,かつform-control-feedbackというclassを指定します(グラフィックアイコンの詳しい使い方は次回説明します)⁠

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">入力問題無し</label>
  <input type="text" class="form-control" id="inputSuccess2">
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">入力結果に警告有り</label>
  <input type="text" class="form-control" id="inputWarning2">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">入力結果に誤り有り</label>
  <input type="text" class="form-control" id="inputError2">
  <span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>

画像

フォームサイズの変更

フォームのサイズを変更することもできます。

まず縦幅(フォントサイズ)を変更するためにBootstrapでは2つのclassが用意されています。サイズをより大きくするinput-lgと,より小さくするinput-smです。それぞれ,input要素に指定して使います。

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

画像

横幅を変更したい場合には,グリッドシステムでラップすることが推奨されています。

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

画像

フォームの解説テキスト

input要素の下に解説文章を表示する方法が提供されています。form-groupのついた要素内で,⁠input要素と兄弟要素になるように)help-blockというclassを指定した要素を配置します。

<span class="help-block">補足説明を記載します。</span>

画像

ボタンの意味に合わせたデザイン

button要素にはbtnというclassと,ボタンの意味・ステータスに合わせたclassを指定することで,フォームのボタンをデザインできます。button要素以外にもa要素・input要素(type属性がbutton・submitのもの)に指定して使うこともできます。

<!-- 特に主張しないノーマルの見た目 -->
<button type="button" class="btn btn-default">Default</button>

<!-- 青色のボタンで「次へ」「登録」「LOGIN」など,
     ポジティブな意味合いで使う-->
<button type="button" class="btn btn-primary">Primary</button>

<!-- 緑色のボタンで操作の成功・完了などを意味するボタン -->
<button type="button" class="btn btn-success">Success</button>

<!-- 水色のボタンで情報が提供されることを示唆するボタン -->
<button type="button" class="btn btn-info">Info</button>

<!-- オレンジ色のボタンで実行に注意が必要である旨を示唆するボタン -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- 赤色のボタンで実行に不可逆的なアクションがあるなど,
     実行において慎重な判断が必要な旨を示唆するボタン。
     「削除」等のアクションに利用することが多い -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- ボタンとしての判定サイズを持ちつつリンクと仕手の見た目を提供する。
「続きを読む」などをスマホでも押しやすいサイズとして扱うことができる -->
<button type="button" class="btn btn-link">Link</button>

画像

ボタンのサイズ変更

Bootstrapではボタンのサイズはノーマルを含め4種類提供されます。次のclassを追加で指定することで利用できます。

class 大きさ
btn-lg 大きいサイズ
指定なし 通常のサイズ
btn-sm 小さめのサイズ
btn-xs 凄く小さいサイズ
<p>
  <button type="button" class="btn btn-primary btn-lg">大きいボタン</button>
  <button type="button" class="btn btn-default btn-lg">大きいボタン</button>
</p>
<p>
  <button type="button" class="btn btn-primary">通常サイズ</button>
  <button type="button" class="btn btn-default">通常サイズ</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">小さいサイズ</button>
  <button type="button" class="btn btn-default btn-sm">小さいサイズ</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">凄く小さいサイズ</button>
  <button type="button" class="btn btn-default btn-xs">凄く小さいサイズ</button>
</p>

画像

ブロックレベルボタン

通常button要素はインラインレベルでレンダリングされます。しかしログインウィンドウなどで横幅一杯(ブロックレベル)として配置したい場合があります。その場合にはbtn-blockというclassを追加することでブロックレベル要素にできます。

<button type="button" class="btn btn-primary btn-lg btn-block">ログイン</button>
<button type="button" class="btn btn-default btn-lg btn-block">新規登録</button>

画像

ボタンのアクティブ表示

ボタンが現在押されてる状態を示すために,activeというclassに指定することでアクティブであることを表示できます。例えば,表示方法の選択などで利用できるでしょう。

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

画像

ボタングループとボタンのアクティブ表示を利用したUI

実際のUIを例に見ていきましょう。

このUIは,表示方法を切り替えるボタンをボタングループにすることで,表示方法が「2種類あること」を説明し,ボタンのアクティブ表示で「どちらが選択されているか」を示しています。

※右側の表示件数の選択UIは次回説明するドロップダウンリストを利用しています。

画像

画像

レスポンシブイメージclass

Bootstrapはレスポンシブデザインをベースで設計されています。そのため,画面サイズに応じて画像が伸縮する必要が出てくるでしょう。その際に指定を便利にするのがimg-responsiveというclassです。このclassを指定すると,max-width:100%; height:auto;が設定されます。つまり,はみ出ないように天地成り行きで画像を調整してくれます 。

<img src="..." class="img-responsive" alt="レスポンシブイメージ">

イメージサーフェス

img要素にクラスを指定して使用します。 角丸・円・フレームと種類がありますがCSS3のboader-roundプロパティで実装されていますので,IE8では丸みがかかりません。そのことを念頭において使用しましょう。

<!--角丸-->
<img src="..." alt="..." class="img-rounded">
<!--円形-->
<img src="..." alt="..." class="img-circle">
<!--写真風フレーム-->
<img src="..." alt="..." class="img-thumbnail">

画像

ヘルパークラス群

アラートの表示に使用するクラスから一般的な便利コンポネートが用意されています。 その中で,サイトデザインに欠かせないクラスを抜粋して紹介します。これらのクラスにはLESSでミックスインとして利用することを前提にしたクラスも多くあります。さらなる活用法はLESSカスタマズの回に説明します。

フロート関連のクラス

サイト構築には必須となったfloatプロパティの設定を便利にするクラス群です。

clearfix

floatプロパティを使ったサイトを制作したことある方なら,お世話になっているだろうclearfixも組み込まれています。御存知の通りclearfixとはfloatの「浮動化」「後続する内容の流し込み」の特性によってfloat要素をラップする要素に高さがなくなる問題(背景が指定できない・レイアウトが崩れる等)をHTMLを汚さずにスマートに実装するためのCSSの設定です。

使用方法は単体のclearfixと同様にfloatプロパティを設定した要素を子要素に持つ親要素に指定します。

<div class='clearfix'>
  <img src="hoge" alt='piyo' width="180" height="200" style='float:left'>
  ほげぴよ…
</div>
クイックフロート

左右へのフロートを簡単に実現するためのclassは次のとおりです。この設定は!importantルールがつくため、使用の際は注意しましょう。次回に説明するナビバーコンポーネントの整列にも利用します。

class 説明
pull-left 左へフロート
pull-right 右へフロート

要素の表示・非表示

前回紹介したレスポンシブユーティリティとは別に,コンテンツの表示・非表示を簡単にできます。このclassの設定には!importantルールがつくため、常用するというよりはJavaScsript・jQuery等から動的に操作するときに使ったほうが良いでしょう。

class 適用されるCSS 補足
show display: block; 元がinlineでも強制的にblockになるので注意
hidden display: none !important; visibility: hidden !important;
invisible visibility: hidden; 要素の場所は確保されるが不可視になる

sr-onlyクラス

前項の「一行フォーム」で軽く説明しましたが、このclassを指定することでこのclassを指定された要素は1px×1px要素になり,表示上見えなくなります。わざわざdisplay:noneではなく,このような指定にしているのには理由があります。

それは視覚障がい者などが利用するスクリーンリーダー(音声読み上げソフト)で読み上げる対象となるためです。

表示はしてほしくないけど,読み上げて欲しい要素にこのclassを指定します。

その他のBootstrapの基本スタイル

ここまででよく利用するBootstrapのスタイルを解説してきましたが,上記以外にも役に立つスタイルがあります。また,WebアプリUI設計のコンポーネントとしてシステムメッセージを表示するスタイルなども用意されていますが,今回の連載はサイトデザインが目的なので割愛しました。

英語にはなりますが,公式サイトに詳細な説明とサンプルコードがあり,コピーアンドペーストで利用できるのもが一杯ありますので,欲しい機能が上記の説明にない場合は一読してみることをおすすめします。

次回は,もう少し複雑なデザインパーツであるコンポーネントを紹介します。

著者プロフィール

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

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

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