CSS

これだけ覚えれば誰でも使えるTwitter Bootstrap2.0

更新日:

FuelPHPのVersion1.3からTwitter Bootstrap2.0が標準で導入されるようになっているみたいです。そこで、今日は誰でも簡単にTwitterBootstrapが使えるように基本的な事を調べてみたいと思います。

Twitter Bootstrapの導入

1. 早速導入方法を調べてみましょう。下記のサイトからTwitter Bootstrapの必要ファイルをダウンロードします。現在の最新バージョンがv2.0.4です。

http://twitter.github.com/bootstrap/index.html

2. ダウンロードしたZipファイルを解凍したら、中の3つのフォルダ(css,img,js)を適当な箇所(同じ階層)に保存します。

3. そして、jsファイルを使うために必要なjqueryのファイルをダウンロードします。※jqueryのファイルはダウンロードしなくてもCDNで直接使用することが出来ますが、一応ダウンロードしてjsフォルダに保存する方法も覚えておきましょう。下記のサイトよりjqueryファイルをダウンロードします(最新のバージョンはv1.8.0です)。

http://jquery.com/

4. ブラウザによっては、ダウンロードファイルをクリックすると、ずらずらと文字が表示され戸惑うかもしれませんが、右クリックで、『名前を付けて保存』をクリックすれば、ダウンロードすることが出来ます。※オペラの場合はメニュー→ページ→保存でダウンロードできます。

基本的な記述方法

5. それでは、ダウンロードしたTwitterBootstrapとjqueryのファイルを読み込むための基本的な記述方法を下記に記載しておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ここにタイトル名を記述</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
ここにサイトの内容を記述
<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

6. 注意点は2つです。jsファイルは</body>の直前に読み込むこと、bootstrap.jsの前にjqueryのファイルを読み込むことです。※尚、基本的にmin.cssやmin.jsとminがついているファイルを読み込むようにして下さい(ファイル容量が軽いので)。

グリッドシステム

7. 基本的な記述方法が分かったら、次は基本構造です。Twitter Bootstrapは、デフォルトでは、横幅940pxのサイトを12個のグリッドという塊(コラム)で構成するグリッドシステムで出来ています。

8. まず、Twitter Bootstrapでは、サイトの大枠をcontainerという名前のクラスで囲みます。そしてその中を分割するためにはrowクラスを作成して、rowクラスの中にグリッド幅に合わせてspan1~span12で指定します。

<body>
 <div class="container">
 <div class="row">
 <div class="span4" >サイドバー</div>
 <div class="span8" >メインコンテンツ</div>
 </div><!--rowの終了タグ-->
 </div><!--containerの終了タグ-->
 </body>

9.  段組を入れ子にすることも出来ます。その場合も入れ子の元になるdivタグの下にさらにrowクラスを作成して、そのrowクラスの幅の範囲内で作成します。上の例でいえば、span8のメインコンテンツを入れ子にする場合、メインコンテンツの中にrowクラスを作成して、span8の範囲で分割(例えば5:3)して作成します。

<body>
 <div class="container">
 <div class="row">
 <div class="span4">サイドバー</div>
 <div class="span8" >
 <div class="row">
 <div class="span5">メインコンテンツ</div>
 <div class="span3">サブコンテンツ</div>
 </div><!--rowの終了タグ-->
 </div><!--span8の終了タグ-->
 </div><!--rowの終了タグ-->
 </div><!--containerの終了タグ-->
 </body>

10. Bootstrapの場合、divタグの数はかなり多くなる可能性がありますので、終了タグの打ち忘れに注意しましょう。

流動的なレイアウト(リキッドレイアウト)

11. 上記の場合、サイトの幅は940pxで固定されていますが、サイトの幅に合わせて伸縮するサイトも簡単な設定で作成することが出来ます。cotaninerクラスとrowクラスをcontainer-fluidクラス、row-fluidクラスに変更するだけで簡単に作成することが出来ます。

<body>
 <div class="container-fluid">
 <div class="row-fluid">
 <div class="span4">サイドバー</div>
 <div class="span8">
 <div class="row-fluid">
 <div class="span5">メインコンテンツ</div>
 <div class="span3">サブコンテンツ</div>
 </div><!--rowの終了タグ-->
 </div><!--span8の終了タグ-->
 </div><!--rowの終了タグ-->
 </div><!--containerの終了タグ-->
 </body>

レスポンシブレイアウト

12. 上記のレイアウトでもほとんどのデバイスに対応できるのですが、よりデバイスごとに最適なレイアウトを作成する為のレイアウト法がレスポンシブレイアウトです。レスポンシブレイアウトはPCに適したレイアウト、タブレットに適したレイアウト、スマートフォンに適したレイアウトとそれぞれのメディアに対応できるように文字の大きさだけで無く、3段組が2段組になったり、1段組になったりと色々変化します。

13. そのレスポンシブレイアウトを使うには、bootstrap.min.cssの後に、bootstrap-responsive.min.cssを読み込むだけでOKです。※尚、bootstrap.min.cssの前にビューポートを指定し忘れないようにして下さい。

<meta name="viewport" content="width=device-width,minimum-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-resposive.min.css" rel="stylesheet">

14.  それぞれのデバイスごとのレイアウトを変更したい場合は、メディアクエリーで指定されている箇所を変更します。

/*スマートフォンの縦画面以下のサイズの場合*/
 @mdeia(max-width:480px){........}
 /*スマートフォンの横画面からタブレットの縦画面サイズの場合*/
 @media(max-width:767px){........}
 /*タブレットの横画面サイズからデスクトップPCサイズの場合*/
 @media(min-width:768px)and(max-width:979px){......}
 /*大画面デスクトップPCサイズの場合*/
 @media(min-width:1200px){........}

15. それぞれのデバイスに応じて表示、非表示を切り替えることも可能です。例えば、class="visible-phone"と指定するとスマートフォンのみ表示することが出来ますし、逆にclass="hidden-phone"と指定するとスマートフォンのみ非表示にすることが出来ます。

ボタン

16. TwitterBootstrapを使用する上で、便利な機能の1つがボタンの作成でしょう。class="btn"と指定するだけで簡単にボタンが作成できます。class="btn btn-primary"と指定すると濃い青色が、btn-dangerが赤色と簡単にボタン色も指定することができます。

  • class="btn"
    標準的なグレーのボタンを作成します。
  • class="btn btn-primary"
    濃い青色のボタンを表示します。
  • class="btn btn-info"
    水色のボタンを表示します。
  • class="btn btn-success"
    緑色のボタンを表示します。
  • class="btn btn-warning"
    オレンジ色のボタンを表示します。
  • class="btn btn-danger"
    赤色のボタンを表示します。
  • class="btn btn-inverse"
    ほとんど黒に近い濃い灰色のボタンを表示します。

ボタングループ

17. 複数のボタンをグループ表示したり、グループを複数表示したりすることも簡単にできます。

  • class="btn-group"
    複数のボタンをグループ化します。
  • class="btn-toolbar"
    ボタングループをbtn-toolbarで囲うことで、複数のボタングループを横に並べて表示します。

ドロップダウンボタン

18. ドロップダウンボタンも簡単に表示することが出来ます。ボタンの色や大きさ、メニューの右寄せ、左寄せなども指定することが出来ます。

  • class="btn btn-droppdown-toggle" data-toggle="dropdown"
    必ずdata-toggle="dropdown"と一緒に使用します。
  • <span class="caret"></span>
    ボタンに逆三角マークを表示するために使用します。
  • class="dropdown-menu"
    ドロップダウンで表示されるメニューを定義するために使用します。

フォーム

19. Twitter Bootstrapはフォームも簡単に作成してくれます。フォームは基本的に4つのフォームレイアウトで出来ています。

  • form-vertical
    ラベルと入力欄が改行されて表示されます。formにクラス指定をしない場合、自動的にこれが適用されます。入力欄の大きさは、span 1~span12を指定することで決めることが出来ます。
  • form-inline
    ラベルと入力欄が改行されずに横に並べて表示されます。
  • form-search
    検索用のフォームが表示されます。
  • form-horizontal
    複数の入力エリアを作成するときに、テーブル枠の中にきちんと並べて作成したようにきれいに左側がラベル、右側がフォームという風に作成してくれます。1つのグループを<div class="control-group">で囲む必要があります。

尚、上記のソースコードを下記に記述しておきます(公式サイトのソースコードそのままですが)。

<form class="form-horizontal">
 <fieldset>
 <div class="control-group">
 <label class="control-label" for="input01">Text input</label>
 <div class="controls">
 <input type="text" class="input-xlarge" id="input01">
 <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
 </div>
 </div>
 <div class="control-group">
 <label class="control-label" for="optionsCheckbox">Checkbox</label>
 <div class="controls">
 <label class="checkbox">
 <input type="checkbox" id="optionsCheckbox" value="option1">
 Option one is this and that&mdash;be sure to include why it's great
 </label>
 </div>
 </div>
 <div class="control-group">
 <label class="control-label" for="select01">Select list</label>
 <div class="controls">
 <select id="select01">
 <option>something</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
 </select>
 </div>
 </div>
 <div class="control-group">
 <label class="control-label" for="multiSelect">Multicon-select</label>
 <div class="controls">
 <select multiple="multiple" id="multiSelect">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
 </select>
 </div>
 </div>
 <div class="control-group">
 <label class="control-label" for="fileInput">File input</label>
 <div class="controls">
 <input class="input-file" id="fileInput" type="file">
 </div>
 </div>
 <div class="control-group">
 <label class="control-label" for="textarea">Textarea</label>
 <div class="controls">
 <textarea class="input-xlarge" id="textarea" rows="3"></textarea>
 </div>
 </div>
 <div class="form-actions">
 <button type="submit" class="btn btn-primary">Save changes</button>
 <button class="btn">Cancel</button>
 </div>
 </fieldset>
 </form>

テーブル

20. TwitterBootstrapはテーブルも簡単にレイアウトしてくれます。注意点は表題行に<thead>タグをデータ行に<tbody>タグを必ず指定するようにして下さい。尚、下記のクラスを同時に複数指定することも出来ます。

  • class="table"
    横幅が均等で、行間に薄いラインが表示されます。
  • class="table table-striped"
    枠がストライプ(1行ごとに背景色が変わる)表示になります。
  • class="table table-bordered"
    枠囲み(外枠と区切り線)が表示されます。
  • class="table table-condensed"
    1行の高さが標準のテーブルよりも低くなります。

サムネイル

21. 画像をサムネイル表示することが簡単にできます。まず、サムネイルする画像の大枠をclass="thumnails"で囲みます。そして、その中に表示する画像ごとにclass="thumnail"を指定します。

<div class="span6">
 <h2>Default thumbnails</h2>
 <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
 <ul class="thumbnails">
 <li class="span3">
 <a href="#" class="thumbnail">
 <img src="http://placehold.it/260x180" alt="">
 </a>
 </li>
 <li class="span3">
 <a href="#" class="thumbnail">
 <img src="http://placehold.it/260x180" alt="">
 </a>
 </li>
 <li class="span3">
 <a href="#" class="thumbnail">
 <img src="http://placehold.it/260x180" alt="">
 </a>
 </li>
 <li class="span3">
 <a href="#" class="thumbnail">
 <img src="http://placehold.it/260x180" alt="">
 </a>
 </li>
 </ul>
 </div>

アイコン

22. 通常、イタリック表示に使用するiタグにオプションクラスを指定することで、アイコンを表示することが出来るようになります。

  • class="icon-アイコン名"
    icon-glace、icon-music、icon-search、icon-envelope、icon-star、他全部で140ものアイコンが用意されていますので簡単にワンポイントアイコンを付けることができます。
  • class="icon-white"
    アイコンの表示色を白色に変更することが出来ます。

    <i class="icon-search icon-white"></i>

パンくずリスト

23. ページの階層(現在位置)を表示するのに使用されるパンくずリストもulタグ要素にオプションクラスのbreadcrumbを指定することで簡単に作成することが出来ます。

  • <ul class="breadcrumb">
    ulタグ要素にbreadcrumbクラスを指定することでパンくずリストに適したレイアウトを提供してくれます。
  • <span class="divider">/</span>
    階層の仕切りを表示するのにdividerを使用します。
  • <li class="active">現在の階層</li>
    現在のページの階層をactiveによって指定することが出来ます。

ラベル表示

24. テキスト文字の好きな部分をlabelで囲むことで簡単にラベル表示ができます。

<span class="label">ラベル表示部分</span>

25. 文字色は、success(緑)、warning(オレンジ)、important(赤)、info(水色)、inverse(濃い灰色)を指定するだけです。

<span class="label label-success">緑色の文字表示</span>

バッジ表示

26. 上記のlabelの代わりにbadgeを指定することで、楕円形のバッジっぽい表示が出来ます。

<span class="badge">1</span>

ナビゲーションバー

27. 最近いろんなサイトで採用されているページトップのナビゲーションバー、このナビゲーションバーはページ全体の枠組みのcontainerとは別に作成します。2つのdiv要素navbarとnavbar-innerの中にナビゲーションバー用のcontainerを作成します。

<div class="navbar">
 <div class="navbar-inner">
 <div class="container">
 ここにナビゲーションの内容を表示
 </div>
 </div>
 </div>

28.  常にページトップにくっついているように表示させるにはnavbar-fixed-topを指定します。

<div class="navbar navbar-fixed-top">

29. 反対にページ下部にくっつけて表示させるには、navbar-fixed-bottomを指定します。

<div class="navbar navbar-fixed-bottom">

30. サイト名(表題)は、class="brand"でサイト名を囲むことで表示することが出来ます。

31. レスポンシブレイアウトでサイズが小さくなったときに、ナビゲーションをたたみ込む為の表示は、data-toggle="collapse"を指定します。data-target=".nav-collapse"に対して、表示したい箇所をclass="nav-collapse"で指定することで中身を表示することが出来ます。

<div class="navbar navbar-fixed-top">
 <div class="navbar-inner">
 <div class="container">
<!--下記の5行がナビのたたみ込みの設定-->
 <button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
<!--ブランド名(表題)の指定です-->
 <a class="brand" href="./index.html">Bootstrap</a>
<!--以下がナビゲーションでたたみ込んだ中身です-->
 <div class="nav-collapse collapse">
 <ul class="nav">
 <li class="">
 <a href="./index.html">Overview</a>
 </li>
 <li class="">
 <a href="./scaffolding.html">Scaffolding</a>
 </li>
 <li class="">
 <a href="./base-css.html">Base CSS</a>
 </li>
 <li class="active">
 <a href="./components.html">Components</a>
 </li>
 <li class="">
 <a href="./javascript.html">Javascript plugins</a>
 </li>
 <li class="">
 <a href="./less.html">Using LESS</a>
 </li>
 <li class="divider-vertical"></li>
 <li class="">
 <a href="./download.html">Customize</a>
 </li>
 <li class="">
 <a href="./examples.html">Examples</a>
 </li>
 </ul>
 </div>
 </div>
 </div>
 </div>

32. 簡単なサイトならこれで作成することが出来ます。まず、使って試してみて下さい。尚、Twitter Bootstrapはかなり奥が深いです。いろんな便利クラスが用意されています。使って見て面白そうだなと思ったら、公式サイトで勉強して下さい。尚、英語が苦手な人に日本語で丁寧に説明しているサイトを発見しましたので、ご紹介します。『Greenapple-room』というサイトで日本語でかなり丁寧に説明していますので、是非覗いてみて下さい。

http://greenapple-room.com/conc/user/TwitterBootstrap/bootstrap.html

又、私もお世話になっているのですが、初心者向け無料プログラム学習サイト『ドットインストール』でも、Twitter Bootstrapの使い方の講座がありますので、利用してみて下さい。

本日は以上です。

テーブル行の非表示について

15番で説明した表示、非表示の切替ですが、ブロック単位(グリッド単位)の表示しか考慮されていないみたいで、テーブル行にこれを指定すると不具合の出る箇所があります。

例として、下記のようなテーブルの行を5列目と6列目を携帯の時に表示しないようにhidden-phoneを指定してみます。

<table class="table table-bordered table-striped">
<thead>
 <tr>
 <th>ID</th>
 <th>ユーザ名</th>
 <th>グループ</th>
 <th>Eメール</th>
 <th class="hidden-phone">作成日</th>
 <th class="hidden-phone">更新日</th>
 </tr>
</thead>
<tbody>
<?php foreach($users as $row): ?>
 <tr>
 <td><?=$row->id?></td>
 <td><?php echo $row->username;?></td>
 <th><?=$row->group?></th>
 <th><?=$row->email?></th>
 <td class="hidden-phone"><?=date('Y/m/d',$row->created_at);?></td>
 <td class="hidden-phone"><?=$row->updated_at>0 ? date('Y/m/d',$row->updatede_at) : "";?></td>
 </td>
 </tr>
<?php endforeach;?>
</tbody>
</table>

確かに横幅が480px以下の時は、5列目と6列目を表示しません。

ところが、PCサイズに変更すると、5列目と6列目が一緒になって2行で表示されるようになります。

この対処法として、自分自身でクラスを作成する方法があります。

TwitterBootstrapのcssファイルを保存した場所と同じ場所にmy-style.css(名前は任意)ファイルを作成して、下記のように記述します。sp-none(名前は任意)というクラスを作成して、480px以下の表示を記述するメディアクエリーにdisplay:none;を指定するだけです。

@media (max-width: 480px) {
 .sp-none{
 display:none;
 }

そして、bootstrap-responsive.min.cssファイルの後にmy-style.cssファイルを読み込みます。

これで、先程のhidden-phoneをsp-noneに変更すれば、スマートフォン表示時のテーブル行の表示を減らすことが出来ますし、PC表示の時にも不具合はおきません。

尚、この非表示の方法は、あくまで表示しないだけで、データ自体は読み込んでいます。ですので、PC用に用意している容量の大きな画像が、この方法でスマートフォンで非表示にしてもアクセススピードが早くなるわけではありません。

画像をたくさん使用するようなサイトの場合は、やはりPC用とスマートフォン用は作り分けた方がいいかもしれません。

以上、追加の説明でした(2012/08/17)

-CSS

Copyright© WinRoad徒然草 , 2018 All Rights Reserved Powered by AFFINGER5.