こんにちは、キャスレーコンサルティングSI部の宮内です。
今回はフロントエンドツール『Bootstrap』について
その概要と導入方法、簡単な使い方について書きたいと思います。
まずは概要から
【概要】
■ Bootstrapって？
米ツイッター社が開発提供しているフロンドエンドツール（CSSフレームワーク）
■ 何ができるの？
ある程度見栄えのいいwebデザインを素早く整えることができる
※ レスポンシブデザインに対応している
■ 使用するメリットは？
デザインに関わる工数が削減できる
デザインが苦手なエンジニアも気軽に導入できる
■ デメリット
デザインにオリジナリティが出しにくい
複雑なレイアウトが求められる場合、利用できないこともある
■ 導入方法
jsファイル、cssファイルを読み込むだけ
■ 公式サイト
http://getbootstrap.com/
■ 近況
2013/8/19にver 3.0.0がリリース
○主な変更点
・モバイルファーストに変更
・フラットデザインを取り入れよりシンプルなデザインに
・グリッドシステムの改良
・新たなアイコンの追加
・Internet Explorer 7およびFirefox 3.6のサポート廃止
※ レスポンシブデザイン
PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法
なお今回は以下の環境で実施しました
Bootstrap 3.0.0
ブラウザ chrome 28.0.1500.95 m
今回はデザインに全く手をいれていない画面に
Bootstrapを導入し、見栄えがどう変わるのかを見ていきましょう。
【とりあえずで作った問い合わせフォーム】
inquiry.html
<html lang="ja"> <head> <meta charset="utf-8"> <title>Bootstrap learning</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap learning</title> </head> <body> <h4><strong>お問い合わせ</strong></h4> <hr> 会社名<br> <input type="text"><br> 名前<br> <input type="text"><br> メールアドレス<br> <input type="text"><br> 担当者電話番号<br> <input type="text"><br> お問い合わせ内容<br> <textarea></textarea><br> <input type="submit" value="送信"> </body> </html>
この画面を最終的に下記のような画面しあげていくこにします。
【Bootstrapを導入した問い合わせフォーム】
【準備】
公式サイトからBootstrapをダウンロードします。
http://getbootstrap.com/getting-started/
ダウンロードしたzipをファイルを解凍するとdistフォルダができるので、その直下に
inquiry.htmlを作成します。
前述のコードを記述後以下の内容を追加します。
<!DOCTYPE html> <html lang=”ja”> <head> <meta charset=”utf-8″> <title>Bootstrap learning</title> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”css/bootstrap.min.css” rel=”stylesheet” media=”screen”> </head> <body> <script src=”http//code.jquery.com/jquery.js”></script> <script src=”js/bootstrap.min.js”></script> <div class=”container”> <form class=”form-horizontal” role=”form”> ～ </form> </div> </body> </html>
これでbootstrapを使う準備が整いました。
それでは画面のデザインを整えていきましょう。
【実装】
基本的には要素をタグで囲いclassを設定するといった流れになります。
①タイトル部分の変更
<blockquote>タグで囲います。
<h4><strong>お問い合わせ</strong></h4> <hr>
↓
<blockquote> <p>お問い合わせ</p> </blockquote>
すると以下のようにタイトル部分が完成します。
②ラベルの変更
続いてラベル部分を整えていきましょう。
<span>タグで囲いclassにGlyphiconsを指定します。
会社名<br>
↓
<span class=”glyphicon glyphicon-briefcase”> 会社名</span>
すると以下のようにアイコンが追加されるのが確認できます
Bootstrapにはこの他利用できるアイコンが数多く存在します。
使用可能なGlyphiconsとクラス名については公式サイトを確認してみて下さい
残りの項目についても、以下のよう変更します。
名前<br>
↓
<span class=” glyphicon glyphicon-user”> 名前</span>
メールアドレス<br>
↓
<span class=” glyphicon glyphicon-envelope”> メールアドレス</span>
担当者電話番号<br>
↓
<span class=” glyphicon glyphicon-phone-alt”> 担当者電話番号</span>
お問い合わせ内容<br>
↓
<span class=” glyphicon glyphicon glyphicon-pencil”> お問い合わせ内容</span>
変更保存後、ブラウザでそれぞれiconが追加されるのを確認して下さい
③input部品の変更
続いてinput部品にとりかかりましょう
inputタグをdiv class=”form-groupで囲います。
div class=”col-md-4はテキストボックスの横幅を制御しています。
これはBootstrapが採用しているgridシステムを使っています
（※gridシステムについて詳細な説明を割愛します。詳しい仕組みは公式サイトを参照してください）
さらにplaceholderを指定することでガイドメッセージが表示されます。
<input type="text"><br>
↓
<div class=”form-group”> <div class=”col-md-4″> <input type=”text” id=”companyName” class=”form-control” placeholder=”キャスレーコンサルティング株式会社”> </div> </div>
残りの項目についても、以下のよう変更します。
<!– 名前–>
<input type=”text”><br>
↓
<div class=”form-group”> <div class=”col-md-4″> <input type=”text” id=”name” class=”form-control” placeholder=”山田太郎”> </div> </div>
<!– メールアドレス–>
<input type=”text”><br>
↓
<div class=”form-group”> <div class=”col-md-4″> <input type=”email” id=”mailAddress” class=”form-control” placeholder=”example@example.jp”> </div> </div>
<!– 担当者電話番号 –>
<input type=”text”><br>
↓
<div class=”form-group”> <div class=”col-md-4″> <input type=”tel” id=”telNo” class=”form-control” placeholder=”03-6271-1410″> </div> </div>
<!– お問い合わせ内容 –>
<input type=”text”><br>
↓
<div class=”form-group”> <div class=”col-md-4″> <textarea id=”inquiry” class=”form-control” rows=”10″></textarea> </div> </div>
④ボタンの変更
最後はボタンの修正になります。
例のごとくタグで囲いクラスを指定します
btn-primaryを指定するとボタンの色が青色になります。
※ボタン色やサイズの変更については公式サイトを参照してみて下さい。
span class=”glyphicon glyphicon-sendではボタンにアイコンを追加しています。
<input type=”text”><br>
↓
<button class=”btn btn-primary”> <span class=”glyphicon glyphicon-send”> 送信 </button>
以上で完成となります。
変更後のinquiry.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <title>Bootstrap learning</title> </head> <body> <script src="http//code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> <div class="container"> <form class="form-horizontal"> <blockquote> <p>お問い合わせ</p> </blockquote> <span class="glyphicon glyphicon-briefcase"> 会社名</span> <div class="form-group"> <div class="col-md-4"> <input type="text" id="companyName" class="form-control" placeholder="キャスレーコンサルティング株式会社"> </div> </div> <span class=" glyphicon glyphicon-user"> 名前</span> <div class="form-group"> <div class="col-md-4"> <input type="text" id="name" class="form-control" placeholder="山田太郎"> </div> </div> <span class=" glyphicon glyphicon-envelope"> メールアドレス</span> <div class="form-group"> <div class="col-md-4"> <input type="email" id="mailAddress" class="form-control" placeholder="example@example.jp"> </div> </div> <span class=" glyphicon glyphicon-phone-alt"> 担当者電話番号</span> <div class="form-group"> <div class="col-md-4"> <input type="tel" id="telNo" class="form-control" placeholder="03-6271-1410"> </div> </div> <span class=" glyphicon glyphicon glyphicon-pencil"> お問い合わせ内容</span> <div class="form-group"> <div class="col-md-4"> <textarea id="inquiry" class="form-control" rows="10"></textarea> </div> </div> <button class="btn btn-primary"> <span class="glyphicon glyphicon-send"> 送信 </button> </form> </div> </body> </html>
いかがでしたでしょうか？
Bootstrap導入により簡単な実装で画面が見ちがえりました。
上記のデザインを自分で一から実装するのはそれなりに手間のかかる作業です。
今回はBootstrapについて、その概要と基本的な使い方について学習しました。
Bootstrapが活用できる場合は積極的に導入し、クールなwebサイトをスピーディーに構築しましょう。
