Bootstrapの使い方!Web開発初心者にもわかりやすく解説

一昔前までは、ホームページやWebシステムを作成するとしたら1からコードを書いていくことが当たり前でしたが、現在は構築を便利に進めるための無料サービスが提供されています。

そこで、今回は便利なWebフレームワークである「Bootstrap」をご紹介します。

Webフレームワークとは、ボタンやテーブル等のホームページを構築する上で必要となる機能の枠組みのことです。例えば、Webフレームワークを使えば、わざわざボタンを表示させるためのコードを書く必要がなくなるなど、効率的に開発を進めることができます。
様々な場面で導入が増えているBootstrapの使い方をマスターして、開発スキルを上げていきましょう!

使い方の前に、そもそもBootstrapとは?

今回ご紹介するBootstrapとは、つぶやきでお馴染みのTwitter社が開発した、WebサイトやWebページを効率よく開発するためのWebフレームワークです。
見た目を調整するCSSファイルや動きをつけるjavascriptファイルが既に作成されており、それらの定義を呼び出すことでWebフレームワークの開発を軽くすることができます。

このように、既に出来上がっている雛形を自分のコードでカスタマイズできるものを「Webフレームワーク」といいます。
ボタンやログイン機能のように頻繁に使い、開発が面倒な機能をパッケージ化したものであり、自分で書くコードがアプリケーションの動作の主軸となるものとイメージしておけば良いでしょう。

 

Bootstrapを使うメリットとは?

Web開発の負担を軽くしてくれるBootstrapですが、具体的にどんな特徴やメリットがあるのかご紹介します。

Bootstrapのメリット①:レスポンシブWebデザイン

メリットの1つ目として挙げられるものが、BootstrapはレスポンシブWebデザインに対応しているという点です。

レスポンシブWebデザインとは、1つのWebページで、PC、スマートフォン、タブレットなどに対応することを指します。
Bootstrapは同じ1つのページでPCにもスマートフォンにも対応することができるため、PC用とスマートフォン用の2つのページを作る必要がありません。

Bootstrapに対応しているブラウザは下記の通りです。

■Mobile OS:Android・iOS
Chrome、Firefox、Microsoft Edge

■PC OS:Mac・Windows
Chrome、Firefox、Opera

Bootstrapのメリット②:汎用性の高さ

BootstrapはWebサイトやWebアプリの規模を問わず利用することができます。

既にCSSファイルやjavascriptファイルが作成されているため、Webデザインや、Webページの土台となるHTML、CSSの知識がない初心者であっても簡単に扱えるように設計されています。

Bootstrapのメリット③:デザイン性に優れたコンポーネント

コンポーネント(部品)とは、フォームやボタン、ナビゲーションなどのパーツのことです。制作者はコンポーネントを1から制作せずとも、Bootstrapであらかじめ用意されているCSSなどを使用することができます。そうすることで、デザインについての知識がない人、センスがないと不安に思っている人でも、ある程度の見栄えを確保することが可能です。

また、Bootstrapはテーマや色合いの変更が簡単です。
Bootstrapのフリーテーマを提供している「bootswatch」などからCSSファイルをダウンロードし、既に配置されているCSSファイルと差し替えるだけで、簡単にテーマや色合いを変更できます。

 

Bootstrapの使い方:ダウンロード・セットアップ方法

それでは、実際にBootstrapを利用するためのセットアップ方法をご紹介していきます。Bootstrapを使用するためには、BootstrapとjQuery(JavaScriptのライブラリ)を読み込む必要があります。読み込む方法は以下の2パターンがあります。

①ソースをダウンロードして、ローカルに配置して読み込む

1. BootstrapのHPにアクセス
2. 「Download」ボタンをクリック

Bootstrap ダウンロード

3. Compiled CSS and JSの下にある「Download」ボタンをクリック

Bootstrap ダウンロードボタン
4. ダウンロードしたZIPファイルを解凍
5. 解凍したフォルダにindex.htmlファイルを配置
(配置イメージ)

Bootstrap index.htmlファイル

(index.htmlに記載するコード例:Starter template)

6. index.htmlファイルをダブルクリックして「Hello, world!」と表示されることを確認

Bootstrap Hello, world!

②すでにホストされているファイルをインターネット経由で読み込む

ローカルに配置したindex.htmlファイルのheadタグに下記コードを追加する。
(サンプルコード)

 

①または②の方法で、Bootstrapのダウンロード・セットアップは完了です。

 

Bootstrapの使い方:グリッド・テーブル・ボタン・フォームはどうする?

最後に具体的なBootstrapの使い方についてご紹介します。
今回はBootstrapを使っていく上で基本となる「グリッド・テーブル・ボタン・フォーム」についてそれぞれご説明していきます。

①Bootstrapでボタンを表示させる方法

ボタンの表示方法は簡単で、下記のようにコードを差し込むだけです。
(サンプルコード)

Bootstrap ボタン  
(色の変更)
a要素、button要素のclassに“btn btn-{プロパティ名}”を追加

例:プロパティ名
default、success、info、warning、danger、link

(サイズの変更)
a要素、button要素のclassに“btn-{プロパティ名}”を追加
(サンプルコード)

Bootstrap ボタンサイズ変更 

その他のボタンのオプションはBootstrap公式HPをご確認ください。

②Bootstrapでテーブルを利用する方法

次にテーブルの利用方法をご紹介します。

①テーブルの表示方法
class=”container”の中にtable要素に対してclass=”table”をつける

(サンプルコード)

Bootstrap テーブル 表示方法

②セルの背景色を変える
tr要素/td要素のclassに対して「active」「success」「warning」「danger」「info」のいずれかを指定

(サンプルコード)

③テーブルをレスポンシブ対応する
「div class=”container”」要素とtable要素の間に「div class=”table-responsive”」要素を追加
→PCの場合、ブラウザを縮小するとスクロールバーが出現

(サンプルコード)

 Bootstrap テーブル レスポンシブ対応

④枠線を追加
table要素のclassに対して「table-bordered」を追加

(サンプルコード)

 

Bootstrap テーブル 枠線をつける

⑤1行間隔で背景色を変える
table要素のclassに対して「table-striped」を追加

(サンプルコード)

Bootstrap テーブル 1行間隔で背景色を変える

その他のテーブルのオプションはBootstrap公式HPをご確認ください。

③Bootstrapでグリッドシステムを使う

Bootstrapのメリットの1つとしてご紹介したレスポンシブWebデザイン。それはグリッドシステムによって実現されています。
グリッドシステムとは、閲覧者が使うデバイスによってWebページの構造を変化させるための仕組みです。下記のルールでデザインをしていきます。

1:class=”container”か”container-fluid”の中に記載
2:class=”row”の中に記載
3:class=”col-{prefix}-{columns}”の形式
4:{columns}は合計値が12になるように指定

(サンプルコード)

(PC画面)

Bootstrap グリッドシステム PC画面

(Mobile画面)

Bootstrap グリッドシステム Mobile画面

上記のコード「col-sm-8」のように、col-{prefix}-{columns} の形式で合計値12を振り分けます。そうすると、簡単に様々なデバイスに対応できるWebページを作成できます。

実際に使う際は、グリッドシステムのprefixの画面サイズの対応表も参考にしてください。

対応デバイス 画面サイズ prefixの指定方法
(*は数値)
prefixの意味
デスクトップ 1200px以上 col-lg-* Large
992px以上、1200px未満 col-md-* Medium
タブレット 768px以上、992px未満 col-sm-* Small
モバイル 768px以下 col-xs-* Xtra Small

また、以下のオプションも必要に応じて活用してください。

★画面サイズによって非表示/表示を制御
visible-{prefix} または、 hidden-{prefix} を指定
→デバイスにより表示、非表示の制御が可能です。

④Bootstrapでフォームを表示する方法

Bootstrapを活用すればフォームも簡単にWeb上に表示させることが可能です。使用ルールは下記の通りです。

1:formタグの中
2:class=”form-group”を入れる
3:inputタグにclass=”form-control”を付ける

(サンプルコード)

Bootstrap フォーム

上記の他にもオプションを活用して表示方法を変えることができます。

★インラインでフォームを表示させる方法

formタグに「class=”form-inline”」を付ける

(サンプルコード)

 

bootstrap_15

★フォーム項目を水平に配置する方法

formタグに「class=”form-horizontal”」を付ける

(サンプルコード)

 

Bootstrap フォーム 水平配置 

その他のテーブルのオプションはBootstrap公式HPをご確認ください。

今回ご紹介したBootstrapの機能は、あくまで基本的なものなので、他の機能を使いこなせばより高度なWebページを構築することができます。
興味がある方は是非、Bootstrapの使い方を学んでみてください。

目的別!ITスキル講座

基礎的なパソコン操作の知識があればOK!

最新!iOS12アプリ開発講座

日本を代表するデータサイエンティスト辻真吾氏による人気講座

初級者から学べる人工知能講座の決定版