Bootstrapとは?事例からその導入方法までを学ぶ

27日 7月

◎Bootstrapとは

BootstrapとはもともとあのTwitter社が作ったHTML/CSSフレームワークです。そこが作ったっていうこともあって、そのクオリティの高さはもうお墨付きです。

いろいろなプロジェクトで採用されていて実績も十分ですね。例えばAppleやNintendoも一部のサイトでBootstrapを使ったりもしているんですよ。

みなさんもBootstrapを使えば、こんなサイトを作れる可能性があります。すごいですね。

Apple Maps Connect

https://mapsconnect.apple.com/

Super Mario Odyssey

https://www.nintendo.co.uk/Games/Nintendo-Switch/Super-Mario-Odyssey-1173332.html





かんたんなコードで美しいデザインを実現できる

Bootstrapとは、HTML/CSS/JavaScriptで構成されるボタンやナビゲーションメニューなどがテンプレートとして用意されているツールです。テンプレートとは、HTML/CSS/JavaScriptファイルやコードの事です(次回の章で詳しく説明します)。このような予め用意されたファイルやコード使えば、Webサイトのデザインは簡単に素早く行えます。

例えばテーブルを作成する時に以下のようなコードを書きますよね。

<table>
    <tr>
        <th>th1</th><th>th2</th><th>th3</th>
    </tr>
    <tr>
        <td>data1</td><td>data2</td><td>data3</td>
    </tr>
</table>

ブラウザで確認するとこんな感じになっていると思います。

それがBootstrapを使って、用意されているクラスって書き直すと

<table class="table table-striped table-bordered">

見事!きれいなテーブルのデザインになってくれました。

ここではBootstrapが用意していくれているtableタグのクラスを使用したので、自分ではCSSを書かずにこんなきれいなテーブルが簡単にできました。





レスポンシブデザインに対応

また、レスポンシブデザインにも対応しています。図のようにどのようなデバイスに対しても適切な見え方をしてくれます。

レスポンシブデザインとは

閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法。加えて、1つのウェブサイトで多様なデバイスを同様にサポートすることもレスポンシブウェブデザインのタスクに含まれている点を理解しておくことが重要である。 ~ wikipedia

Bootstrapなら難しいレスポンシブ対応も、少ないコードで実現する事が出来ます。

Bootstrapって何が便利なの?

ユーザーは、PC・タブレット・スマホなど、画面サイズが異なる様々な端末からWebサイトを閲覧します。どの端末で閲覧したとしても、画面表示が崩れることなく美しいレイアウト・デザインを保つには、レスポンシブ対応は必要不可欠といえるでしょう。

ですが、レスポンシブ対応はコードも少々複雑で難しいものかもしれません。手間も時間もかかってしまいます。そのような時に、Bootstrapを使えば素早く手軽にレスポンシブに対応する事が出来ます。

これは、Bootstrapがレスポンシブに対応する為のHTML/CSS/JavaScriptコードをあらかじめ用意してくれていて、そのコードを使用するだけでレスポンシブが実現できるからです。

 

また、レスポンシブの他、ナビゲーションバーやボタン、フォームなどサイト制作において必要なパーツもコードをあらかじめ用意してくれています。ですので、それぞれのテンプレート(予め用意されているコード)を組み合わせるだけでサイトが作れてしまうのです。

テンプレートもたくさん揃っている

おしゃれなサイトテンプレートも用意されているので手軽にサイト制作が行えます。サイトテンプレートは、Bootstrapのサイトの「Themes」という項目にあります。。

https://themes.getbootstrap.com/

上で紹介している公式サイトのテーマは有料のものですが、探せば無料のものも数多くあります。例えば以下のサイトでは57つの無料テンプレートを紹介しています。こういったフリーで使えるものがあるととても嬉しいですね。

https://colorlib.com/wp/free-bootstrap-4-website-templates/

 

◎導入

Bootstrapを使う為には、準備が必要になります。導入方法は2種類あります。各種ファイルをダウンロードする方法と、HTMLにBootstrapのリンクを記述する方法です(CDNを使った方法)。どちらの方法も読み込むファイルは同じものです。違いは、ほとんどありません。

しかし、リンク記述の方法だとリンク先のサーバーがダウンしていたりする場合にはBootstrapが機能せず、サイトの表示が崩れてしまうという可能性があります。では、この2つの方法を詳しく見ていきましょう。

CDNでBootstrapを使えるようにする

こちらは、HTMLファイルにリンクを記述する方法です。この方法は、CDNと呼ばれています。HTMLにいくつかの専用リンクを記述するだけで、Bootstrapが使えるようになります。ダウンロードの方法に比べ、とても手軽に始められることが特徴です。また、先ほどCDNだとリンク先のサーバーがダウンしていた場合に、サイトが崩れてしまう可能性を挙げました。しかし、そのようなことは頻繁には起こりませんので、基本的にはこちらの方法を使用していく形でよいでしょう。

ここからはHTMLを作成して実際に手を動かしながらやってみてください。まずは、どこかに適当なフォルダを作成しましょう。フォルダ名はなんでも良いですが今回は「bootstrap_works」という名前にします。

ベースとなるHTMLファイルを制作しましょう。テキストエディタを起動して新規ファイルを作成し「index.html」という名前で保存してください。そして以下のコードを記述しましょう。

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>

</body>
</html>

では、具体的な導入方法を学んでいきます。今回、CDN・ダウンロードの方法ともに「Bootstrap4」というバージョンで説明していきます。では、以下URLにアクセスしてください。

https://getbootstrap.com/

ページ下の方に行ってください。以下イメージの、1つ目の赤枠部分「CSS only」という項目のリンクをコピーしてください。そして「index.html」の<head>~</head>タグ内に貼り付けます。そして次に、2つ目の赤枠部分「JS, Popper.js, and jQuery」という項目の3つのリンクをコピーします。そして、</body>タグの前に貼り付けます。

全てのリンクを貼り付けた「index.html」ファイルは以下のようになります。赤いハイライト部分が追加したリンク部分です。

index.html

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
  <title></title>
</head>
<body>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>

これで、CDNという方法でのBootstrapの導入は完了です。

ダウンロードでBootstrapを使えるようにする

必要なCSS、Javascriptのファイルをダウンロードして、それを導入してみます。

以下にアクセスして、赤枠部分「Download」というボタンを押下します。

https://getbootstrap.com/

そして、表示されたページ内の以下赤枠部分「Download」を押下します。そうすると、自動的に各種ファイルのダウンロードが開始されます。

ダウンロードされたzipフォルダを全て展開してください。そして、展開されたフォルダ内を見てみると「css」ファイルや「js」ファイルが入っています。これらのファイルを読み込むためにHTMLファイルにリンクを記述します。まず、以下のようなHTMLファイルを作成します。ここにリンクを書いていきます。

※zipファイルについて→zipフォルダは圧縮されている為、解凍用のソフトが必要です。有料のものもありますが、Bootstrapのzipファイルであれば無料ソフトでも解凍可能なものも複数あります。解凍ソフトがない方は「窓の杜 解凍」などで検索して探してみるのも良いと思います。

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>

</body>
</html>

以下のように変更してください。赤いハイライト部分が追加したリンクです。そして、このファイルを「index.html」という名前で保存します。保存場所は、以下リンクではダウンロードして展開したBootstrapのフォルダ直下と指定しているので、他の場所に保存するのであれば保存場所に合わせて変更してください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/bootstrap.min.css">
 <title></title>
  </head>
  <body>

    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

これで、ダウンロードする方法でのBootstrapの導入が完了しました。

◎まとめ

・Bootstrapとは、ボタンやフォーム、ナビゲーションメニューなどがテンプレートとして用意されているツールである

・Bootstrapを使えば、簡単に素早くWebデザイン・制作を行う事が出来る

・Bootstrapの導入には、2種類の方法がある

・CDNというHTMLファイルに専用のリンクを記述する方法

・CSSファイル等をダウンロードして読み込む方法

Web制作のプロになろう!スキルハブの無料ビデオ

無料ビデオ13講座/91レッスンが受け放題!

わかりやすい動画レッスンHTML/CSS, JS, デザイン, WordPress, Railsなどがなんと無料。 募集人数には制限があります。サインアップはお早めに。

無料申し込み期限: 10月20日 まで
募集人数: 100名(残りわずか)

今すぐ13講座を受講する(無料)