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.min.cssとbootstrap.bundle.min.jsを自分のフォルダに移動させてください。
CDNを利用する方法
公式サイトに行き、ダウンロードをクリックしてください。
下の方にCDNのコードがあるのでコピーしてください。
Bootstrapのファイルを張り付ける
Bootstrapはjqueryというライブラリに依存しています。なのでBootstrapのファイルの前にjqueryのCDNを貼り付けてください。
1 | <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> |
ファイルのパス、あるいはBootstrapのCDNを<head></head>内に貼り付けてください。
ファイルの場合はこんな感じになります。※ファイルのパスは人によって異なります。コピペしても動作はしません。
ファイルの中からbootstrap.min.cssとbootstrap.bundle.min.jsのパスをheadタグ内に書きます。
1 2 3 4 5 | <head> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="js/bootstrap.bundle.min.js"></script> </head> |
CDNの場合
こちらはコピペで動作します。
1 2 3 4 | <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> </head> |
Bootstrapの基本的な使い方
よく使われるグリッドデザインをBootstrapを使って制作してみます。
1 2 3 4 5 6 7 8 | <body> <div class="container"> <div class="row"> <div class="col-8" style="background-color: red; color: #fff;">グリッドデザイン</div> <div class="col-4" style="background-color: blue; color: #fff;">グリッドデザイン</div> </div> </div> </body> |
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カラムをやめて1カラムにします。
col-3に加えてcol-sm-3と書き直します。smをつけるだけです。
1 2 3 4 5 6 7 8 9 10 | <body> <div class="container"> <div class="row"> <div class="col-sm-3" style="background-color: red;color: #fff;">グリッドデザイン</div> <div class="col-sm-3" style="background-color: blue;color: #fff;">グリッドデザイン</div> <div class="col-sm-3" style="background-color: red;color: #fff;">グリッドデザイン</div> <div class="col-sm-3" style="background-color: blue;color: #fff;">グリッドデザイン</div> </div> </div> </body> |
スマートフォンでは１カラムになります。
ここでsmというのはディスプレイの幅が576px以上の時にスタイルが適応されることを意味しています。今回の場合はディスプレイの幅が576px以上になると4カラムになります。
smの他にmd , lg ,xlがあります。
| sm | 576px以上でスタイルが反映 |
| md | 768px以上でスタイルが反映 |
| lg | 992px以上でスタイルが反映 |
| xl | 1200px以上でスタイルが反映 |
また均等に分割したい場合はcol-sm-3と数字を必要はありません。col-smで大丈夫です。
1 2 3 4 5 6 7 8 9 10 | <body> <div class="container"> <div class="row"> <div class="col-sm" style="background-color: red;color: #fff;">グリッドデザイン</div> <div class="col-sm" style="background-color: blue;color: #fff;">グリッドデザイン</div> <div class="col-sm" style="background-color: red;color: #fff;">グリッドデザイン</div> <div class="col-sm" style="background-color: blue;color: #fff;">グリッドデザイン</div> </div> </div> </body> |
最後に
Bootstrapでは特定のクラスをつけるだけでデザインが作れるのでとても便利です。今回紹介した内容はBootstrapのほんの一部です。
実際にサイトを作りながら勉強したい！という方はこちらがおすすめです．
リンク