Bootstrapの使い方【導入から分かりやすく解説します】

bootstrapの導入から使い方

Bootstrapってなに?

Bootstrapの基本的な使い方が知りたい

 

ティロ
こんにちは、ティロといいます

 

Bootstrapを使うと何が良いのか、また基本的な使い方を分かりやすく解説します。

 

Bootstrapとは?

Bootstrapとはツイッターが開発したCSSとJavascriptのフレームワークです。
フレームワークとは端的にシステムのことで簡単な操作で複雑なことができるようになります。フレームワークは他にもLaravel(ララベル)など様々なものがあります。
Laravelはphpという言語のフレームワークです。
Bootstrapでは要素にクラスをつけるだけでサイトに動きをつけたり、装飾をすることが可能です。
極端にいえばCSSファイル、JSファイルにコードを書く必要がありません。
またBootstrapはモバイルファーストという意志のもと、制作されました。指定のクラスをつけるだけで簡単にレスポンシブデザインが可能です。
これも極端な話ですが、Bootsrapの機能のみ使うならばメディアクエリを使う必要はありません。
ライセンスはMITライセンスで無料で使うことが出来ます。ライセンス表記はダウンロードしたBootstrapのファイルにあらかじめ書かれているので、あとから自分で書き込む必要はありません。

Bootstrapのメリットとデメリット

Bootstrapはとても便利なフレームワークです。うまく使えばCSSやJSの記述量が減ります。またサイトをスマートフォンやタブレットに簡単に対応することができます。
機能も豊富でグリッドデザインやメールフォーム、ボタン、ジャンボトロン、カルーセル、モーダル、ドロップダウンメニューなど様々なコンポーネントが用意されています。
BootstrapのCSSファイルを見ると規則的にクラスが命名されています。このようにBootstrapを使うとクラスの命名規則について学ぶことが出来ます。
クラスの命名規則はとても重要です。なぜならCSSはスコープという概念がなく、クラス名をなんとなくつけていると、あとから気づかずに同じクラスを使ってしまいバクが起こりやすいです。クラスの命名規則を学べばそういったことも少なくなります。
しかし自分のデザインがBootstrapで表現できない場合、Boostrapの中身のコードを書き替える必要があります。初学者がBootstrapの中身を理解してコードを書き替えるのは無理があります。
このように容易に自分好みにカスタマイズができません。

Bootstrapの導入

方法は2つあります。ファイルをダウンロードする方法とCDNを利用する方法です。

ファイルをダウンロードする方法

以下のサイトからファイルをダウンロードしてください。
ダウンロードをクリックしてください。
bootstrap公式サイト
一番上のダウンロードをクリックしてください。
bootstrapダウンロード
ファイルを解凍して、bootstrap.min.cssとbootstrap.bundle.min.jsを自分のフォルダに移動させてください。

CDNを利用する方法

公式サイトに行き、ダウンロードをクリックしてください。
下の方にCDNのコードがあるのでコピーしてください。

Bootstrapのファイルを張り付ける

Bootstrapはjqueryというライブラリに依存しています。なのでBootstrapのファイルの前にjqueryのCDNを貼り付けてください。
 

ファイルのパス、あるいはBootstrapのCDNを<head></head>内に貼り付けてください。

 

ファイルの場合はこんな感じになります。※ファイルのパスは人によって異なります。コピペしても動作はしません。
ファイルの中からbootstrap.min.cssとbootstrap.bundle.min.jsのパスをheadタグ内に書きます。
 

CDNの場合

こちらはコピペで動作します。

 

 

Bootstrapの基本的な使い方

よく使われるグリッドデザインをBootstrapを使って制作してみます。
結果は以下のようになります。

2カラムグリッドデザイン

divにcontainerというclassをつけることで大枠の余白ができます。

またclassにrowをつけると、子要素が横並びになります。

col-8とcol-4というclassがついているのが分かると思います。

これはグリッドデザインにしたいときにつけるクラス名です。

またcol-8とcol-4のcol-「数字」の部分は足して12になるようにします。数字が大きいほど幅が大きくなります。

なので最大がcol-12で最小はcol-1です。

またこんなことも可能です。

 

col-3を4つ書くことで4カラムのグリッドデザインが出来ました。

4つのグリッドデザイン

 

しかしスマートフォンで4カラムはさすがに窮屈で見づらいですよね。そこでレスポンシブデザインにします。

スマートフォンの場合は4カラムをやめて1カラムにします。

col-3に加えてcol-sm-3と書き直します。smをつけるだけです。

スマートフォンでは1カラムになります。

1列にする

ここでsmというのはディスプレイの幅が576px以上の時にスタイルが適応されることを意味しています。今回の場合はディスプレイの幅が576px以上になると4カラムになります。

smの他にmd , lg ,xlがあります。

sm576px以上でスタイルが反映
md768px以上でスタイルが反映
lg992px以上でスタイルが反映
xl1200px以上でスタイルが反映

 

また均等に分割したい場合はcol-sm-3と数字を必要はありません。col-smで大丈夫です。

最後に

Bootstrapでは特定のクラスをつけるだけでデザインが作れるのでとても便利です。今回紹介した内容はBootstrapのほんの一部です。

 
Bootstrapの機能をもっと知りたい!という方はこちらの書籍がおススメです。

Bootstrapの機能はほぼ載っています。

また実際にサイトを作りながら勉強したい!という方はこちらがおすすめです.