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

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

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

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

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

Twitter社が開発したWebフレームワーク『Bootstrap』とは?

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

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

WebデザイナーもBootstrapを使うべき?

Webデザイナーの中には、「デザイナーが覚えて使うべきものなのか?」という疑問を持たれる方も少なくありません。確かに、1人でWebデザインを担当しており、すべて思い通りに書くことができる人にとってBootstrapは不要かもしれませんが、実際にはWebデザイナーにもBootstrapの使用を推奨している現場は増えています。

その理由は、特定の人だけしかWebデザインに対応できないという状況を防ぎ、制作物から属人化を排除することができるため、チームで開発する際はチーム全体のデザイン制作に関するクオリティを保てるようになるからです。

また、効率的にデザイン制作ができることも理由として挙げられます。例えば、Bootstrapのグリッドシステムを利用すると、レスポンシブデザインの検証にかかる時間を大幅に短縮することでき、デザイン制作が非常に効率的に進められます。

このように、Bootstrapを覚えておくとWebデザイナーにもメリットがあるので、気になる方はぜひ習得してみてください。

 

\文字より動画で学びたいあなたへ/

Udemyで講座を探す >

Bootstrapの特徴と利用するメリットとは?

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

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

1つ目のメリットは、Bootstrapはレスポンシブ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ページの土台となるHTMLCSSの知識がない初心者でも、簡単に扱えるように設計されています。

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

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

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

 

 Bootstrapには種類がある?

Bootstrapは、大まかに以下の4つの種類に分けられます。

  • Angular directives for Bootstrap
  • Twitter Bootstrap
  • Bootstrap Themes
  • BootstrapWP

それぞれの種類について解説します。

Angular directives for Bootstrap

AngularJSと連携できるBootstrapです。

AngularJSはGoogle社が開発したフロントエンド開発用のフレームワークになります。比較的大規模なWebアプリケーション開発で使われることが多いです。

AngularJSはフレームワークでお互いを干渉しやすく、機能を共存し合うことが難しいですが、Bootstrapはその可能性が低いので頻繁に使われます。

Twitter Bootstrap

その名の通りTwitter社が提供しているBootstrapです。

Bootstrap”と表現される場合、Twitter Bootstrapを意味することが多く、ほかの種類はここから派生したものになります。

Bootstrap Themes

Bootstrap公式のテーマです。無料・有料に関わらずさまざまなテーマが用意されています。

例えば、『Now UI Kit』や『Material Design for Bootstrap 4』などが有名です。おしゃれなデザインを少ないコーディングで簡単に作ることができます。

BootstrapWP

CMSの代表格、WordPress用にカスタマイズされたBootstrapです。

WordPressでWebサイトを構築する場合でもBootstrapWPを使用すれば、一味違う魅力的なサイトを作ることができます。

 

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

ここからは、実際にBootstrapを利用するためのセットアップ方法をご紹介していきます。

今回使用するBootstrapは、v5.0.2の最新バージョンです。

違うバージョンを使用する方は適宜自分のバージョンに置き換えてください。

Bootstrapを使用するためには、BootstrapjQuery(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!

②すでにホストされているファイルをjsDelivr経由で読み込む

ローカルに配置した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の使い方を学んでみてください。