Bootstrap3のインストール方法

Bootstrap3のインストール方法は？

Bootstrap3のインストール方法

Bootstrapは、WebサイトやWebアプリケーションを簡単に作成するための、世界的に人気なフロントエンドフレームワークです。レスポンシブデザインに対応したグリッドシステムや、洗練されたUIコンポーネントが数多く用意されており、初心者から上級者まで幅広く利用されています。この記事では、Bootstrap3を自分のプロジェクトにインストールする方法について詳しく解説します。

Bootstrap3のインストール

Bootstrap3を利用するには、以下の2つの方法があります。

CDN経由で読み込む方法
ファイルをダウンロードして読み込む方法

それぞれの手順を詳しく見ていきましょう。

1. CDN経由で読み込む方法

CDN経由で読み込む方法は、最も簡単にBootstrap3を利用できる方法です。CDNとは、Content Delivery Networkの略で、世界中にサーバーを配置し、コンテンツを高速に配信するサービスです。Bootstrap3は、BootstrapCDNやcdnjsといったCDNで提供されています。

CDN経由でBootstrap3を読み込むには、以下のコードをHTMLファイルのタグ内に記述します。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

上記コードは、Bootstrap3のCSSとJavaScriptファイルを読み込むためのコードです。JavaScriptファイルを読み込む前に、jQueryを読み込む必要がある点に注意してください。

CDN経由で読み込むメリット

インストールが不要で、すぐに利用できる
CDNのサーバーから配信されるため、Webサイトの表示速度が向上する可能性がある
多くのユーザーが利用しているため、キャッシュが効きやすい

CDN経由で読み込むデメリット

インターネット接続がない環境では利用できない
CDNのサービスが停止した場合、Webサイトが表示されなくなる可能性がある

2. ファイルをダウンロードして読み込む方法

ファイルをダウンロードして読み込む方法は、CDN経由で読み込む方法と比べて、インストールの手間がかかりますが、インターネット接続がない環境でも利用できるというメリットがあります。

ファイルをダウンロードして読み込むには、以下の手順を行います。

Bootstrapの公式サイト(https://getbootstrap.com/)にアクセスし、"Download Bootstrap"ボタンをクリックして、zipファイルをダウンロードします。
ダウンロードしたzipファイルを展開します。
展開したフォルダの中から、"css"フォルダと"js"フォルダを、自分のプロジェクトの適切な場所に配置します。
HTMLファイルから、配置したCSSとJSファイルを読み込みます。

以下は、ダウンロードしたBootstrap3のファイルを読み込むHTMLファイルの例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap3のインストール</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>

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

ファイルをダウンロードして読み込むメリット

インターネット接続がない環境でも利用できる
Bootstrapのバージョンを自由に選択できる

ファイルをダウンロードして読み込むデメリット

インストールの手間がかかる
ファイルの更新を手動で行う必要がある

Bootstrap3のファイル構成

ダウンロードしたzipファイルを展開すると、以下の様なファイル構造になっています。

フォルダ/ファイル名	説明
css/	BootstrapのCSSファイルが格納されています。
js/	BootstrapのJavaScriptファイルが格納されています。
fonts/	Bootstrapで利用されるフォントファイルが格納されています。

まとめ

この記事では、Bootstrap3のインストール方法について解説しました。CDN経由で読み込む方法とファイルをダウンロードして読み込む方法の2つの方法を紹介し、それぞれのメリットとデメリットを説明しました。また、Bootstrap3のファイル構成についても簡単に触れました。この記事が、Bootstrap3を始めるにあたって参考になれば幸いです。

参考文献

Bootstrap · The most popular HTML, CSS, and JS library in the world.