Bootstrapがすごくイイ
2016/01/28
おはようございます！rmascoです。
同僚から教えてもらったBootstrapが使ってみたらすごく面白かったので、
記事にしたいと思います。
Bootstrapとは
Bootstrapとは？
BootstrapとはCSSフレームワークの一種で、
クラス名を付けることによって、CSSの細かい実装をしなくても、
綺麗なサイトが作れてしまいます。
これだけ聞くと、大したことしくれないんじゃないかと思っていました。
しかし、触ってみると、かなり便利！！
実際に使用してみました
まずはこの画面をご覧下さい。
http://www.rmasco.com/bootstrap/index.html
この画面がBootstrapを使用して作った画面です。
この画面を作るのに、30分かかりませんでした。
ボタンなども綺麗になり、フォームに枠もついており、
小奇麗に仕上がっているかと思います。
これがBootstrapの力です。
僕自身はCSSは一切書いていません。
書いたのはHTMLだけ。
Bootstrapの使い方
言葉で説明するよりも、まずはソースを見てもらったほうが早いかと思います。
<!DOCTYPE html>
|
1 |
<html><br /> <head><br /> <meta charset="utf-8"><br /> <title>Bootstrap テスト</title><br /> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br /><br /> <!-- Le styles --><br /> <link href="./css/bootstrap.css" rel="stylesheet"><br /> <link href="./css/bootstrap-responsive.css" rel="stylesheet"><br /><br /> <!--[if lt IE 9]><br /> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><br /> <![endif]--><br /><br /> </head><br /> <body><br /> <div class="container"><br /> <div class="span4 well"><br /> <form class="form-horizontal"><br /> <fieldset><br /> <legend>ログインフォーム</legend><br /> <div class="control-group"><br /> <label class="control-label" for="login_id">Login ID:</label><br /> <div class="controls"><br /> <input type="text" id="login_id" class="input-large" placeholder="Login ID" /><br /> </div><br /> </div><br /> <div class="control-group"><br /> <label class="control-label" for="passwd">PassWord</label><br /> <div class="controls"><br /> <input type="password" id="passwd" class="input-large" placeholder="Password" /><br /> </div><br /> </div><br /> <button class="btn btn-primary offset2">ログイン</button><br /> </fieldset><br /> </form><br /> </div><br /> </div><br /> </body><br /></html> |
これだけです。
何度もいいますが、CSSは一切書いていません。
あと、ボタンも画像ではなくBootstrapが自動的にこういう見た目にしてくれています。
ソースコードの解説
まず重要なのはCSSのインクルードの部分になります。
|
1 |
<link href="./css/bootstrap.css" rel="stylesheet"> |
これでおしまいです。
非常に簡単です。
次に実際のHTML部分を見てみましょう。
まず、ログインフォームが全体的に灰色になっているようなところです。
|
1 |
<body><br /> <div class="container"><br /> <div class="span4 well"><br />〜フォームのソース〜<br /> </div><br /> </div><br /> </body> |
この部分で実現しています。
divにclass=”span4 well”>という記述があるかと思います。
ここがBootstrapで処理してくれている部分です。
こちらのspan4というのは、大きさなどが定義されているクラスで、1〜15まであるようです。
また、その横にあるwellというクラスですが、こちらをつけることにより、
ボックスのような表示と灰色の背景という形になります。
何度も言いますが、CSSは一切書いてません。
Bootstrap内にあるものをうまく使うといった形でしょうか。
それではフォームの中身を見ていきましょう。
下記フォームのソースになります。
|
1 |
<form class="form-horizontal"><br /> <fieldset><br /> <legend>ログインフォーム</legend><br /> <div class="control-group"><br /> <label class="control-label" for="login_id">Login ID:</label><br /> <div class="controls"><br /> <input type="text" id="login_id" class="input-large" placeholder="Login ID" /><br /> </div><br /> </div><br /> <div class="control-group"><br /> <label class="control-label" for="passwd">PassWord</label><br /> <div class="controls"><br /> <input type="password" id="passwd" class="input-large" placeholder="Password" /><br /> </div><br /> </div><br /> <button class="btn btn-primary offset2">ログイン</button><br /> </fieldset><br /> </form> |
formにはclass=”form-horizontal”という記述があります。
こちらはフォームのレイアウトを決めているところで、
縦に項目が並ぶようなレイアウトを指定しています。
フォームの他のレイアウトに関しては、Bootstrapのフォームのページをご覧下さい。
フォームについて英語のサイトから見様見真似で書いているので、
もしかすると記述違いなどあるかもしれません。。。
fieldsetタグでフォームを囲み、その中に項目を書いていきます。
legendタグにてフォームのタイトルを記述
divに「control-group」というクラス名をつけて、１項目分の領域を確保します。
その中にlabelを入れて、実際に入力してもらう項目はdivの「controls」という中にinputタグなどを記述します。
最後にボタンです。
こういう綺麗なボタンって、なかなか作れないですよね。(特に開発しかできない僕は・・・)
buttonタグに「btn」というクラスと「btn-primary」というクラスを付けることで、
あのような綺麗なボタンが出来上がります。
何度も言いますが、CSSは一切書いてません。
Bootstrapがすべてやってくれます。
こういう綺麗な画面は、開発者の方はなかなか作れないかと思います。
もちろんCSSを読めるけど、実際に書くとなると大変時間がかかります。
早く機能を作りこみたいのに、見た目の調整だけで終わってしまって、
なんか疲れた〜ってなります。。。
Bootstrapを使えば、簡単に綺麗な見た目が実現できます。
ただ、もう少し人と違ったデザインでやりたいという場合には向かないかもしれません。
そういった方のために、デザインをカスタマイズできるツールも出ているようです。
StyleBootstrap
自分の好みの色や、サイトに合わせた色にするだけでも、そのままBootstrapを使うサイトよりは、
見栄えが少し変わりますね。
世の中には便利なものを開発する人がいるもんですね。
僕もこんなものを開発してみたいです。