Bootstrapとは

Bootstrapは最近よく聞くCSSの「フレームワーク」といわれるものです。CSSの「フレームワーク」とはCSSの「枠組み・スタイルなど」をある程度最初から定義している、ライブラリファイルのようなものです。

現在のWeb制作、開発では、ともにスピードが重視されています。「Bootstrap」を使用すると、既に用意されているスタイルを適用するだけで、格段に速く見栄えを整えられます。事実、Webシステムの管理画面などでBootstrapを使用するケースも増えてきました。

Bootstrapを使うメリットとして、レスポンシブWebデザインに対応しているという点があります。通常、スマートフォンやタブレットなど個別に対応するスタイルを作っていると大変手間がかかります。BootstrapはCSS3のメディアクエリを使用しているので、ブラウザの横幅サイズを判断基準として、レイアウトデザインを柔軟に調整することが可能です。

シンプルな指示でグリッドシステムを使用できたり、本格的なフォームやボタンを作成できたりと非常に便利なフレームワークが「Bootstrap」です。また、HTML/CSSを勉強してもデザインがいまいち…というときに役に立ちます。

Bootstrap 3に対応しているブラウザー

 ChromeFirefoxSafariAndroid Browser & WebViewMicrosoft Edge
AndroidAndroid v5.0+ supported
iOS
Windows 10 Mobile
 ChromeFirefoxInternet ExplorerMicrosoft EdgeOperaSafari
Mac
WindowsSupported, IE10+Not supported

2018/1/16現在 Bootstrapv3.3.7がリリースされています。

Bootstrapの導入

ダウンロードするには、BootstrapのTOPページにアクセスし、「Download Bootstrap」のボタンをクリックしてください。

次に表示されるページで、左にある「Download Bootstrap」をクリックするとダウンロードが始まります。

ダウンロードしたZIPファイルを解凍すると、「css」フォルダー、「js」フォルダー、「fonts」フォルダーの3つのフォルダーが表示されます。

すぐ使うためのHTMLコードのテンプレートがあります。「ダウンロードページ」を下へスクロールすると、「Basic Template」のカテゴリが表示されます。このカテゴリには、Bootstrapをすぐ使うためのHTMLコードのテンプレートが記載されてます。このHTMLコードをコピー&ペーストするだけで手軽に試していくことが可能です。

Basic template

上記コードをコピーして「index.html」としてHTMLファイルを作成してください。このファイルを「bootstrap」フォルダー内に設置します。

準備はこれで完了です。index.htmlをブラウザーで開いてください。「Hello, world!」とだけ表示されます。

 

 

 

グリッドシステムの使い方

グリッドシステムとは、スマートフォンやタブレットなどデバイスに応じて構造を変化させるための仕組みです。グリッドシステムを使うことで、簡単にレスポンシブWebデザインでレイアウトを作成することができます。

以下のルールでスタイルをつけると、レスポンシブWebデザインに対応した横幅を分割するスタイルを簡単に作ることができます。

class=”container”か”container-fluid”の中 class=”row”の中 class=”col-{prefix}-{columns}”の形式で{columns}は合計値が12になるように指定

Example: Stacked-to-horizontal(公式サイトの「Grid options」より引用)

col-sm-2のように、col-{prefix}-{columns} の形式で合計値12を振り分けることで、簡単にマルチデバイスに対応したレイアウトを作成できるのがグリッドシステムの特徴です。

実際に使う際は、グリッドシステムの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} を指定することで、画面サイズによってレイアウトを表示/非表示を制御することができます。PCやタブレットでは表示したいが、モバイルでは非表示にしたい、ということが簡単にできます。

例えば、タブレットサイズ(768px以上、992px未満)の時だけ非表示にする場合はhidden-smをクラス指定するように記述します。

Bootstrapデフォルトのボタンスタイル

a要素、button要素のclassに対して「”btn btn-***”」(***はプロパティ名)を追加すると、ボタンのスタイルの指定ができます。

プロパティ名サイズ
lg大きいボタン
Default標準ボタン
sm小さいボタン
xsより小さいボタン

このようにBootstrapを利用すると既にスタイルが作成されているため、class名を指定するだけでシンプルですが、統一感のあるページが作成できます。また冒頭でも説明していますが「テーマ」を無料で配っているサイトが多数ありますので、CSSを入れ替えるだけで違うスタイルを適用可能です。使用方法を理解し、適切にご使用いただければと思います。

Share this Post