Bootstrap4の導入方法を図解たっぷりで解説する | SkillhubAI（スキルハブエーアイ）

Bootstrap4の導入方法を図解たっぷりで解説する

Bootstrapとは

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

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

 

Bootstrapが使われているサイト例

Apple Maps Connect

file https://mapsconnect.apple.com/

 

Super Mario Odyssey

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

 

 

Bootstrapって何が便利なの？

簡単なコードで美しいデザインを実現

file

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>

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

file

それがtableタグにBootstrapで用意されているクラスを加えるだけで

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

↓

file

見事！きれいなテーブルのデザインになってくれました。 追加した「table table-striped table-bordered」クラスには、Bootstrapの方で既にスタイルが準備されています。このためクラスを加えるだけで、自分ではCSSを書かずにこんなきれいなテーブルが簡単にできまうのです。

 

 

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

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

file

 

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

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

 

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

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

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

 

file

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

 

 

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

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

![file](https://popshub.s3.amazonaws.com/uploads/ckeditor/pictures/1386/content_image-1564181674280.png) https://themes.getbootstrap.com/ 上で紹介している公式サイトのテーマは有料のものですが、探せば無料のものも数多くあります。例えば以下のサイトでは57つの無料テンプレートを紹介しています。こういったフリーで使えるものがあるととても嬉しいですね。 ![file](https://popshub.s3.amazonaws.com/uploads/ckeditor/pictures/1395/content_image-1564188985645.png) https://colorlib.com/wp/free-bootstrap-4-website-templates/

 

 

## Bootstrapの導入

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

![file](https://popshub.s3.amazonaws.com/uploads/ckeditor/pictures/1396/content_image-1564189199627.png) しかし、リンク記述の方法だとリンク先のサーバーがダウンしていたりする場合にBootstrapが機能せず、サイトの表示が崩れてしまうという可能性があります。 では、この２つの方法を詳しく見ていきましょう。 **こちらの講座では、CDN・ダウンロードの方法ともに「Bootstrap４」というバージョンで説明していきます。**

 

 

## ◆実習:CDNでBootstrapを導入する こちらは、HTMLファイルにリンクを記述する方法です。この方法は、CDNと呼ばれています。HTMLにいくつかの専用リンクを記述するだけで、Bootstrapが使えるようになります。ダウンロードの方法に比べ、とても手軽に始められることが特徴です。

 

また、先ほどCDNだとリンク先のサーバーがダウンしていた場合に、サイトが崩れてしまう可能性を挙げました。しかし、そのようなことは頻繁には起こりませんので、基本的にはこちらの方法を使用していく形でよいでしょう。

 

**ここからはHTMLファイルを作成して、実際にやってみてください。** まずは、どこかに適当なフォルダを作成しましょう。フォルダ名はなんでも良いですが今回は「bootstrap_works」という名前にします。 ![file](https://popshub.s3.amazonaws.com/uploads/ckeditor/pictures/1397/content_image-1564190739221.png) ベースとなるHTMLファイルを制作しましょう。テキストエディタを起動して新規ファイルを作成し「index.html」という名前で保存してください。 そして以下のコードを記述しましょう。

index.html 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title></title>
</head>
<body>

</body>
</html>

 

viewportとは

ここではviewportというmetaタグが設定されています。 これはデバイスの大きさに合わせてサイズを決めるというタグになります。例えば横幅のサイズが480pxのスマートフォンでサイトを見に来たら、そのサイズに合わせてくれます。

まずは以下を書いておけば問題ないので、コピペでも良いので書いておきましょう。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 

Bootstrap導入

では、実際にCDN版のBootstrap導入方法を学んでいきます。

以下URLにアクセスします。 https://getbootstrap.jp/docs/4.5/getting-started/introduction/

ページをスクロールダウンすると「はじめる」という項目があります。

file

 

CSSという項目のlinkタグをコピーしてください。 右上、グレーで表示されている「copy」を使うと便利です。 コピーしたコードはindex.htmlの<head>～</head>タグ内に貼り付けます。

次に、JavaScriptの項目にあるjsリンクを全てコピーします。 こちらは</body>タグの前に貼り付けてください。

 

全てのリンクを貼り付けた「index.html」ファイルは以下のようになります。 分かりやすいように<!-- CSS -->などコメントを付けていますが、コメントアウト部分は削除してしまっても構いません。

index.html 

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



    <!-- JavaScript -->
    <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>

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

 

 

※最新版（v5系）について

Bootstrapからは最新版の5がリリースされています。 こちらを使用しても構いませんが、alphaやbetaと付いているようにまだ動作が完全でない箇所もあるようです。また、一部のクラス名等も変更されています。

本講座を進めるにあたっては4系の使用をお勧めします。

 

 

ダウンロード版の導入方法

必要なファイルをダウンロードしてBootstrapを使用することも出来ます。

ダウンロード版を使用する場合は、以下のURLにアクセスします。 ダウンロードをクリックして下さい。

https://getbootstrap.jp/docs/4.5/getting-started/download/

file

 

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

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

 

では解凍したBootstrapのファイルを読み込ませましょう。 まず、以下のような中身のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title></title>
</head>
<body>

</body>
</html>

 

cssファイルやjsファイルを読み込むためのリンクを書いていきます。 以下のようにリンクタグを追加し、「index.html」という名前で保存します。

index.html 

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

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

※上記の記述はダウンロードして展開したBootstrapのフォルダ直下に、index.htmlを置いた場合のファイルパス（保存場所）で作成しています。

file

cssやjsファイルを他の場所に保存するのであれば、保存場所に合わせて変更してください。

 

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

 

 

◎まとめ

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

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

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

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

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

 

 

今回作成した「bootstrap_works」フォルダ、その中にあるCDNリンクを記述したindex.htmlは次回以降も使います。保存しておいて下さい。

次のレッスン
レッスン一覧へ