はじめてのフレームワーク　【Bootstrap編】｜中央コンピューターサービス株式会社(CCS)

えりちゃん
針に糸を通すのが得意

ゆいちゃん
ボール投げが苦手

ともちゃん
毛玉取りが趣味

リーダー五十嵐氏
本日の講師

はじめに

: 今回はWEBサイトの画面制作に便利な「CSSフレームワーク」である「Bootstrap」について学んでいくよ。

: WEBサイトの画面といえば、以前学んだように「HTML」と「CSS」で画面のレイアウトを作るんですよね。

: CSSはHTMLのデザインを装飾するための言語でしたよね。
でも、CSSで細かく指定しながらデザインを整えていくのはなかなか大変でした。

: まとまったデザインのWEBサイトにしたいけど、デザイナーさんに依頼せずに自分でデザインを考えること自体も難しいです！

: そうだね。
でも、そんなデザインの悩みを解決できる便利なCSSのフレームワークがあるんだよ。早速見てみよう！

CSSフレームワークとは

CSSフレームワークとは、HTMLで利用するためのパーツ集として提供されているCSS用のフレームワークを指す。

様々なデザインのパーツがCSSやJavaScriptなどで記述されたソースコードとして提供されており、HTMLにクラス名を指定するなどの決まりに沿った記述を追加するだけで、任意のパーツをWEB画面に表示させたり動作させたりすることができる。

CSSフレームワークだけでも多くの種類が存在するため、各フレームワークの特徴を見て自分の開発スタイルや想定するサイトデザインに適したものを選ぶことが重要となる。

特に近年はデザイン性を重視したタイプと動作の軽量さを重視した2つのタイプに分かれつつある。

: 今回は、この中でも人気で手軽な「Bootstrap」について見ていくよ。

Bootstrapとは

「Bootstrap」はパーツやテンプレートが豊富で、レスポンシブデザインに対応した高機能なCSSフレームワークとして知られている。

もともとはTwitter社がSNS「Twitter」を開発するために用意したフレームワークであり、それがオープンソースとして一般向けに公開されたものである。

また、公式内外でBootstrap対応のデザインテンプレートが有料・無料ともに数多く配信されており、好みに合ったサイトデザインを簡単に取り入れることも可能となっている。

Bootstrapの利用

Bootstrapを利用するためにはいくつかのファイルを事前に準備する必要がある。

CSSファイル「bootstrap.css」
Javascriptファイル「bootstrap.js」
javascriptファイル「jquery-x.x.x.js」（jQuery）
javascriptファイル「Popper.js」

「bootstrap.css」「bootstrap.js」

Bootstrapの本体となるファイル

「jquery-x.x.x.js」

jQueryと呼ばれるファイル本体を指す。最新バージョンであるBootstrap5では不要となったが、Bootstrap4以前のバージョンを利用する際は必要となるファイル

「Popper.js」

Bootstrapのドロップダウン、ポップオーバー、ツールチップなどを利用する際に必要となるファイル。それらの機能を使用しない場合は準備は不要。

上記のファイルはすべて

それぞれの公式サイトから直接ダウンロードして手元にファイルを揃える方法
CDN（Googleなど配信サイトURLのスクリプトタグをソースコード内で読み込み、配信サイトから必要ファイルを取得する読み込み方法）を利用する方法
「npm」コマンドでコマンドプロンプトからインストールする方法

のどれからでも準備することが可能となっている。

: Bootstrapの利用に必要なファイルを準備してみよう。
CDNを利用するなら、ソースコードに決められたスクリプトタグを記述するだけで準備は完了するよ。例にはBootstrap4のURLを指定しているよ。
ファイルをローカルにダウンロードして準備した場合は、ファイルを保存した場所をスクリプトタグで指定しよう。

<head>
  <!--CDNで配信サイトから取得して読み込む場合-->

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

  <!--jquery-->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

  <!--popper.js-->
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

  <!--bootstrap.js-->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>

<head>
  <!--ローカルにダウンロードしたファイルを指定して読み込む場合-->

  <!--bootstrap.css-->
  <link rel="stylesheet" href="C:\bootstrap\dist\css\bootstrap.css">

  <!--jquery-->
  <script type="text/javascript" src="C:\bootstrap\jquery.js"></script>

  <!--popper.js-->
  <script type="text/javascript" src="C:\bootstrap\popper.js"></script>

  <!--bootstrap.js-->
  <script type="text/javascript" src="C:\bootstrap\dist\js\bootstrap.js"></script>
</head>

: では実際にBootstrapを使ってみよう！
まずはHTMLで作られる通常のボタンの見た目を装飾してみるよ。
一番左が通常のボタンで、それ以外は全てBootstrapを使ったボタンだね。

<body>
  <button type="button">通常</button>
  <button type="button" class="btn btn-primary">青色</button>
  <button type="button" class="btn btn-secondary">灰色</button>
  <button type="button" class="btn btn-success">緑色</button>
  <button type="button" class="btn btn-danger">赤色</button>
  <button type="button" class="btn btn-warning">黄色</button>
  <button type="button" class="btn btn-info">水色</button>
  <button type="button" class="btn btn-light">白色</button>
  <button type="button" class="btn btn-dark">黒色</button>
</body>

: 通常のボタンに、Bootstrap用の記述「class=”btn btn-primary”」を追加しただけで青くて角が丸いボタンに変わりましたね！

: 次は動きのあるパーツも使ってみよう！
アイコンを押すとメニューが閉じたり開いたりするパーツだよ。

<body>
  <div class="collapse" id="navbar">
    <div class="bg-dark p-4">
      <h5 class="text-white h4">ナビバー</h5>
      <span class="text-muted">メニューを折りたたむことができます。</span>
   </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</body>

: 「class=”collapse”」のdivタグの中には折りたたんでおきたい内容を、navタグの中には折りたたんでいる時に表示させるアイコンや、開いたときに表示する対象が「class=”collapse” id=”navbar”」の箇所であることを指定しているんですね。

: 使いたいデザインを選んで、専用の記述を書き足すだけでデザインを大きく変えることができるのは魅力的ですね。

: ところで、先ほどの説明に出てきた「レスポンシブデザイン」というのは何ですか？

: どんなモニタサイズの端末から見てもレイアウトが崩れないように、
あらかじめ用意しておいたレイアウトのパターンの中から、モニタサイズに合ったレイアウトへと自動で切り替えてくれる仕組みだよ。

: PC用とモバイル用でWEBサイトを2つ用意する必要がなくなるわけですね！

おわりに

: WEBサイトで使うパーツのデザインを自分で考える必要がなくなると、サイト作成も楽になりますね！

: すでに完成しているパーツ集から選ぶ訳ですから、CSSでパーツを自作する時間も減らすことができますね。

: どんなパーツをどう記述すれば使えるかはBootstrap公式ドキュメントを見れば確認できるから色々試してみてね。
次回はまた別の「フレームワーク」について学んでいくよ！

はじめてのフレームワーク 【Bootstrap編】