携帯・スマホサイトを主に担当しているので、PCサイトについては少し門外漢なのですが、デバイスが進化に伴って今までのような、スマホとPCで別々のサイトを作らなければという前提が少しずつ崩れてきているようにも感じた次第で、今のうちからある程度両立できるようにツールをチェックしておこうと考え、行き着いたのがtwitter社の「BootStrap(ブートストラップ)」です。
この「BootStrap」ですが、いわゆるフロンドエンドのフレームワークなので、HTMLとCSSの知識があればあらかた実装が可能です。とは言ってもHTML5が前提なので、ここら辺の知識がないと少し難しく感じると思います。実際、僕もHTML5については自信をもって言えるほどの理解がないのでなかなかに苦労します。ではなぜ「BootStrap」なのか、そのメリットを上げていきます。
- デザインがカッコいい
- レスポンシブデザインを前提に作られている
- コンポーネントの種類が豊富
- 以前のエントリ【「HTML5 Boilerplate 4」でレスポンシブサイトを作ってみた。】で紹介したinitializrに対応している
特にコンポーネントはかなり充実していて、ボタンやナビゲーションバー、フォームパーツ等の定番のものから、アラートやプログレスバーまで用意されているので、このツール一本で相当にサイトの作りこみを行えます。また、HTMLやCSSに自信がない人でもテンプレートが用意されていますし、initializrで大まかに形を作ってから、使いたいコンポーネントを実装していくという使い方も可能です。
導入方法については、
1.ダウンロードする。
2.以下のHTMLを作成する。
<html>
<head>
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
3.公式サイトのガイドラインを参考にレイアウトを組む
4.公式サイトのガイドラインを参考にコンポーネントを実装する
といったところでしょうか。僕自身も実はこのツールを今日ダウンロードしてきたばかりなので、詳細な説明は出来ていませんが、もうちょっと使い慣れてきておススメしたい利用方法とかが見えてきたら記事にしたいと思います。