初心者のための簡単なBootstrap3のはじめ方

Pocket

bootstrap3の使い方
BootstrapのようなCSSフレームワークを使うことで簡単に迅速にレスポンシブデザインやWebサイトのレイアウトをつくることができるようになります。

今までは1からレイアウトを作っていたり、テンプレートを使用して毎回同じようなレイアウトになったりしていましたが、Bootstrapを使うことでより簡単に自由なレイアウトを構築することが可能になりました。

そこでこの記事では最新版の3.0を使ってBootstrapの基本的な使い方から、Gridシステムの使い方まで紹介していきます。また、Bootstrapをさらに使いやすくするためのツールなども紹介していきます。

Bootstrap3をダウンロードする

ではまず始めに以下の公式サイトからデータをダウンロードします。左側にあるダウンロードボタンからダウンロードしましょう。

Bootstrap3のダウンロード
初心者のためのBootstrap3のはじめ方
ファイルの中身はこのようになっています。

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff

theme.cssなどは不要なので削除してもOK。基本的に使うのはbootstrap.min.cssとbootstrap.min.jsの2つです。Bootstrapのアイコンフォントを使用する場合はfonts内にあるglyphiconも必要になるので一応置いておきます。

Bootstrap3のテンプレートを用意する

Bootstrap3を使用するには当たり前ですが、cssやjsファイルを読み込まなければ使えません。公式サイトのこちらのページには必要なファイルを読み込むように既に記述されているテンプレートが用意されています。コードはこんな感じ。

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap 101 Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

        <!-- HTML5 Shim and Respond.js 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]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        
        <h1>Hello, world!</h1>

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://code.jquery.com/jquery.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>

    </body>
</html>

ダウンロードしたファイルにindex.htmlを作成し、このテンプレートをコピペすればBootstrap3を使う準備は完了です。

Bootstrap3 Gridシステムの使い方

では実際にBootstrap3を使ってレイアウトを構築していきます。クラス名を指定するだけで簡単にレスポンシブレイアウトを作ることができるのでweb制作が非常に楽になります。ここからはグリッドの基本的な使い方を説明していきます。

グリッドレイアウトの基本

基本的な使い方はクラス名にcol-md-8のように記述するだけ。

<div class="col-md-8">.col-md-8</div>

これを使ってレイアウトをしていきます。

カラム数は12カラムとなっているので横のカラム数が合計で12までになるようにレイアウトをしていきます。Bootstrap2まではmarginが設定されていたため、カラム同士が離れていたのですが、Bootstrap3からはpaddingに変わりカラム同士はくっついています。

また、カラムを使用する場合は基本的にdiv.rowで全体を囲っておきます。
Bootstrap3のカラムの使い方

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>

<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>

<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

画面幅ごとのサイズ指定を使う

レスポンシブレイアウトを作る際に画面幅ごとにカラム数を変更させたい場合があります。そんなときもBootstrapなら簡単に指定可能。先ほどは全てcol-md-4のように書きましたが、mdの部分を変更するだけで各画面サイズごとにカラムの幅を指定できるようになります。そのオプション一覧はこちら。

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
Max container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Max column width Auto 60px 78px 95px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets N/A Yes
Column ordering N/A Yes

画面サイズは@mediaで指定されており、customizeダウンロードでダウンロード時にカスタマイズすることも可能です。画面サイズだけを要約するとこんな感じ。

  • スマートフォンサイズ:col-xs-1
  • タブレットサイズ:col-sm-1
  • デスクトップサイズ:col-md-1
  • ラージサイズ:col-lg-1

Bootstrap3 デバイスごとのカラムオプション

<!-- モバイルサイズではフルワイドとハーフワイドのボックス、PCサイズでは8:4 -->

<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- モバイルサイズでは50%幅が2つと次の段に1つ、デスクトップサイズになると3分の1ずつで1列に -->

<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- これはどのデバイスでも常に50%幅 -->

<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

カラムのオフセットを理解する

カラムを常に横並びで配置するのではなく、1つ飛ばしで置きたい場合や中央に配置したい場合などはオフセット機能を使います。オフセット機能はsm(タブレット)サイズからのみ使用なのでモバイルサイズでは使えないので要注意。
bootstrap3のオフセット機能の使い方

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>

<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>

<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

グリッドのネストを使う

Bootstrap3のネストは2と違い相対的に使えるようになりました。以前はネストしてもその中に入れることができるカラムは絶対数となっていました(つまり親のカラム数分しか入らない)。

3からは入れ子にしたほうは12カラムまで入るので、より自由にレイアウトすることが可能になっています。
bootstrap3のカラムのネスト

<!-- bootstrap3からは12入る -->

<div class="row">
  <div class="col-md-9">
    Level 1: .col-md-9
    <div class="row">
      <div class="col-md-6">
        Level 2: .col-md-6
      </div>
      <div class="col-md-6">
        Level 2: .col-md-6
      </div>
    </div>
  </div>
</div>

<!-- bootstrap2まではこんな感じ -->

<div class="row">
  <div class="span9">
    Level 1: .span9
    <div class="row">
      <div class="span5">
        Level 2: .span5
      </div>
      <div class="span4">
        Level 2: .span4
      </div>
    </div>
  </div>
</div>

Bootstrap3でカラムの順序を入れ替える方法

最後にカラムの順序を入れ替える方法を紹介します。カラムの順序を入れ替えたい場合、例えば左側にサイドバーがくるけど、SEO的に先にメインカラムを読み込ませたいといったことがあります。このような場合に使えるのが順序の入れ替え(Column ordering)。

これも先ほどのオフセットと同様タブレットサイズから使用可能になります(カスタマイズで幅をいじればモバイルサイズでも可能?)。やり方は後ろに回す方にpush、前にする方にpullを入れるだけ。
bootstrap3でカラムの順序を入れ替える方法

<div class="row">

  <!-- こちらが後ろに表示される -->
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>

  <!-- こちらは前に表示される -->
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Bootstrap3の使い方まとめ

ここまででBootstrap3の基本的な使い方の解説を終わります。Bootstrapにはここでは紹介していないComponentsやjavascriptを使用したコンポーネントも用意されており、使いこなせばBootstrapだけでほとんどのサイトを作ることができるようになります。

最新版対応!Bootstrap3.3.7から始めるならこちら

Bootstrap3の最新版では細かい部分の修正が追加され、さらに使いやすくなっています。今から最新版のBootstrapを始める方はこちらの記事をご覧ください。
今からBootstrap3を始める人のための、CSSフレームワーク入門

Bootstrap2のグリッドの使い方

また、こちらではBootstrap2のグリッドの使い方を紹介しています。

Bootstrapの簡単な使い方

以上、Bootstrap3を使って簡単にレイアウトを作る方法を紹介しました。最後まで読んでいただきありがとうございました 🙂