PR

Bootstrapの導入方法(読み込み)をわかりやすく3分で解説

CSS

Web開発のデザイン効率を飛躍的に向上させるBootstrapですが、実際にBootstrapを導入・利用開始する方法として主に2つの手段が存在します。(①ダウンロード方式・②CDN方式

どちらの方法もBootstrapをあなたのプロジェクトに導入するための有効な手段です。

参考 Bootstrapとは?

このページでは、これら2つの導入方法を一緒に詳しく解説。各手法のステップバイステップのガイドラインだけでなく、それぞれの方法が持つメリットとデメリットについても詳しくご説明します。また、Bootstrapを適用する際のHTMLテンプレートの基本構造についても触れていきます。

このページで学べる内容
  • Bootstrapのセットアップ
    • ダウンロード方法
    • CDNの利用方法
  • HTMLテンプレートの基本構造

この記事を読むことで、Bootstrapの導入からHTMLテンプレート構造の理解まで、Bootstrapを活用するための第一歩を踏み出せるはず。是非最後までご覧ください。

スポンサーリンク

Bootstrapの導入:ダウンロード方法

早速、Bootstrapを導入する1つ目の「ダウンロードして利用する方法」について解説します。

プロジェクトにBootstrapを導入する方法の一つとして、Bootstrapの公式ウェブサイトから直接ファイルをダウンロードし、プロジェクトに追加する方法があります。

この方法は、特定のネットワーク環境下では後述するCDN方式よりも安定性があるというメリットがあります。具体的な手順を見ていきましょう。

ステップ1:Bootstrapのダウンロード

まずは、Bootstrapの公式ウェブサイト https://getbootstrap.com を開きます。

Bootstrapのホームページ
図1:Bootstrapのホームページ

ホームページにアクセスしたら「Download」ボタンをクリック。

ダウンロードページに移動したら、「Compiled CSS and JS」の「Download」ボタンをクリックします。BootstrapのZIPファイルがダウンロードされます。

Bootstrap ダウンロード
図2:Bootstrap ダウンロード

ステップ2:ダウンロードしたファイルの解凍

ダウンロードしたZIPファイルを解凍します。解凍すると、「CSS」フォルダと「JS」フォルダが含まれています。

図3:CSSフォルダ/JSフォルダ

ステップ3:Bootstrapの配置

あなたのプロジェクトフォルダ内に「bootstrap.min.css」「bootstrap.min.css.map」「bootstrap.min.js」「bootstrap.min.js.map」をコピーします。これらのファイルは、それぞれ解凍した「CSS」フォルダと「JS」フォルダ内にあります。

このフォルダ(ディレクトリ)構成は、あなたが利用しているシステムによって異なります。もし、今はローカル環境で開発を進めているのであれば、ローカルPC上の任意の場所に配置しておけば問題ありません。

ステップ4:HTMLファイルでBootstrapを読み込む

最後に、HTMLファイルでこれらのCSSとJSファイルを読み込みます。やり方がわからない人のために、詳細なコーディング方法を以下2つの記事でそれぞれご説明しております。

参考 HTMLでCSSを読み込む方法 / HTMLでJavaScriptを読み込む方法

下記の例で「path/to/」とある部分は、あなたがBootstrapのファイルを置いた場所に置き換えてください。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="path/to/bootstrap.min.css" rel="stylesheet">

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

    <!-- Bootstrap JS -->
    <script src="path/to/bootstrap.min.js"></script>
  </body>
</html>

以上がBootstrapのダウンロードと設定の基本的な手順です。この方法を使えば、あなたのプロジェクトは常にBootstrapの最新版を使用することが可能になります。次のセクションでは、BootstrapをCDNから利用する方法について見ていきましょう。

Bootstrapの導入:CDNの利用方法

Bootstrapをプロジェクトに導入するもう1つの方法は、CDN(Content Delivery Network)を利用する方法です。

CDNは、全世界のサーバネットワークを利用してコンテンツを配信するシステムで、Bootstrapのような静的ファイルを迅速に読み込むのに適しています。この方法の利点は、手軽に導入できることと、常に最新のBootstrapを使用できることです。

具体的な手順を見ていきましょう。

ステップ1:BootstrapのCDNリンクを取得

Bootstrapの公式ウェブサイト https://getbootstrap.com を開き、「Get started」ボタンをクリックします。次に表示されるページに、BootstrapのCSSとJavaScriptのCDNリンクが記載されています。

Bootstrap CDNリンク
図5:Bootstrap CDNリンク

ステップ2:HTMLファイルでBootstrapのCDNリンクを読み込む

取得したCDNリンクをHTMLファイルで読み込みます。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

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

    <!-- Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  </body>
</html>

上記の例では、<head>タグ内にBootstrapのCSSリンクを配置し、<body>タグの終わり近くにBootstrapのJavaScriptリンクを配置しています。これにより、ページの読み込み速度を向上させることができます。

以上がBootstrapをCDNから利用する基本的な手順です。

簡単な手順でBootstrapをプロジェクトに導入でき、さらにはユーザーに対して最速の配信速度を提供できるのが、CDNの利用方法の大きな魅力です。

Bootstrapの導入方法:ダウンロード方式とCDN方式の比較

Bootstrapを導入する方法は、ダウンロード方式とCDN方式の2つが主流です。それぞれの特性とメリット、デメリットを理解することで、あなたのプロジェクトに最適な方法を選ぶことができます。以下に、それぞれの特性を表にまとめました。

導入方法概要メリットデメリット
ダウンロード方式Bootstrapの公式ウェブサイトからファイルを直接ダウンロードし、プロジェクトに追加。インターネット接続が不安定な環境でも動作し、オフラインでの開発が可能。Bootstrapのバージョンを自由に選べる。プロジェクトにBootstrapのファイルを直接含めるため、ファイルサイズが増える。最新のバージョンを利用するには手動で更新する必要がある。
CDN方式全世界のサーバネットワークを利用してBootstrapのファイルを配信する方式。HTMLファイルで直接CDNのリンクを指定する。導入が手軽で、常に最新のバージョンを使用することができる。サーバとの通信が早いため、ファイルの読み込み速度が向上する。インターネット接続が必要で、接続が不安定な環境では動作が不安定になる可能性がある。

どちらの方法を選ぶべきかは、あなたのプロジェクトの状況とニーズによります。

例えば、あなたがオフライン環境で開発を進める必要がある場合や、特定のバージョンのBootstrapを使用したい場合には、ダウンロード方式が適しています。一方、導入の手軽さや最新のバージョンを常に使用したい、読み込み速度を優先したい場合には、CDN方式が適しています。

それぞれのメリットとデメリットを理解した上で、プロジェクトに最適なBootstrapの導入方法を選んでください。

次のセクションでは、Bootstrapを適用する際のHTMLテンプレートの基本構造についてご説明します。

HTMLテンプレートの基本構造

Bootstrapを効果的に活用するためには、HTMLテンプレートの基本的な構造を理解することが重要です。

参考 HTMLの基本構造・書き方

以下に、Bootstrapを適用する際のHTMLテンプレートの基本構造を示します。

<!doctype html>
<html lang="en">
  <head>
    <!-- 必須のmetaタグ -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="path/to/bootstrap.min.css" rel="stylesheet">

    <title>ページタイトル</title>
  </head>
  <body>
    <!-- ここにコンテンツを記述 -->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="path/to/bootstrap.min.js"></script>
  </body>
</html>

このテンプレートのBootstrapに特化して注意すべきポイントは以下の通りです。

  • <head>タグ ページに関するメタ情報やCSSへのリンク、スクリプトなどを含む部分。この中にBootstrapのCSSをリンクします。
  • <body>タグ ページの主要なコンテンツを含む部分。この中の<body>タグの終了タグの前にBootstrapのJavaScriptファイルと、依存するJavaScriptライブラリ(jQueryとPopper.js)をリンクします。

上記のテンプレート構造を理解し、自身のプロジェクトに適用できるようにしましょう。

これがBootstrapを用いたWeb開発の第一歩となります。

Bootstrap 導入のまとめ

本記事では、Bootstrapの導入方法とHTMLテンプレートの基本構造について解説しました。重要なポイントを以下にまとめます。

  • Bootstrapの導入には、ダウンロード方式CDN方式の2つが存在する。
  • ダウンロード方式は、オフラインでの開発が可能で、バージョンを自由に選べるものの、ファイルサイズが増えるデメリットがある。
  • CDN方式は、導入が手軽で常に最新のバージョンを使用できるが、インターネット接続が必要であり、接続が不安定な場合には不適。
  • HTMLテンプレートの基本構造を理解することで、Bootstrapの活用がスムーズになる。
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  </body>
</html>

Webデザインを勉強するのって結構難しいですよね。

でもその悩みを抱えているのは一人じゃありません。全てのWebデザイナーが同じ道を進んできました。

HTMLやCSS・JavaScriptをはじめとするプログラミングスキルを武器に、時間と場所に捉われない自由な生き方を目指してみませんか?今すぐ行動したい方は以下の記事をチェック!

読者料典 【無料】ゼロから学ぶHTML/CSS/JavaScript入門 ←こちらから!

このWebサイトは現役のエンジニアが以下3点を目的として運営しています。

  1. 勉強:一度理解した内容を忘れないように。
    → アウトプットは「最強のインプット」である! 
  2. 備忘:忘れたとしても後から見返せるように。
    → 未来の自分への「お手紙」を書いています。 
  3. 共有:〇〇ってこうだったんだ!の感動をシェアできるように。
    → あなたの知識は誰かにとっての「価値ある情報」です。 

副業ブログの始め方はこちらから

スポンサーリンク
CSSHTMLJavaScriptWEBデザイン
シェアする
ビズドットオンラインをフォローする
blank
ビズドットオンライン
タイトルとURLをコピーしました