Bootstrapの使い方を入門者向けにわかりやすく紹介！ダウンロード方法やグリッドシステムについても解説！
Bootstrapとは
美しい画面を作り出したい。
そんな気持ちでWeb開発をスタートした結果、下記のような壁にぶつかることがあります。
- おしゃれな画面が作れない
- なんとなく垢抜けないWebデザインになってしまう
- スマホに対応する画面を作りたいけどコード記述が面倒くさい
「何とかWebデザインは完成したけど、かなりの労力を要してしまった」という悩みを抱くこともあるでしょう。
そんな時にぜひ試してほしいのが「Bootstrap」です。
フロントエンドのCSSフレームワーク
Bootstrapはフロントエンドに関わるCSSフレームワークです。
通常、フロントエンド部分を作成する時には、CSSでデザインを整えたり、JavaScriptを使って動きを出したり…といったことが必要になります。
しかし、Bootstrapには最初からよく利用されるスタイルが定義されています。
そのため、Bootstrapを使うことで簡単に美しいデザインページを作成することが可能です。
フレームワークとは
Web開発のシーンで必要な「枠組み」を詰め込んでパッケージ化したものです。
どの部分の枠組みを詰め込んでいるかは、フレームワークによって違ってきます。
先に述べたとおり、Bootstrapは「CSSのフレームワーク」。
Webデザイン部分の開発を簡略化してくれるフレームワークです。
Bootstrapを使用することで画面の大枠を作る労力もぐっと減少するでしょう。
いくつかの種類がある
Bootstrapにはいくつかの種類があります(「Bootstrapの種類」参照)。
どのBootstrapを使用するかによって初心者向けのものだったりおすすめ用途だったりが違ってきます。
構成
Bootstrapの中身は「HTML」「CSS」「JavaScript」です。
Bootstrapが開発された背景
「Bootstrapの主な特徴」で詳しく後述しますが、Bootstrapは簡単にスマホ対応画面を作り出すことができます。
最近「基本はスマホやタブレットを使ってWebサービスを閲覧したり使用したりする」という人が非常に多くなりました。
それに伴い、開発現場では「スマホ・タブレット対応の画面を作る」という必要性が生まれました。
パソコン画面と携帯端末の画面は表示や操作方法に違いがあります。
どんなに優れたサービス・アプリケーションを開発したとしても、スマホやタブレットに対応していないと集客がうまくいかないことも。
また、Webサービスやアプリケーションに求められる品質はどんどん高まってきています。
ユーザーの目が肥えてきたということもあるでしょうが、「使用感」「ユーザーへの配慮（わかりやすさなどのホスピタリティ）」。
そんなポイントをユーザーは重視する傾向があります。
開発側は「ユーザーに求められている品質を提供するため迅速に対応する」ということを意識しています。
開発スピードをアップさせるために必要なのは「無駄な作業に時間を費やさないこと」です。
膨大なコード記述などはカットし、スムーズな開発をおこないたい…。
そんなニーズに応えるべく登場したのがBootstrapでした。
Bootstrapの種類
この項目では、特に人気があるBootstrapをいくつかご紹介します。
Twitter Bootstrap
Twitter社が提供しているBootstrapです。
以前は「Twitter Bootstrap」と呼ばれていましたが、2012年9月にオープンソースになったので「Bootstrap」と名称が変更になりました。
Angular directives for Bootstrap
「AngularJS」というJavaScriptフレームワークと連携可能です。
大規模アプリケーション向きなAngularJSは、他のライブラリやフレームワークと一緒に使うと互いに干渉し合ってしまうことも。
しかし、このBootstrapなら一緒に活用することができます。
BootstrapWP
世界的に有名なブログ作成ツールであるWordPress(WP)。
そんなWPと組み合わせることができるようにカスタマイズされたBootstrapがこちらです。
WPで簡単にデザイン性が高いWebサイトを作成したい人におすすめです。
Bootstrap Themes
Bootstrap公式です。
美しいデザインのテンプレートが多数販売されており、様々なカスタマイズが可能です。
有料のテンプレートが多い傾向にありますが、その分デザインや使用感は抜群。
開発効率をアップさせたいなら一度使ってみると良いでしょう。
Bootstrapのバージョン
Bootstrapの開発はまだ完了していません。
そのため様々なバージョンが存在します。
ただ、闇雲に新しいバージョンに手を出すのは注意が必要です。何故なら、以前のVerを使っている人が多い可能性が高いからです。
シェア率が高いということは、活用方法や技術などをインターネット上で見つけることができるチャンスが多いということ。
「ちゃんと使いこなせるかわからない…」という場合は、情報が多い以前のバージョンを入手するのも良いでしょう。
ただ、今後は現在リリースされているバージョンのほうがシェア率が高くなるはず。
将来性を取るなら最新バージョンのBootstrapを入手しておくことをおすすめします。
Bootstrapの主な特徴
グリッドシステム
Bootstrapにはグリッドシステムが備わっています。
サイトの横幅を均一に分けるガイドラインのことを「グリッド」といいます。
Bootstrapにはこのグリッドが12本存在し、デザインの指標として使うことが可能です。
レスポンシブWebデザイン
スマートフォンやタブレットなどの画面レイアウトデザインをCSSのメディアクエリを利用して自在に調整することができます。
先に紹介した「グリッドシステム」のことです。
表示するものをグリッドに合わせて配置することにより、画面サイズが異なるデバイスで表示する際もレイアウトデザインを最適なものにできます。
「スマホ用画面」「タブレット用画面」など個別で画面を作成しなくて良いので非常に便利です。
パソコンなら「Mac」「Windows」に対応しています。「Chrome」「Firefox」「Opera」などのブラウザで閲覧可能です。
モバイルなら「iOS」「Android」に対応しています。「Chrome」「Firefox」「Microsoft Edge」などのブラウザで閲覧可能。
ただし、Internet Explorer7以下とFirefox3.6以下はCSS3メディアクエリがサポートしていないブラウザのため未対応です。
Bootstrapの利点
この項目では、Bootstrapを使うメリットについてご紹介しましょう。
スマートフォン対応のページを簡単に作れる
Bootstrapはレスポンシブデザインに対応しています。
通常、スマホ対応画面を作るためには個別に作成する必要があります。
ですが、Bootstrapのようなレスポンシブデザインに対応しているフレームワークならその必要はありません。
WebサービスやWebアプリケーションの画面サイズをデバイスごとの横幅サイズに合わせて調整してくれます。
開発時間がかなり短縮できるでしょう。
美しいデザインを簡単に作り出せる
Bootstrapを使えば、ボタンやフォームなどのコンポーネントを0から作成する手間を省くことができます。
デザイン知識がない人でも手軽に美しいデザインのWebサービスを開発できる―それがBootstrapの特徴です。
テーマやカラーの変更が容易
Bootstrapには様々なテーマ（テンプレート）があるため、現在使っているCSSファイルを入れ替えるだけで簡単にテーマやカラーを変更することが可能です。
Bootstrapの無料テーマをダウンロードすることができるサイト（bootswatchなど）から気に入ったCSSファイルをダウンロードできます。
HTMLやCSSの知識がなくても扱える
BootstrapにはHTMLやJavaScript、CSSファイルが入っていることは先に説明したとおりです。
これらのファイルが作成されたものを使うので、HTMLやCSSの知識がない人でも簡単にWebデザイン開発をおこなうことができます。
Webサービス・アプリの規模に関係なく使用可能
Bootstrapはどんな規模のWebサービスやアプリケーションに対しても使用可能です。
「大きすぎるサービスはダメ」などという縛りはなく、様々な開発環境に対応することができます。
Bootstrapの導入
Bootstrapの魅力がわかったところで、実際にBootstrapをインストール・ダウンロードしてみましょう。
公式ダウンロードページでインストールする
公式サイトにアクセスして、Bootstrapを入手します。
「Download」ボタンを押してください。
また「Download」ボタンが出てくるのでそれもクリック。
ZIPファイルを解凍してフォルダにHTMLファイルを準備する
ダウンロードしたZIPファイルを解凍し、フォルダに「index.html」という名前をつけてHTMLファイルを入れましょう。
ファイルに入れるコードはこちらを参照してください。
表示確認
「index.html」ファイルをダブルクリックします。ブラウザが立ち上がりますのでちゃんと文字が表示されるかを確認してください。
Bootstrapの使い方①グリッドシステム
Bootstrapでグリッドシステムを使う時は、「class=”container”か”container-fluid”」、「class=”row”」内に記述します。
形式は「class=”col-{prefix}-{columns}”」で「{columns}」の中は合計で12の値になるようにしてください。
Bootstrapの使い方②フォーム
Bootstrapを使えば、難しいことは一切なく整ったフォームを作成可能です。
フォームの作り方
foamタグ内に「class=”form-group”」を入れましょう。
その上でinputタグに「class=”form-control”」を記述しましょう。
そうすることで美しいフォームを作ることができます。
インラインフォーム
インラインにフォームを並べて表示させたい時は、foamタグに「class=”form-inline”」をつけましょう。
水平配置
フォームを水平に並べたい時には「class=”form-horizontal”」とfoamタグにつけるだけで、フォームが水平に配置されます。
Bootstrapの使い方③ボタン
使用方法
a要素とbutton要素のクラスに「“btn btn-{プロパティ名}”」を追加することでボタンにスタイルをつけることが可能です。
背景が白×黒文字というスタイルにしたいなら「default」。
背景が緑×白文字というスタイルにしたいなら「success」。
背景が青×白文字というスタイルにしたいなら「primary」。
背景が水色×白文字というスタイルにしたいなら「info」。
背景が赤×白文字というスタイルにしたいなら「danger」。
背景がオレンジ×白文字というスタイルにしたいなら「warning」。
背景が白×青文字というスタイルにしたいなら「link」。
コード記述例
- <button type=”button” class=”btn btn-success”>緑</button>
- <button type=”button” class=”btn btn-warning”>オレンジ</button>
上記コードを記述すれば、緑のボタンとオレンジのボタンを作成することができます。
サイズ指定
「“btn-{プロパティ名}”」を追加すればボタンサイズを変更することも可能です。
まとめ
Bootstrapについてご紹介しましたが、いかがだったでしょうか。
WebサービスやWebアプリケーションを少しでも効率良く開発したい人に試して欲しいフレームワーク・Bootstrap。
この記事に目を通したことで、グリッドシステムで注目を浴びているBootstrapの魅力に気づいてもらえたなら幸いです。
Bootstrapは単独使用でも美しい画面を作成することができます。モック画面やオリジナルデザインを作成する前の基盤としての使い方もできるでしょう。
Web開発の基盤部分として、Bootstrapを取り入れてみることをおすすめします。
自分のニーズに合う便利な使い方をマスターするためにも、まずはBootstrapをインストールして実際に触ってみてください。
