知っておきたい Bootstrapの基本 使い方とレスポンシブデザイン

知っておきたい Bootstrap使い方の基本 レスポンシブデザインとよく使うクラス

今回は、グリッドシステム・レスポンシブデザインで有名なCSSフレームワークBootstrap(ブートストラップ)の使い方やよく使うクラスについて解説していきます。
 
 

もくじ

以下は本記事のもくじです。
 

  1. 1. BootStrap(ブートストラップ)とは
  2. 2. BootStrapを使うためには
  3. 3. Bootstrapによるグリッドシステム・レスポンシブデザイン
  4. 4. グリッドシステム以外でよく使うBootStrapのクラス
  5. 5. まとめ


 
それでは説明していきます。
 
 

1. ブートストラップ(BootStrap)とは

 
BootstrapはもともとTwitter社で作られたもので、レスポンシブデザイン対応のCSSフレームワークの一つです。
 

Bootstrapで定義している記述方法にしたがってHTMLファイルを作成することで、Webページのレスポンシブ対応やレイアウト調整を簡単に仕上げることができるようになります。
 

Bootstrapトップページ
 

Bootstrap公式サイト
 

ワードプレスの人気テーマでもたくさん利用されており、覚えておくとワードプレスのレイアウト調整にも役立つシーンが多いと思います。

BootStrapベースのWordPressテーマLightning

BootStrapベースのWordPressテーマLightning

 
 

2. BootStrapを使うためには

 

2-1. BootStrapを使うための事前準備

Bootstrapを使うためには以下の3ファイルを読み込む必要があります。

  • Bootstrapの公式サイトからダウンロードしたCSSファイル「bootstrap.css
  • Bootstrapの公式サイトからダウンロードしたJavascriptファイル「bootstrap.js
  • jQueryの公式サイトからダウンロードしたjavascriptファイル「jquery-x.x.x.jp

 

ここでは、事前準備としてデスクトップ上にlessonフォルダ、index.htmlファイル、cssフォルダ、jsフォルダを作成した前提で進めていきます。
lessonフォルダに空のindex.html、css・jsフォルダを作成する

bootstrapに必要となる3ファイルを下記のようにcss、jsフォルダ内に格納する手順で説明していきます。

今回のフォルダ構成

lessonフォルダ内に空のindex.htmlとcss,jsフォルダを事前に作成し

 

また、今回はBootstrap 3.37のドキュメントに沿って紹介していきます。(2017年9月時点で最新の4.0がリリースされていますがここでは割愛します。)
 

Bootstrap 3.3 CSSドキュメント
 
 

2-2. BootStrapのダウンロード

まず下記のリンクからbootstrapの公式サイトにアクセスします。
Bootstrap 3.3 Getting Start Download
 

Download Bootstrapを選択します。

Boostrap ダウロードボタン

Boostrap ダウンロードボタン

 

bootstrap-3.3.7-dist.zipというzipファイルがダウンロードされますので、解凍します。
bootstrap-3.3.7-dist.zip
 

bootstrap-3.3.7-distフォルダには「css」「js」「font」フォルダがあります。

boostrap-3.3.7-distフォルダの中身

boostrap-3.3.7-distフォルダの中身

 

このうち、bootstrapを利用するために必要となるのは以下の2ファイルです。

  • bootstrap-3.3.7-distフォルダ>cssフォルダ>bootstrap.cssファイル
  • bootstrap-3.3.7-distフォルダ>jsフォルダ>bootstrap.js

 

事前に作成したlessonフォルダ内のcss/jsフォルダにこの二つのファイルをそれぞれコピーしておきましょう。

bootstrap-3.3.7-distフォルダ>cssフォルダ>bootstrap.cssファイル

bootstrap-3.3.7-distフォルダ>cssフォルダ>bootstrap.cssファイル

 

bootstrap-3.3.7-distフォルダ>jsフォルダ>bootstrap.js

bootstrap-3.3.7-distフォルダ>jsフォルダ>bootstrap.js

 
 

2-3. jQueryのダウンロード

bootstrap.jsはjqueryを利用しているため、jqueryファイルもダウンロードしておきます。
 

下記からjqueryの公式サイトにアクセスします。
Downloading jQuery
 

ここでは、「Download the uncompressed, development jQuery 3.2.1」を選択してダウンロードします。

jquery トップページからファイルをダウンロード

jquery トップページからファイルをダウンロード

 

lessonsフォルダのjsフォルダにダウンロードしたファイルをコピーしておきましょう。

jquery-3.2.1ファイル

jquery-3.2.1ファイル

 

現時点でフォルダ・ファイル構成が下記のようになっていることを確認してください。

今回のフォルダ構成

今回のフォルダ構成

 
 

2-4. headタグの設定

つぎに、事前に作成したindex.htmlでbootstrapを使う設定を記述していきます。
 

index.htmlのheadタグに下記のようにviewportタグの設定(※注)と上記の「bootstrap.css」「bootstrap.js」「jquery-3.2.1.js」を読み込む記述をします。
 

 

(※)<script type=”text/javascript” src=”js/bootstrap.js”></script>のまえに<script type=”text/javascript” src=”js/jquery-3.2.1.js”></script>の行を記述するようにしてください。順番が逆だと正常に動作しなくなります。
 

(※)meta name=”viewport”…の記述はスマートフォン用のレスポンシブデザインに対応するために必要な記述です。viewportについては「CSSメディアクエリとViewPortによるレスポンシブデザインの作り方」をご参照ください。
 

設定完了後にindex.htmlファイルをChromeで開いて、パスが通っているか確認します。
 

検証ツールから、 Consoleタグを開いて何もエラーが 出ていなければOKです。
Chromeで右クリック>検証ツールから、 Consoleタグを開いて何もエラーが 出ていなければOKです
 

Consoleタグを開いてファイルパスエラーが表示されていれば設定にミスがありますので、確認してください。
Chromeで右クリック 検証ツールから、 Consoleタグを開いて何もエラーが 出ていなければOKです
 

これでbootstrapの準備が整いました。
 
 

2-5. Bootstrapを利用する

さて、これまでの手順でbootstrapを利用する準備が整いました。それではbootstrapを使ってみましょう。
 

bodyタグ内に下記のように記述してみてください。

 

下記のように緑色や赤色のボタンのようになっています。

bootstrap btnのデモ

bootstrap btnのデモ

 

内容としては、aタグにclass=”btn btn-success/warning”をつけただけですが、bootstrap.cssの中で「.btn-successクラスは緑色のボタンのようにする」というように定義しているために上記のような表示になります。

bootstrap btn-successに関するCSSの記述

btn-successに関するCSSの記述

 

このようにbootstrapであらかじめ用意されているクラス名を利用することで、
 

自分で1から記述しなくてもbootstrapの定義に従った表現ができるようになるため自分で記述する手間を大幅に削減することができます。
 
 

2-6. 補足 圧縮ファイル・CDNを利用する

今回「bootstrap.css」、「bootstrap.js」、「jquery-3.2.1.js」の3ファイルを利用しましたが、各公式サイトから圧縮版ファイル(bootstrap.min.css / bootstrap.min.js / jquery-3.2.1.min.js)をダウンロードして利用することもできます。
 

内容に違いはありませんが、改行やスペースなどが省略されて人間にとっては読みにくくなるものの、読み込みスピードが高速化されます。

■通常版 bootstrap.css

通常版のCSS。改行やスペースが入っている。bootstrap.css

bootstrap.css

 

■圧縮版 bootstrap.min.css 改行やスペースが省略されています

圧縮版のCSS。bootstrap.min.css

圧縮版のCSS。改行やスペースが省略。bootstrap.min.css

 

また、ファイルをダウンロードして利用するのではなく下記のようにWeb上に公開されているCDNを利用することもできます。
 

 
(セキュリティも考慮した記述は公式サイトから確認してください。)
 
 

3. Bootstrapによるグリッドシステム・レスポンシブデザイン

それでは、BootStrapによるグリッドシステム・レスポンシブデザインについて説明していきます。
 

Bootstrapでは横幅を12分割したグリッド(格子)を利用して、分割された12の列の数を指定して横並びや横幅を作成できます。
 

下記はグリッドシステムを使ったサンプルです。1行目は12分割、2行目は4分割分割、3行目は2分割しています。

bootstrapを利用したグリッドシステムのサンプル

bootstrapを利用したグリッドシステムのサンプル

 

■上記のソースコード

 

上記のように、グリッドシステムを利用することでパソコンやタブレット、スマートフォンなど画面幅が異なってもレイアウトを組み替えやすくしています。
 

なお、1つの行に12個以上の列が配置されている場合、13個目以降を含むグループは新しい行に折り返されます。
 
 

3-1. グリッドシステムの使い方

グリッドシステムを利用するためには下記のようにして利用することができます。
 

  1. <div class=”container”>で囲む
  2. 上記のcontainerクラスの中で<div class=”row”>で一行を定義する
  3. 上記のrowクラスの中で<div class=”col-{prefix}-{列数(1〜12)}>で何分割するかを定義する

 

■使用例 PC用画面で2分割するサンプル

 

■上記の表示例 PC用画面で2分割するサンプル
bootstrap PC用画面(lg)で2分割するサンプル
 

 

3-1-1. グリッドシステムを使うための容器的役割 containerクラス(必須)

containerクラスはグリッドシステムで正しく列を分割するための入れ物(容器)的な役割を果たします。
 

containerの中にある要素を画面の中央に幅を固定する必須のクラスです。containerを省略してrowやcol-{prefix}-**を使うとレスポンシブデザインが正しく動作しません。
 

■水色部分がcontainer要素です。横幅サイズに応じて余白が自動で調整されます。

 
 

3-1-2. 一行を定義する rowクラス

rowクラスは行を定義するための入れ物(容器)的な役割を果たします。rowクラスは前述のcontainerに内包されます。
 

■container要素の中のrow要素

boottsrap container要素の中にあるrow要素

boottsrap container要素の中にあるrow要素

 

■上記のソースコード

 

rowを省略してrowやcol-{prefix}-**を使って分割することはできません。 
 
 

3-1-3. 列を定義する col-{prefix}-{カラム数}クラス

col-{prefix}-カラム数(列数)を利用して列を定義します。col-{prefix}-{カラム数(列数)}はrowクラスに内包されます。
 

{prefix}には横幅のサイズタイプ(横幅サイズに応じたlg/md/sm/xsなどの種類)が入り、{カラム数(列数)}には1〜12までの数字が入ります。
 

bootsrap row要素の中にあるcol要素

bootsrap row要素の中にあるcol要素

 

■上記のソースコード

 

上記例では、col-md-6のように{prefix}の箇所でmdというワードを利用して分割しました。
 

mdは「横幅が中くらいのPC画面の場合(具体的には992px以上の場合は)」という意味になり、横幅サイズごとに分割する数を変更することができます。
 

また{カラム数}には1〜12までの数字が入ります。合計で12になるように定義します。
 

mdのほかにも横幅サイズの大きさに応じて、lg/sm/xsなどのサイズを指定することができます。各サイズ毎のブレイクポイントや横幅の範囲などは下記の通りです。

Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
コンテナの幅(Container width) なし(None) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
Column width Auto ~62px ~81px ~97px
Gutter width(カラム間の内部余白) 30px (各カラムで15pxの内部余白)

 

また、下記のように各サイズごとに列数を定義できるので、レスポンシブデザインを簡単に設定することができます。

 

■上記のソースコード

なお、{prefix}に記述したクラスは、画面幅がブレークポイントサイズ以上のデバイスに適用されます。
 

たとえば、上記サンプルのように.col-md-3と指定すると、.col-lg-**と明示しない限り、lgサイズでも3列分が適用されます。
 

また、col-で分割しない(グリッドシステムを使わなくて良い)場合は、rowやcolクラスを省略してcontainerクラス直下に中身を描いても構いません。
 
 

3-2. グリットシステムの使い方・その他クラスの補足

rowやcol-**-**は入れ子が可能で下記のように設定することができます。
 

■表示例
colの入れ子
 

■上記のソースコード

 

また、containerより幅広の要素を記述する場合はcontainerの外側で書きます。
 

たとえば、背景画面などブラウザ全幅の指定が必要な場合は、containerクラスの外側にdivやsectionタグを囲みます。
container要素の外に背景用の要素を記述
 

■上記のソースコード

 
 

そのほかのグリッドシステムのクラス

.col-{prefix}-offset-{カラム数}:カラム数分左側に余白(オフセット)をつくる。
 

.col-{prefix}-push-{カラム数}:カラム数分右側に列を移動させる。
 

.col-{prefix}-pull-{カラム数}:カラム数分左側に列を移動させる。
 
 

4. グリッドシステム以外でよく使うBootStrapのクラス

グリッドシステム以外でもBootStrapで便利なクラスはたくさんあります。ここでは、いくつか代表的なクラスを紹介していきます。
 

4-1. 画像に関するBootstrapのクラス

  • img-circle:円になる
  • img-rounded:角が丸くなる
  • img-thumbnail:サムネイルのようになる
  • img-responsive:可変サイズのレスポンシブ画像(グリッドを超えるサイズの画像でもはみ出さなくなります)

 

■通常
クローバーの家
■img-circle
クローバーの家

 

■img-rounded
クローバーの家
■img-thumbnail
クローバーの家

 
 

■img-responsive
クローバーの家
 

■ソースコード

 
 

■参考)bootstrap.css内でのimg関連クラスのスタイル

bootstrap.cssの img関連のスタイル

bootstrap.cssの
img関連のスタイル

 
 

4-2. テキスト揃えに関するBootstrapのクラス

テキスト揃えをする場合は、text-left / text-center / text-rightを対象要素のclassに指定します。

  • class=”text-left”:インライン要素を左揃えにする
  • class=”text-center”:インライン要素を中央揃えにする
  • class=”text-right”:インライン要素を右揃えにする

 

■表示例

bootstrap テキスト揃えのクラス

テキスト揃えのクラス

 

■上記のソースコード

 
 

4-3. ボタンに関するBootstrapのクラス

ボタンクラスはa要素、button要素、input要素で利用できます。対象要素に対してclass=”btn btn-xxxxx”という形式で指定します。
 

  • .btn:ボタンを定義(必須)
  • .btn-default:灰色のボタン
  • .btn-primary:青色のボタン
  • .btn-success:緑色のボタン
  • .btn-info:水色のボタン
  • .btn-warning:黄色のボタン
  • .btn-danger:赤色のボタン
  • .btn-lg:大きいボタン
  • .btn-sm:小さいボタン
  • .btn-xs:とても小さいボタン

 

■表示例

bootstrapのボタンクラス

bootstrapのボタンクラス

 

■上記のソースコード

 
 

4-4. テーブルに関するBootstrapのクラス

BootStrapのテーブルスタイルを適用するには、table要素に対してclass=”table”という形式で指定します。table-xxxxxを追加してオプションをつけることができます。
 

  • table:ブートストラップ用のスタイルのtableを使う(必須)
  • table-striped:1行ずつストライプのように背景色がつく
  • table-bordered:テーブルとセルの全てのサイドに線をつける
  • table-condensed:テーブルのセルの余白を狭くする
  • table-hover:マウスがホバーした時に背景色が変わる
  • (外側のdivタグで利用)table-responsive:ンテンツ幅を超える部分にスクロールができる

 

■表示例 <table class="table">….</table>
bootstrap class="table"
 

■ソースコード <table class="table">….</table>

 
 

■表示例 <table class="table table-striped">….</table>
bootstrap class="table table-striped"
 
 

■表示例 <table class="table table-bordered">….</table>
bootstrap class="table table-bordered"
 
 

■表示例  <table class="table table-hover">….</table>
bootstrap class="table table-hover"
 
 

■表示例  <table class="table table-condensed">….</table>
bootstrap class="table table-condensed"
 
 

■表示例  <table class="table table-hover">….</table>

 
 

■表示例 class=”table-responsive” 

 

■ソースコード class="table-responsive" 

 
 

4-5. 表示・非表示に関するBootstrapのクラス

  • .visible-{prefix(lg/md/sm/xs)}:prefixの横幅の時に要素が表示される
  • .hidden-{prefix(lg/md/sm/xs)}:prefixの横幅の時に要素が非表示になる

 

■visible/hiddenの表示例

 

■上記のソースコード

 
 

5-6. フォーム(form)に関するBootstrapのクラス

よく使うBootstrapのフォームは下記クラスがあります。

  • form-group:ラベルとフォーム部品をグルーピングする。外側のdivタグで利用します。
  • form-control:フォーム部品に設定します。input、textarea、selectで利用します。

 

■表示例

Bootstrap フォームの例

Bootstrap フォームの例

 

■ソースコード

 
 

5. まとめ

今回は、グリッドシステム・レスポンシブデザインで有名なCSSフレームワークBootstrap(ブートストラップ)の使い方やよく使うクラスについて下記の内容で解説しました。
 
 

  1. 1. BootStrap(ブートストラップ)とは
  2. 2. BootStrapを使うためには
  3. 3. Bootstrapによるグリッドシステム・レスポンシブデザイン
  4. 4. グリッドシステム以外でよく使うBootStrapのクラス
  5. 5. まとめ

 

ここでは紹介していませんが、ナビゲーションバー・ハンバーガーメニューやパネルなど、他にもたくさんの便利な使い方があります。
 

詳細は下記の公式サイトに記載されているので、一通り慣れてきたらぜひ他の使い方も色々調べてみてください。
Bootstrap 3.3 CSSドキュメント
 

今回は、以上になります。
 

最後までご覧いただきありがとうございました。
 

「自分で作る選択を!」個人事業主のための大阪のホームページ作成とWeb集客の教室・スクール 「Webst8」

ウェブストエイトは自分でホームページ制作・Web集客したい方向けの少人数制個別指導のスクール・塾です。 継続6ヶ月コースとお試し1ヶ月コースから選択して受講できます。

継続6ヶ月コース

通常 15万円【2017年中】12万円(税抜)
ホームページ作成からWeb集客まで一通り習得したい方向けのコースです。

お試し1ヶ月コース

通常3万円【2017年中】2万円(税抜)
特定範囲のみ習いたい・まずは試しに受講してみたい方向けのコースです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

【IT業界でシステムエンジニア歴8年現役Web系フリーランス】

1985年生まれ 立命館大学卒業。 某複合機メーカーで約8年間システムエンジニアとして大阪で勤務後、2016年秋に独立。

「一人一人が創意工夫で思い描く未来を!」 という想いもとに『自分でホームページを作成してWeb集客・売上拡大したい』個人事業主のためのWeb教室・スクール「ウェブストエイト(Webst8)を運営開始。
ウェブやマーケティングなどの覚えたノウハウを自分や周りの目標実現のツールとして使うことにやりがいを感じています。

個人事業主のためのWeb教室・スクール「ウェブストエイト」 ホームページ