Bootstrapってなに?

こんにちは。
最近おろしたジャケットを着ていったら初っ端saygonさんとかぶったちゃんれいです。

今回はBootstrapとは何か勉強していこうかと思います。

Bootstrapとは

BootstrapとはTwitter社が開発したCssのフレームワークです。
通常は自分でCssを一から書き、スタイルを作り上げていきますが、BootstrapはすでにCssが用意されていて、それをhtml側で呼び出していくようなイメージです。
ルールさえ押さえてしまえば、htmlを書くだけで一つのWebサイトが作れてしまいます。
また、BootstrapはレスポンシブWebデザインに対応しているのが、大きな利点です。

レスポンシブWebデザインは、近年多様化するデバイスの画面サイズに、Webサイトのレイアウト・デザインを柔軟に対応させることを指すそうです。
一つのWebサイトをPC用・タブレット用・スマホ用などで対応させるのは、かなりめんどくさそうですしね^^;

僕のようなhtml初心者でもレスポンシブWebデザインでサイトが作れるのは、
かなり便利な気がします。

すこし書いてみよう

てなわけで、Bootstrapはどんなもんなのかいくつか実際に書いてみたいと思います。

とその前にまずはBootstrapをダウンロードしてこないといけません。

ダウンロードはこちらから

サイトトップページのDownload Bootstrapをクリックし、飛んだページでさらにDownload Bootstrapでダウンロードできます。

2番目の画像の下のほうに行くとBasic Templateがあるので、邪魔なものを取って使っていきたいと思います。

当投稿全コードの<は表示上の問題ですべて大文字にしてあります。


<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1>Hello, world!</h1> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>

これで準備OK!

グリッドシステム

グリッドシステムとは、PCやタブレットなどデバイスに応じた表示に変化させる仕組みのことだそうです。これのおかげでレスポンシブWebデザインのレイアウトができるわけですね。

グリッドシステムのざっくりとしたイメージが下図のような感じです。
格納庫(コンテナ)の中に、ローで行を設定し、さらにその行をカラムで何列に分けるかを設定していきます。

使用ルール


  • .container(固定枠)または.container-fluid(流動枠で外枠を設定)
  • .rowで行を設定
  • .col-[prefix]-[数字]でカラムを設定
    [prefix]でブレイクポイントの接頭辞(xsやmdなど)を指定。
    [数字]でカラムの幅を設定。基本prefixごとに合計で12になるように指定します。
    12以上になると改行されて表示されます。

簡単なコードを書いて見てみます。


<header class="container" style="background-color:gold; ">header</header> <div class="container"> <div class="row"> <div class="col-sm-3 hidden-xs" style="background: yellow; ">leftside</div> <div class="col-sm-6 col-xs-6" style="background: pink; ">main</div> <div class="col-sm-3 col-xs-6" style="background: green; ">rightside</div> </div> </div> <footer class="container" style="background-color:gray; ">footer</footer>

表示結果

これをスマートフォンサイズで表示してみると・・・

コード内に記述した通り、mainとrightsideが6カラムづつとなりleftsideが隠れました!
これがレスポンシブWebデザインの第一歩ですね。

テーブル

次にテーブルのレイアウトを見ていきたいと思います。

使用ルール


  • table要素に対してclass=”table”をつける

以下のようなコードを表示させてみます。


<div class="container"> <table class="table"> <thead> <tr> <th>No</th> <th>名前</th> <th>科目</th> <th>点数</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>山田 太郎</td> <td>数学</td> <td>100</td> </tr> <tr> <th scope="row">2</th> <td>山田 次郎</td> <td>数学</td> <td>90</td> </tr> <tr> <th scope="row">3</th> <td>山田 花子</td> <td>数学</td> <td>95</td> </tr> </tbody> </table> </div>

こんな感じになります。

表のデザインを少しいじってみます。


<table class="table">にtable-stripedを追加 <table class="table table-striped">

交互に色が付きました。

さらに


table-borderedを追加 <table class="table table-striped table-bordered">

枠組みができましたね。

Glyphiconsとボタン

最後にGlyphiconsとボタンのスタイルを見ていきましょう。
Glyphiconsは、Bootstrapに用意されている便利なアイコンのことです。

Bootstrapのサイトでその種類を確認できます。 → Glyphicons

使用ルール


  • class=”glyphicon glyphicon-[アイコン名]
  • class=“btn btn-[プロパティ名]”

まずはGlyphiconsがどんなものか見てみます。

コード


<span class="glyphicon glyphicon-off"></span>

電源のアイコンが表示されました笑

ほかにも色々なアイコンが用意されているので、サイトで確認して使ってみたいですね!

次にボタンを作ってみます。
ボタンのスタイルは以下のものが用意されています。

プロパティ名
default白地に黒文字
primary青地に白文字
success緑地に白文字
info水色地に白文字
warningオレンジ色地に白文字
danger赤色地に白文字
link白地に青文字

ボタンコード


<button type="button" class="btn btn-default">Default</button> <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のサイトを参照すればより多くの機能が載っているので、
是非そちらをご覧ください。

まだhtmlを始めたばかりでも、Bootstrapを使えば整ったデザインのWebサイトを作ることができ、さらにレスポンシブWebデザインにも対応してるなんて、至れり尽くせりですね!

ドラクエライバルズ面白い!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする