0

Bootstrapの基本的な使い方

Bootstrapとは、<span class=

 

唐突ですが、皆さんは「Bootstrap」を利用していますか?

  • 「何となく聞いたことがあるけれど結局何のことなの?」
  • 「ちょっと使ってみたかったんだよね~。」

そんな方に向けて「Bootstarap」を基本から見ていきたいと思います。

必要性に迫られないと、新しいものやサービスって何かと後回しにしてしまい、「いつかやろう」「そのうち理解しよう」と、いつしか古いものになってしまったりするので、これをいい機会に少しずつサイト制作に取り入れていくキッカケになれば…。と思います。

 

Bootstrapとは?

Bootstrapとは、CSSの「フレームワーク」と一般的に呼ばれるものになります。そもそも「CSSのフレームワーク」って何?と言うと、Webサイト全体の基本的なスタイルを、はじめからある程度用意してくれている「ライブラリファイル」のことになります。

一般的に使用されるタグに対してある程度デザインされたスタイルが、はじめから定義されているので、そのまま使用してもそれなりの見栄えでサイトが出来上がります。1からスタイルを組んでいくことに比べると、格段に短い時間でWebサイトのデザインが出来るというかなり便利なライブラリです。

Bootstrapは元々、Twitter社が開発したものなので、かつては「Twitter Bootstrap」と呼ばれていましたが、現在においては「Bootstrap」と呼ばれています。

ここでは、Bootstrapを触りながら、簡単なサンプルと共に基本的な使い方を理解していけるようにご紹介させて頂きます。

 

 Bootstrap

 

Bootstrapの特徴

はじめにBootstrapを使う上で簡単な特徴を見ていきましょう。

デザインは用意されているテーマから選ぶだけ!

 スタイルサンプル

 

Webサイト作成者が用意したHTMLファイルに好みのCSSファイルを読み込むだけで、それなりのデザインされた表示が出来るので、デザインが苦手という人でも簡単にそれなりのクオリティーでのサイト制作が可能になります。

 

レスポンシブにも対応!

 デバイスイメージ

 

BootstrapはレスポンシブWebデザインに対応しているので、デバイスごとに別々のCSSを作成する必要はありません。レスポンシブ対応にするために、CSS3のメディアクエリを使用しています。現状で「HTML5/CSS3」の知識があまり身についていない人でもBootstrapを使用する際には、特に問題はありません。もちろんそれなりの知識を身に付けていた方が、カスタマイズしてよりオリジナリティーを出していきたいと人には良いでしょう。

 

デザインを簡単に変更出来る!

一旦、Bootstrapでページを作成してしまえば、その後にイメージを変更したい場合、いくつかその他に用意されているテーマを選び直し、各テーマのCSSをダウンロードして差し替えることでデザインを変更することが出来ます。いくつかまとめてテーマを無料で配布しているサイトもありますので探してみてください。

a

対応ブラウザ

 対応ブラウザ

IE7以下とFirefox3.6以下は残念ながらサポートされていません。またIE9以下のブラウザに関しては「CSSメディアクエリ」がサポートされていないので「Respond.js」を使用する必要があります。

 

Bootstrapを利用するにあたり準備すること

 

まずは、Bootstrapから「Bootstrap」をダウンロードします。

download

 

ダウンロードページに移り、Downloadの項目から「Download Bootstrap」をクリックします。

 

download-page

すると「bootstrap-3.2.0-dist.zip」がダウンロードされます。
※バージョンごとに数字は変わります。

 

▼bootstrapフォルダには以下のようなファイルが格納されています。

css/
-bootstrap.css
-bootstrap.min.css
-bootstrap-theme.css
-bootstrap-theme.min.css
font/
-glyphicons-halflings-regular.eot
-glyphicons-halflings-regular.svg
-glyphicons-halflings-regular.ttf
-glyphicons-halflings-regular.woff
js/
-bootstrap.js
-bootstrap.min.js

すぐに使用できるHTMLテンプレートが用意されている

 

ダウンロードページを下にスクロールしていくと「Basic template」という項目があり、Bootstrapをすぐに使用するためのHTMLテンプレートが記載されています。

 basic-template

このコードをコピーして「index.html」を作成しましょう。

index

ここまでで準備は完了です!

先程作成した「index.html」をブラウザで開いてみましょう!

hello

 

DEMO1

 

デフォルトで指定されているスタイル

既にデフォルトで指定されているデザインがどのようなものかを、記述の仕方を見ながら確認していきたいと思います。

デフォルトのボタンスタイル

button要素にclass指定で「“btn btn-***”」(***はプロパティ名を記述)を指定するとスタイルが適用されます。

button-style

▼プロパティ名はこちら

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

[button-sample.html]

DEMO 2-1

 

デフォルトのボタンサイズ

button要素にclass指定で「“btn-***”」(***はプロパティ名を記述)を指定するとサイズが指定できます。

button-size

▼プロパティ名はこちら

プロパティ名 内容
lg ボタン大
sm ボタン小
xs ボタン極小

[button-size-sample.html]

DEMO2-2 

 

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

◇基本ルール

 

  1. class=”container”の中に、
  2. table要素に対してclass=”table”を記載

 

◇サンプルソースを確認

table-style

DEMO3 

 

◇各行で背景色を変える

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

table-style2

DEMO3-1 

 

◇枠線を追加する

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

table-style3

DEMO3-2 

 

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

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

table-style4

DEMO3-3

 

◇セルのサイズを変更する

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

table-style5

DEMO3-4 

 

◇セルの背景色を変更する

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

table-style6

DEMO3-5 

 

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

<div class=”container”>要素とtable要素の間に<div class=”table-responsive”>要素を追加すると、テーブルがレスポンシブ対応になります。

table-style7

DEMO3-6

 

テーブルに関しては、ここまでになります。

 

画像ファイルをウィンドウサイズにより自動で縮小/拡大させる

ウィンドウサイズによって、画像ファイルを自動で縮小/拡大させたいときに、img要素のclassに「img-responsive」を指定します。

image-size

DEMO4 

 

デフォルトのp要素のスタイル

p要素のclassに「bg-***」(***はプロパティ名)を指定すると、スタイルを変更できます。指定できるプロパティ名は「primary/success/info/warning/danger」になります。

DEMO5 

 

デフォルトのナビゲーション

デフォルトで様々なナビゲーションスタイルが用意されています。

DEMO6 

 

◇基本ルール

 

ul要素にclass=”nav”を記載

 

◇Tabs

tabs

ul要素のclassに対して「nav-tabs」を追加します。

 

◇Pills

pills

ul要素のclassに対して「nav-pills」を追加します。

 

◇Stacked

stacked

ul要素のclassに対して「nav-stacked」を追加します。

 

◇Justified-tab

justified-tabs

 

ul要素のclassに対して「nav-tabs」「nav-justified」を追加します。

 

◇Justified-pills

justified-pills

ul要素のclassに対して「nav-pills」「nav-justified」を追加します。

 

◇Disabled(クリック禁止)

disable

クリック禁止タブ。
li要素のclassに対して「disabled」を追加します。

 

レスポンシブ対応のためにグリッドシステムを理解しよう

 

ちょっとここからややこしい話になってきますが、では、ここからは「レスポンシブWebデザイン」に対応していくために必要な「グリッドシステム」を理解していきましょう。

グリッドシステムの基本ルール

 

  1. class=”container”の中に、
  2. class=”row”の中に
  3. class=”col-{prefix}-{column}”
  4. {column}は合計値が12になるように数値を指定

 

サンプルソースを確認

サンプルソースを見ていきましょう。

 

sample1
※PCのウィンドウサイズ

sample1-2
※スマートフォン&タブレットのウィンドウサイズ

DEMO7

※ウィンドウサイズを小さくしたりして確認してみてください。 

 

複数指定も可能

col-{prefix}-{column}は、class=””の中に複数指定することで、「PCでは縦1×横6」「タブレットでは縦2×横3」「スマートフォンでは縦3×横2」のようにレイアウトが可変するようになります。

 

sample2
※PCのウィンドウサイズ

sample2-2
※タブレットのウィンドウサイズ

sample2-3
※スマートフォンのウィンドウサイズ

DEMO7 -2 

※ウィンドウサイズを小さくしたりして確認してみてください。  

 

グリッドオプション表

グリッドオプション表

画面サイズ {prefix} 指定方法(*に数値を指定)
768px未満スマートフォン) xs col-xs-*
768px以上~992px未満(タブレット) sm col-sm-*
992px以上~1200px未満(PC) md col-md-*
1200px以上(PC) lg col-lg-*

 

ウィンドウサイズにより表示・非表示を切り替える

PC/タブレット/スマートフォンで配置するコンテンツを全く同じにする必要がない場合は、ウィンドウサイズによってコンテンツを非表示にするなどの指定をしていきます。

 

hidden-{prefix}…非表示
visible-{prefix}…表示

 

 

sample3
※992px以上のウィンドウサイズ({prefix}/[lg]&[md])

 sample3-2
※768px~991pxのウィンドウサイズ({prefix}/[sm])

sample3-3
※768px以下のウィンドウサイズ({prefix}/[xs])

DEMO8

※ウィンドウサイズを小さくしたりして確認してみてください。 

 

まとめ

ここまで、Bootstrapの基本的な使い方をご紹介してきましたが、早急にある程度のデザインでサイトを作成しなければならない場合に、時間と手間を省いてある程度のスタイルが適用できるというメリットがかなりありますね。1からサイトデザインを作り込んでいくよりも、随分手軽に作業が出来るようになりますが、きちんと指定されたルールに従い記述していく必要があります。

また、カスタマイズしながら独自のテーマを作成していくことも可能で、既に「テーマ」を無料で配布しているサイトもありますので自分好みのデザインを探してみてください。

 


 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > Bootstrapの基本的な使い方