"Bootstrap"の利点と用法[コンポーネント編]

May 19, 2020

概要

今回は、CSSフレームワークであるBootstrapについて説明し，コンポーネントの利用法を学びます．

Bootstrapとは

BootstrapはワンダフルなCSSフレームワークです。と言われても、CSSフレームワークって何さという人が大半だと思うので、まずはCSSフレームワークの話をします。

楽しいCSSフレームワーク

CSSフレームワークとは、簡単にいうと、スタイルを記述していくのを補助してくれるツールです。

前回は、CSSを自分で一から書くことをしました。つまり、HTMLの要素ごとにクラスを追加して、そのクラスに対して、プロパティ名と値を追加してごちゃごちゃ、、と。もちろん、自分でCSSをゼロから（from scracth）書ける事は非常に大事な事です。これができなければ、自分でちょっとしたカスタマイズをする事はできません。

しかし、これは非常に骨が折れる作業です。ここで、これを楽にするためにCSSフレームワークと言われるものを用いるわけです。CSSフレームワークは、定型的な処理（例えば、要素を横に何個か並べるだとか）を簡単にできるよう魔法の力を私たちに授けてくれます。

Twitter謹製Bootstrap君

おそらく、世界で最も人気のあるCSSフレームワークだと思います。公式ページでも、「the world’s most popular front-end open source toolkit」なんかと自負しちゃってます。実際に、この自負があるだけあって、世界中で用いられています。

CSSフレームワークの他の選択肢としては、Semantic UIだったり、Materializeだったりがあります。まあ、たくさんの有名なフレームワークがありますので、興味があったらググってみてください。それぞれが個性を持っているので、自分のお気に入りを探してみるのもいいかもしれません。

Bootstrapの特徴・利点

Bootstrapの特徴や利点で特筆すべき点は以下の4つです。

  1. とにかく早く・楽に作れる
  2. ある程度統一的なスタイルを提供する
  3. レスポンシブなサイトを簡単に構築できる
  4. チームでコーディングしたときに、HTMLやCSSの書き方の統一性が失われるのを緩和する

1.とにかく早く・楽に作れる

Bootstrapの一番の利点は早く・楽にスタイルを作れる事です。極論を言えば、CSSを一切自分で記述しなくとも、Bootstrap提供のスタイリングを自分のHTMLに反映させることができます。

車輪の再発明を防ぐという意味でも、Bootstrapを用いて、予め用意された定型的なスタイルを使用するのはいい意味を持ちます。

2.ある程度統一的なスタイルを提供する

Bootstrapによって提供されるスタイルは、良くも悪くもBootstrapらしさがでます。みる人が見れば、あっ、このサイトBootstrapを使ってるな、とわかるほどにです。

しかし、これは裏を返せば、とても統一的であるということです。とにかく、不可のないデザインになります。オリジナリティがなくて味気ないよと感じる人もいるかもしれませんが、そういう人は、CSS及びデザインを地道に学んで自作してみるといいと思います。この世界は正解がないので、非常に奥が深いです。

3.レスポンシブなサイトを簡単に構築できる

公式サイトのトップベージを開くと、以下のようになっています。

bootstrapトップページ

これぞとばかりに、レスポンシブなサイトのことについて書いてあります。Bootstrap的にはかなり売りにしてる機能なのでしょう。

さて、レスポンシブとは、直訳すると「反応する」という意味です。ここでいう「反応する」というのは、デバイスの画面サイズに対してです。昨今は、スマホやタブレット、パソコン、はたまたゲーム機からもネットサーフィンをすることができます。これらの画面サイズは当然違いますので、例えば、Webサイトをパソコンのモニターからみることを想定して作ると、スマホからみるととても小さく見辛くなるわけです。このようなことが起こらないように、デバイスのウィンドウ幅に合わせてみやすい表示に自動で切り替える仕組みを「レスポンシブ」といいます。

ちなみに、この「レスポンシブ」という単語は、レスポンシブデザインというコンテキストで用いられることが多いです。

4.HTML・CSSの統一性を保持する

BootstrapはHTML・CSSの記法の統一性を保持するのを手助けします。

何かに追われ、とりあえず動けばいいやーーとなり、やたらめったらにコードを書いてしまった。次の日の朝、寝癖のついた髪でそのコードをみたら、なんてでたらめなコードなんだと驚いてしまうかもしれません。あるいは、チームの人がCSS書いといてくれたらしいけど、独創的すぎてわかりづらい、なんてこともあるかもしれません。こういうものに対処するのは、少しばかり根気と胆力が要ります。

しかし、もしBootstrapを使っていたらどうでしょうか。Bootstrapは、その堅牢性ゆえ、書き手の書き方を制約し、ある程度統一化します。この統一的なルールに基づいて書けば、表現の揺れをなくし、誰からみてもわかりやすいコードになるのです。属人性の排除と言ってもいいかもしれません。

Bootstrapの使い方

まず、Bootstrapを使うためには、そのための設定が必要です。

Bootstrapの設定

Bootstrapを使用する際は、HTMLの<head>タグのなかに、以下のコードを追加します。

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

上の2行は、文字コードの設定とモバイル用の画面設定をしています。3行目では、bootstrap.min.cssというスタイルシートを読み込んでいます。前回、自作のスタイルシートを読み込んだときもこの方法でしたね。

次に、</body>の直前に以下のコードを追加します。

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

ここでは、CDNという方法で、BootstrapのJavaScript部分及びその依存ライブラリであるjQueryとPopper.jsを読み込んでいます。読み込む順番に気をつけてください（このコードをそのまんまコピペしてください！）。

全体像としては次のような感じです。書き始めるとき、これをコピペするのが楽だと思います。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <title>Hello, Bootstrap!</title>
  </head>
  <body>
    <h1>Hello, Bootstrap!</h1>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

これで設定は完了です。やっとBootstrapを使えます。。ふぅ。。

Bootstrapの使い方

Bootstrapは、クラスを使ってスタイリングしていきます。クラスを忘れちゃったよ、という人はここを復習してみてください。

例えば、btnクラスをaタグにつけると、ボタンのような見た目になり、そのボタンを押すと、リンク先に飛べる、みたいなことになります。

このように決められたクラス名をつけることによって、そのクラス名に対応するデザインが要素に付与されることになります。

前回、自分でCSSを書いていったのを思い出してください。そのときは、クラス名を追加して、スタイルシートに自分でスタイルを書きましたね。今回は、そのスタイルシートにあたる部分（例えば、.btn{~~~}みたいな記述）は既に書かれており、特定のクラス名を指定するだけでスタイルが適用できるようになっているのです。

Bootstrapのコンポーネント

Bootstrapには様々なスタイリングを補助する機能がありますが、今回はその中でもコンポーネントと言われるものについて説明します。

コンポーネントとは、UIの部品みたいなものです。私たちはその部品を配置していくことによって、Webページを作成することができます。この作業は簡単で、ほぼ、コピペでいけます。コピペするだけで、それなりの見た目になります笑

一つ一つ説明していると、時間も余白も足りないので、説明は公式ページにまかせます。特に次のコンポーネントはよく利用するのでしっかりと確認しておいてください。

まとめ

  • CSSフレームワークはスタイルを記述するのを補助してくれるツールである
  • CSSフレームワークを使うことによって、チーム開発が円滑にいくことがある・レスポンシブ対応が簡単になる
  • Bootstrapの設定は、コピペで良い
  • Bootstrapの機能の一部としてコンポーネントがあるが、これはUIの部品で、Webサイトを作成するのに役立つ