一昔前までは、ホームページやWebシステムを作成するとしたら１からコードを書いていくことが当たり前でしたが、現在は構築を便利に進めるための無料サービスが提供されています。
そこで、今回は便利なWebフレームワークである「Bootstrap」をご紹介します。
Webフレームワークとは、ボタンやテーブル等のホームページを構築する上で必要となる機能の枠組みのことです。例えば、Webフレームワークを使えば、わざわざボタンを表示させるためのコードを書く必要がなくなるなど、効率的に開発を進めることができます。
様々な場面で導入が増えているBootstrapの使い方をマスターして、開発スキルを上げていきましょう！
INDEX
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デザイナーにもメリットがあるので、気になる方はぜひ習得してみてください。
＼21万以上のオンラインコースから選べる！／
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ページの土台となるHTMLやCSSの知識がない初心者でも、簡単に扱えるように設計されています。
Bootstrapのメリット③：デザイン性に優れたコンポーネント
コンポーネント(部品)とは、フォームやボタン、ナビゲーションなどのパーツのことです。制作者はコンポーネントを１から制作せずに、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を使用するためには、BootstrapとjQuery(JavaScriptのライブラリ)を読み込む必要があります。読み込む方法は以下の2パターンがあります。
①ソースをダウンロードして、ローカルに配置して読み込む
1. BootstrapのHPにアクセス
2. 「Download」ボタンをクリック
3. Compiled CSS and JSの下にある「Download」ボタンをクリック
4. ダウンロードしたZIPファイルを解凍
5. 解凍したフォルダにindex.htmlファイルを配置
(配置イメージ)
(index.htmlに記載するコード例:Starter template)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> </body> |
6. index.htmlファイルをダブルクリックして「Hello, world!」と表示されることを確認
②すでにホストされているファイルをjsDelivr経由で読み込む
ローカルに配置したindex.htmlファイルのheadタグに下記コードを追加する。
(サンプルコード)
|
1 2 3 4 5 6 7 |
<head> <meta charset="utf-8"> <!-- BootstrapのCSS読み込み --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"><!-- jQuery読み込み --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- BootstrapのJS読み込み --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script></head> |
①または②の方法で、Bootstrapのダウンロード・セットアップは完了です。
Bootstrapの使い方：グリッド・テーブル・ボタン・フォームはどうする？
最後に具体的なBootstrapの使い方についてご紹介します。
今回はBootstrapを使っていく上で基本となる「グリッド・テーブル・ボタン・フォーム」についてそれぞれご説明していきます。
①Bootstrapでボタンを表示させる方法
ボタンの表示方法は簡単で、下記のようにコードを差し込むだけです。
(サンプルコード)
|
1 2 |
<button type="button" class="btn btn-primary">Blue</button> <button type="button" class="btn btn-danger">Red</button> |
色の変更
a要素、button要素のclassに“btn btn-{プロパティ名}”を追加
例：プロパティ名
default、success、info、warning、danger、link
サイズの変更
a要素、button要素のclassに“btn-{プロパティ名}”を追加
(サンプルコード)
|
1 |
<button type="button" class="btn btn-primary btn-lg">Blue</button> |
その他のボタンのオプションはBootstrap公式HPをご確認ください。
②Bootstrapでテーブルを利用する方法
次にテーブルの利用方法をご紹介します。
①テーブルの表示方法
class=”container”の中にtable要素に対してclass=”table”をつける
(サンプルコード)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="container"> <table class="table"> <thead> <tr> <th>#</th> <th>First</th> <th>Second</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>apple</td> <td>orrange</td> </tr> </tbody> </table> </div> |
②セルの背景色を変える
tr要素／td要素のclassに対して「active」「success」「warning」「danger」「info」のいずれかを指定
(サンプルコード)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="container"> <table class="table"> <thead> <tr class="active"> <th>#</th> <th>First</th> <th>Second</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>apple</td> <td>orrange</td> </tr> </tbody> </table> </div> |
③テーブルをレスポンシブ対応する
「div class=”container”」要素とtable要素の間に「div class=”table-responsive”」要素を追加
→PCの場合、ブラウザを縮小するとスクロールバーが出現
(サンプルコード)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="container"> <div class="table-responsive"> <table class="table"> <thead> <tr> <th>#</th> <th>First</th> <th>Second</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>apple</td> <td>orrange</td> </tr> </tbody> </table> </div> |
④枠線を追加
table要素のclassに対して「table-bordered」を追加
(サンプルコード)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="container"> <table class="table table-bordered"> <thead> <tr> <th>#</th> <th>First</th> <th>Second</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>apple</td> <td>orrange</td> </tr> </tbody> </table> </div> |
⑤1行間隔で背景色を変える
table要素のclassに対して「table-striped」を追加
(サンプルコード)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="container"> <table class="table table-striped"> <thead> <tr> <th>#</th> <th>First</th> <th>Second</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>apple</td> <td>orrange</td> </tr> </tbody> </table> </div> |
その他のテーブルのオプションはBootstrap公式HPをご確認ください。
③Bootstrapでグリッドシステムを使う
Bootstrapのメリットの1つとしてご紹介したレスポンシブWebデザイン。それはグリッドシステムによって実現されています。
グリッドシステムとは、閲覧者が使うデバイスによってWebページの構造を変化させるための仕組みです。下記のルールでデザインをしていきます。
１：class=”container”か”container-fluid”の中に記載
２：class=”row”の中に記載
３：class=”col-{prefix}-{columns}”の形式
４：{columns}は合計値が12になるように指定
(サンプルコード)
|
1 2 3 4 5 6 7 8 9 |
<header style="background-color:gray">Header</header> <div class="container-fluid"> <div class="row"> <div class="col-sm-2" style="background-color:red;">Red</div> <div class="col-sm-8" style="background-color:blue;">Blue</div> <div class="col-sm-2" style="background-color:yellow;">Yellow</div> </div> </div> <footer style="background-color:gray">Footer</footer> |
(PC画面)
(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上に表示させることが可能です。使用ルールは下記の通りです。
１：formタグの中
２：class=”form-group”を入れる
３：inputタグにclass=”form-control”を付ける
(サンプルコード)
|
1 2 3 4 5 6 7 8 9 10 11 |
<form> <div class="form-group"> <label for="exampleInputEmail1">Email</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> |
上記の他にもオプションを活用して表示方法を変えることができます。
★インラインでフォームを表示させる方法
formタグに「class=”form-inline”」を付ける
(サンプルコード)
|
1 2 3 4 5 6 7 8 9 10 11 |
<form class="form-inline"> <div class="form-group"> <label for="exampleInputEmail1">Email</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> |
★フォーム項目を水平に配置する方法
formタグに「class=”form-horizontal”」を付ける
(サンプルコード)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form> |
その他のテーブルのオプションはBootstrap公式HPをご確認ください。
今回ご紹介したBootstrapの機能は、あくまで基本的なものなので、他の機能を使いこなせばより高度なWebページを構築することができます。
興味がある方は是非、Bootstrapの使い方を学んでみてください。
RANKING
RECOMMENDED COURSE
最新情報・キャンペーン情報発信中