Webデザインの知識がなくてもOK!Bootstrapの使い方【入門者向け】

HTML/CSSといったWebデザインの知識がない人でもわかる【Bootstrap】の使い方。Bootstrapのダウンロード方法、サンプルコードがあってすぐに実践可能。グリッドシステムやテーブルなどの使い方あり。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

独学でHTML/CSSを勉強してもデザインがいまいち…という経験はないでしょうか。そんなときに便利なBootstrapの使い方を初心者向けに解説します。

 

HTML/CSSがわからない方も読むことができますが、HTMLの書き方CSSの書き方は理解しておいた方がスムーズに読み進めることができるでしょう。

なお、今回はBootstrapのバージョン「3.3.5」を使用します。

 

本記事は、オンライン完結のBootstrap講座のカリキュラムをもとに執筆しています。

 

20160620

 

田島メンター!!Bootstrapというのは何ですか〜?

 

20163020-2

 

Bootstrapはレスポンシブデザインに対応したフロントエンドのフレームワークだよ。

 

20160620

 

フロントエンドというとHTML・CSS・JavaScriptですか?

 

20163020-2

 

そうだね。シンプルな指示でグリッドシステムを使用できたり、本格的なフォームやボタンを作成できたりと非常に便利なんだ。基本の使い方を見てみよう。

 

目次

本記事では、Bootstrapの基礎をおさえた上で、よく使う、グリッドシステム、テーブル、ボタン、フォームの具体的な使い方を順番に紹介します。

  1. Bootstrapとは
  2. Bootstrapを使う準備
  3. グリッドシステムの使い方
  4. テーブルの使い方
  5. ボタンの使い方
  6. フォームの使い方

 

 

Bootstrapとは

BootstrapはTwitter社が開発したCSSの「フレームワーク」です。通常CSSを書く場合、全てのスタイルを自分で作っていく必要がありますが、このフレームワークにはよく使われるスタイルがあらかじめ定義してあるので、ルールに沿って利用するだけで整ったデザインのページを作成できます。

もともとTwitter社内で作られたもので、以前は「Twitter Bootstrap」と呼ばれていましたが、現在では「Bootstrap」のみで呼ばれるようになっています。

Bootstrap

 

Bootstrapを使うメリット

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

 

このページから確認できますが、バージョン3.3.5ではこちらのブラウザに対応しています。

browsers

この際の注意点ですが、Internet Explorer 7以下とFirefox 3.6以下はサポートされません。これは、CSS3メディアクエリがサポートされていないブラウザだからです。

 

 

[PR] Webデザインで挫折しない学習方法を動画で公開中

Bootstrapを使う準備

実際にBootstrapを使う前の準備が必要ですので、まずはこちらに着手しましょう。PCだけあればすぐに準備できます。

 

Bootstrapを使用するには、BootstrapとjQuery(JavaScriptのライブラリ)を読み込む必要があります。読み込みの方法は下記の2パターンです。

  • ソースをダウンロードして、ローカルに配置して読み込む
  • すでにホストされているファイルをインターネット経由で読み込む

今回は、前者の方法を紹介します。

 

ダウンロードするには、BootstrapのTOPページにアクセスしましょう。

Bootstrapダウンロード

「Download Bootstrap」のボタンをクリックしてください。

 

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

Bootstrapダウンロード

 

ダウンロードしたZIPファイルを解凍すると、「css」、「js」、「fonts」の3つのフォルダがあることがわかるはずです。

フォルダ

 

続いてHTMLファイルを用意しましょう。Bootstrapのページにもテンプレートが用意されていますが、コメントアウトが日本語の方がわかりやすいと思いますので、TechAcademyで用意しています。こちらのコードをコピーして「index.html」としてHTMLファイルを作成してください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Sample</title>
    <!-- BootstrapのCSS読み込み -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery読み込み -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- BootstrapのJS読み込み -->
    <script src="js/bootstrap.min.js"></script>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

 

作成したファイルは、先ほどダウンロードしたBootstrapのフォルダの中に保存してください。

file

 

index.htmlのファイルをブラウザで開くと「Hello, world!」とだけ表示されます。

helloworld

 

コピーしたコードを解説

先ほどコピーしたコードを簡単に解説します。

 

これはInternetExplorerのブラウザではバージョンによって崩れることがあるので、互換表示をさせないために設定するmetaタグです。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

 

これはレスポンシブWebデザインを使うために必要なmetaタグです。

<meta name="viewport" content="width=device-width, initial-scale=1">

 

ここで重要なのは、BootstrapのJavaScriptよりも、jQueryを先に読み込むということです。そうしなければ、BootstrapのJavaScriptを使う動きが動作しないのでご注意ください。

<!-- BootstrapのCSS読み込み -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- BootstrapのJS読み込み -->
<script src="js/bootstrap.min.js"></script>

 

事前の準備は以上です。

次からは、グリッド・テーブル・ボタン・フォームの具体的な使い方について紹介します。その際のサンプルコードは、<h1>Hello, world!</h1> の部分を置き換えて使用してください。

 

20163020-2

 

jQueryとBootstrapのJavaScriptの読み込みは、jQueryの方を先に記述するようにしよう。

 

20160620

 

分かりました!

 

20163020-2

 

次は基本的な機能の使い方を紹介するよ。グリッドシステム・テーブル・ボタン・フォームだね。

 

 

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

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

 

使用ルール

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

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

grid

 

サンプルコード

実際にサンプルコードを使ってやってみましょう。

先ほど用意したindex.htmlのファイルの<h1>Hello, world!</h1> の部分を下記のコードに置き換えてみてください。

<header style="background-color:gray">Header</header>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-2" style="background-color:red;">Red</div>
    <div class="col-sm-8" style="background-color:blue;">Blue</div>
    <div class="col-sm-2" style="background-color:yellow;">Yellow</div>
  </div>
</div>
<footer style="background-color:gray">Footer</footer>

 

ブラウザで表示すると、PCのブラウザでは縦1✕横3で、赤2:青8:黄2の横幅の割合になります。

grid_01

 

この時、モバイル以下のブラウザサイズ(PCのブラウザで横幅を調整してもOK)では縦3✕横1で表示されます。

grid_02

 

上記のコードの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やタブレットでは表示したいが、モバイルでは非表示にしたい、ということが簡単にできます。

例えば、先ほどのサンプルコードでBlueの部分をタブレットサイズ(768px以上、992px未満)の時だけ非表示にする場合はhidden-smように記述します。

<header style="background-color:gray">Header</header>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-2" style="background-color:red;">Red</div>
    <div class="col-sm-8 hidden-sm" style="background-color:blue;">Blue</div>
    <div class="col-sm-2" style="background-color:yellow;">Yellow</div>
  </div>
</div>
<footer style="background-color:gray">Footer</footer>

 

すると、タブレットサイズ(768px以上、992px未満)では「Blue」の部分が非表示となります。

grid_03

その他のグリッドシステムのオプションはBootstrapの公式サイトを確認しましょう。

 

 

テーブルの使い方

Bootstrapでは、tableタグでテーブルレイアウト(表組み)を簡単に装飾できます。

 

使用ルール

先ほどのグリッドシステムのようにルールがあります。

  1. class=”container”の中に
  2. table要素に対してclass=”table”をつける

 

サンプルコード

実際にサンプルコードを使ってやってみましょう。

先ほど用意したindex.htmlのファイルの<h1>Hello, world!</h1> の部分を下記のコードに置き換えてみてください。

<div class="container">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>名前</th>
        <th>メールアドレス</th>
        <th>電話番号</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
          <td>煌木 太郎</td>
          <td>taro.kirameki@example.com</td>
          <td>09011112222</td>
      </tr>
      <tr>
        <th scope="row">2</th>
          <td>煌木 次郎</td>
          <td>jiro.kirameki@example.com</td>
          <td>09033334444</td>
      </tr>
      <tr>
        <th scope="row">3</th>
          <td>煌木 花子</td>
          <td>hanako.kirameki@example.com</td>
          <td>09055556666</td>
      </tr>
    </tbody>
  </table>
</div>

 

ブラウザではこのように表示されるはずです。
table_01

 

オプション:1行間隔で背景色を変える

基礎がわかったところでオプションを使ってみましょう。

table要素のclassにtable-stripedを追加すれば、1行間隔で背景色を変えることができます。

<table class="table table-striped">
 ...
</table>

これだけで1行間隔で背景色が変わりました。
table_02

 

オプション:枠線を付ける

先ほどと同じように、table要素のclassにtable-borderedを追加すれば、枠線を付けることができます。

<table class="table table-bordered">
 ...
</table>

ブラウザではこのように表示されるはずです。
table_03

 

オプション:テーブルをレスポンシブ対応する

タブレットやスマートフォンを使用する際、テーブルが全て表示されない場合に、table要素内にスクロールバーを付けることができます。div class=”container” とtable要素の間にdiv class=”table-responsive”を追加するだけです。

<div class="container">
  <div class="table-responsive">
    <table class="table table-bordered">
    ...
    </table>
  </div>
</div>

ブラウザの幅を変えるとスクロールバーが表示されました。
table_04

その他のテーブルのオプションはBootstrapの公式サイトを確認しましょう。

 

 

ボタンの使い方

Bootstrapでは、簡単にボタンにスタイルが付けられます。

 

使用ルール

a要素、button要素のclassに“btn btn-{プロパティ名}”を追加するだけです。プロパティ名は下記のようなものがあります。

プロパティ名 表示
default 白地に黒文字
primary 青地に白文字
success 緑地に白文字
info 水色地に白文字
warning オレンジ色地に白文字
danger 赤色地に白文字
link 白地に青文字

 

サンプルコード

実際にサンプルコードを使ってやってみましょう。

先ほど用意したindex.htmlのファイルの<h1>Hello, world!</h1> の部分を下記のコードに置き換えてみてください。

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

このようにボタンが表示されるはずです。

button

 

オプション:ボタンサイズの指定

a要素、button要素のclassに“btn-{プロパティ名}”を追加すると、ボタンのサイズの指定ができます。具体的にはこのように記述します。

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

ブラウザで表示するとボタンのサイズが変わることがわかります。用途によって使い分けてください。

button_02

 

オプション:ブロックレベルのボタン指定

ブロックレベルボタンを使うと、一般的なブラウザでは前後に改行が入ります。a要素、button要素のclassに“btn-block”を追加すると、ブロックレベルのボタンを指定することが可能です。具体的にはこのように記述します。

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

このように表示されます。

button_03

その他のボタンのオプションはBootstrapの公式サイトを確認しましょう。

 

 

フォームの使い方

最後にフォームを扱います。Bootstrapでは、簡単にデザインの整ったフォームを作ることが可能です。

 

使用ルール

以下のルールでフォームを作ります。

  1. formタグの中に
  2. class=”form-group”を入れて
  3. inputタグにclass=”form-control”を付ける

 

サンプルコード

実際にサンプルコードを使ってやってみましょう。

先ほど用意したindex.htmlのファイルの<h1>Hello, world!</h1> の部分を下記のコードに置き換えてみてください。

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

ブラウザではこのように表示されます。

form_01

 

オプション:インラインフォーム

フォームを下記のようにインラインに並べたい場合は、formタグにclass=”form-inline”を付けます。

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

ブラウザで表示するとこうなります。

form_02

 

オプション:フォーム項目を水平に配置

フォーム項目をフォームと垂直に並べるのではなく、水平に並べたい場合は、formタグにclass=”form-horizontal”を付けます。

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
     <div class="col-sm-offset-2 col-sm-10">
       <div class="checkbox">
         <label>
           <input type="checkbox"> Remember me
         </label>
       </div>
     </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

ブラウザではこのように表示されるはずです。

form_03

その他のフォームのオプションはBootstrapの公式サイトを確認しましょう。

 

ここまで、Bootstrapの基本をおさえた上で、グリッド、テーブル、ボタン、フォームの具体的な使い方について解説してきました。今回の知識だけでも、デザインの整ったページが作れるはずです。

 

あとは、Bootstrapの公式サイトなどを見ながら、どんどん自分で使ってみてください!

 

20163020-2

 

Bootstrapではこのようなことができるんだ。

 

20160620

 

Webサイトに使う色々な要素が、分かりやすい方法で本格的に作成できるんですね。

 

20163020-2

 

今回はファイルをダウンロードする方法を紹介したけれど、ファイルをダウンロードしなくても「Bootstrap CDN」というものによって更に手軽にBootstrapを利用することができるよ。

 

20160620

 

そちらの方法も調べてみます。ありがとうございました!

 

 

[お知らせ]TechAcademyではオンライン完結のBootstrap講座を開催しています。わからないことをチャットで質問すると、現役のWebデザイナーが毎日すぐに回答します。