Webデザインの知識がなくても可能!Bootstrapの使い方

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

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

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

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

 Bootstrapというのはレスポンシブデザインに対応したフロントエンド(HTML・CSS・JavaScript)のフレームワークですね。

コードを書きたくない場合、ドラッグアンドドロップでWeb作成できます。

 

目次

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

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

 

 

Bootstrapとは

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

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

 

Bootstrapを使うメリット

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

 

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

browsers

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

  

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ファイルを作成してください。



  
    
    
    
    Bootstrap Sample
    
    
    
    
    
    
  
  
    

Hello, world!

 

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

file

 

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

helloworld

 

コピーしたコードを解説

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

 

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

 

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

 

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






 

事前の準備は以上です。

次からは、グリッド・テーブル・ボタン・フォームの具体的な使い方について紹介します。その際のサンプルコードは、

Hello, world!

の部分を置き換えて使用してください。

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

 

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

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

 

使用ルール

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

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

grid

 

サンプルコード

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

先ほど用意したindex.htmlのファイルの

Hello, world!

の部分を下記のコードに置き換えてみてください。

Header
Red
Blue
Yellow
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
Red
Blue
Yellow
Footer

 

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

grid_03

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

 

 

テーブルの使い方

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

 

使用ルール

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

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

 

サンプルコード

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

先ほど用意したindex.htmlのファイルの

Hello, world!

の部分を下記のコードに置き換えてみてください。

# 名前 メールアドレス 電話番号
1 煌木 太郎 taro.kirameki@example.com 09011112222
2 煌木 次郎 jiro.kirameki@example.com 09033334444
3 煌木 花子 hanako.kirameki@example.com 09055556666

 

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

 

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

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

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


 ...

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

 

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

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


 ...

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

 

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

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

...

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

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

 

 

ボタンの使い方

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

 

使用ルール

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

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

 

サンプルコード

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

先ほど用意したindex.htmlのファイルの

Hello, world!

の部分を下記のコードに置き換えてみてください。







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

button

 

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

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

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

button_02

 

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

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


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

button_03

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

  

フォームの使い方

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

 

使用ルール

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

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

 

サンプルコード

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

先ほど用意したindex.htmlのファイルの

Hello, world!

の部分を下記のコードに置き換えてみてください。

Example block-level help text here.

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

form_01

 

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

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

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

form_02

 

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

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

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

form_03

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

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

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

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



0

新着記事 さらに見る