Bootstrapとは【導入方法と基本を解説】

Bootstrap を初めて使う入門者向けの記事です。導入方法と基本となる知識を解説します。公式サイトを読む前に読んでおくと習得しやすくなるでしょう。

Bootstrap とは

Bootstrap はフロントエンドのWebアプリケーションフレームワークです。MIT License で公開されており、無料で商用利用ができます。

Bootstrapをウェブサイトに導入することで、HTML要素にクラスを与えるだけで汎用性の高いCSS設定を適用できるようになります。

例えば、テキストの色を白に設定するのに通常は color: white; をCSSで記述しますが、Bootstrapでは .text-white をHTML要素のクラスに含めることでも対応できます。

また、クラスを与えなくても、要素自体にもCSSが適用されるものがあり、ある程度はウェブサイトの見た目が整えられます。

BootstrapはCSSだけでなく、JavaScriptも含まれていて、よく知られたコンポーネントを自前のCSSやJavaScriptを書かずに実装できます。

例えば、ドロップダウンコラプススクロールスパイなどがあります。

Bootstrapのメリット

Bootstrapは、汎用的なコードをHTMLにクラスを与えるだけで適用できるので、コード量がかなり減ります。その分独自のコードに集中することができます。

また、開発の知識が乏しくてもそれなりのUIが実現できる敷居の低さも魅力です。レスポンシブデザインだって簡単にできちゃいます。

Bootstrapのデメリット

Bootstrapは大人気のフレームワークで、いろいろなところで使われています。なのでウェブサイトがBootstrap臭くなりやすいです。

でも大丈夫です。ベースをBootstrapにして、独自性のあるところだけを自分で記述すれば、十分オリジナリティのあるサイトを作ることができます。

ベースが洗練されているため、デメリットよりもメリットの方が圧倒的に上回ります

Bootstrapの導入方法

Bootstrapを導入するにはCSSとJavaScriptを読み込む必要があります。

Bootstrapで読み込む必要があるもの:

CDNを利用する場合

CDNを使えばもっとも簡単にBootstrapを導入できます。

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <!-- Required meta tags -->
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.  
  8. <!-- Bootstrap CSS -->
  9. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  10.  
  11. <!-- あなたのCSS -->
  12. <link href="css/style.css" rel="stylesheet">
  13.  
  14. <title>Hello, world!</title>
  15. </head>
  16. <body>
  17. <h1>Hello, world!</h1>
  18.  
  19. <!-- Optional JavaScript -->
  20. <!-- 最初に jQuery、 次に Popper.js, そして Bootstrap JS の順番に読み込む -->
  21. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  22. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  23. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  24. </body>
  25. </html>

セルフホスティングする場合

セルフホスティングする場合はダウンロードページからダウンロードします。特にカスタマイズをしないのであれば「Compiled CSS and JS」を選択すればすぐに使用できます。ダウンロードページに記載されていますが、npm などのインストールもできます。

CodePenで試す場合

CodePenテンプレートを作成しましたのでご自由にお使いください。BootStrapのCDNが設定してあります。

グリッドシステム

Bootstrapは、レスポンシブデザインのベースとしてグリッドシステムを採用しています。

グリッドコンテナを12列に分割し、行ごとにコンテンツを配置していきます。コンテンツには、12列のうちの何列分占有するかを決め、12列を溢れたら折り返される仕組みとなっています。

1つの行に1列分を13個配置した例:

1
2
3
4
5
6
7
8
9
10
11
12
13

1つ目の行に「3列-4列-5列」、2つ目の行に「列指定なし-4列-列指定なし」と配置した例:

.col-3
.col-4
.col-5
.col
.col-4
.col

グリッドコンテナ(.container, .container-fluid

グリッドシステムはグリッドコンテナの中にコンテンツを配置します。

コンテナは、固定幅コンテナ全幅コンテナの2種類があります。

固定幅コンテナ
  1. <div class="container">
  2. <!-- コンテンツ -->
  3. </div>
全幅コンテナ
  1. <div class="container-fluid">
  2. <!-- コンテンツ -->
  3. </div>

グリッドの行(.row

グリッドの行は .row クラスで表し、コンテナ直下に配置します。

  1. <div class="container">
  2. <!-- 1行目 -->
  3. <div class="row">
  4. <!-- ここに各列が入る -->
  5. </div>
  6. <!-- 2行目 -->
  7. <div class="row">
  8. <!-- ここに各列が入る -->
  9. </div>
  10. </div>

グリッドの列(.col, .col-*

グリッドの列は .col で表し、行の直下に配置します。

  1. <div class="container">
  2. <div class="row">
  3. <div class="col">1列目</div>
  4. <div class="col">2列目</div>
  5. <div class="col">3列目</div>
  6. </div>
  7. </div>

列の中にはさらにコンテナを配置することができます。これは結構重要でして、コンポーネントを自作するのに役立ちます。

ブレークポイント

Bootdtrapのブレークポイントは画面の幅のピクセル値に境界を設けて、一定の幅以上になったらレイアウトを変化させるというものです。

Extra smallSmallMediumLargeExtra large
ブレークポイントなし≧576px≧768px≧992px≧1200px
最大コンテナ幅なし540px720px960px1140px
class プレフィックス.col-.col-sm-.col-md-.col-lg-.col-xl-
主なデバイススマートフォン小型タブレット大型タブレット小型PC大型PC

例えば、class="col-12 col-lg-8" とした場合は、基本は12列分占有し、画面幅がLarge(992px)以上の場合に8列分占有するということになります。

占有する列数だけでなく、display プロパティや padding プロパティなども指定可能です。どんなものがあるかは公式ドキュメントのUtilitiesで探してみてください。

さらにBootstrapを知る

ここまでの説明を理解したなら、Bootstrapの基礎はマスターしています。あとは公式のドキュメントを読み漁っていけばすぐに使いこなせるようになります。

Componentsには様々なコンポーネントが載っており、ワクワクさせてくれると思います。

UtilitiesにはCSSの記述を減らせる汎用性のあるユーティリティが載っています。CSSの理解がないと扱うのは難しいですが高度な内容ではありません。