Bootstrap – wordpress

Bootstrapとは

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

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

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

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

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

	Chrome	Firefox	Safari	Android Browser & WebView	Microsoft Edge
Android	〇	〇	ー	Android v5.0+ supported	〇
iOS	〇	〇	〇	ー	〇
Windows 10 Mobile	ー	ー	ー	ー	〇

	Chrome	Firefox	Internet Explorer	Microsoft Edge	Opera	Safari
Mac	〇	〇	ー	ー	〇	〇
Windows	〇	〇	Supported, 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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Foss.maxcdn.com%2Fhtml5shiv%2F3.7.3%2Fhtml5shiv.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Foss.maxcdn.com%2Frespond%2F1.4.2%2Frespond.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    <![endif]-->
  </head>
  <body>
    
<h1>Hello, world!</h1>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.12.4%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22js%2Fbootstrap.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
  </body>
</html><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>

上記コードをコピーして「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を入れ替えるだけで違うスタイルを適用可能です。使用方法を理解し、適切にご使用いただければと思います。