CSS

Bootstrapの使い方【CDN・ローカルファイル・図解付き】

どうも、つよぽんです!

今回はBootstrapを利用できる状態にするまでの方法を解説します。

今回の記事は次のような方に向けて書きました。

想定読者
  • Bootstrapを使えるようにするためにはどうしたらよいの?
  • CDNって何?

今回の記事は以下の学習コンテンツ記事内のスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
Bootstrapを使う方法今回はBootstrapを使えるようにするまでの方法を解説します。Bootstrapを使えるようにするためには、ローカルにファイルをダウンロードして使うやり方と、CDNというものを使ってBootstrapを使う方法があります。...

それでは次の内容で話を進めていきます。

今回の内容
  1. Bootstrapを読み込む2つの方法
  2. Bootstrapがうまく読み込めているか確かめる

 

Bootstrapを読み込む2つの方法

Bootstrapを利用できるよう状態にするには次の2通りのうちいずれかのやり方でファイルを読み込む必要があります。

2通りの読み込み方
  1. Bootstrapファイルをローカルにダウンロードして使う
  2. BootstrapファイルをCDN経由で読み込んで使う

上記のいずれの場合も、「BootstrapのDownloadページ」に詳しいやり方が書かれています。

この章ではドキュメントに書かれている内容を画像を使いながらどのように設定していくか順を追って解説していきます。

Bootstrapの使い方(ローカルファイル編)

BootstrapのDownloadページ」に移動している前提で話を進めていきます。

1. Bootstrapファイルをダウンロードする

ローカルにBootstrapファイルをダウンロードして使う、つまりパソコンにBootstrapファイルをダウンロードして使う場合は、まず以下の画像内の矢印が指し示しているボタンをクリックしてZIPファイルをダウンロードします。

DownloadボタンをクリックしてBootstrapのzipファイルをダウンロードするDownloadボタンをクリックしてBootstrapのzipファイルをダウンロードする

Zipファイルのダウンロードが完了したら、Zipファイルを解凍してください。

2. bootstrap.min.cssを使う

ダウンロードしたZipファイルを展開するとCSSファイルが何個か用意されているのが確認できます。

複数あるCSSの中でも「bootstrap.min.css」という名前のファイルを使います。

bootstrap.min.cssを使うbootstrap.min.cssを使う

3. bootstrap.min.jsを使う

Bootstrapでは一部JavaScriptの機能を使い、CSSと同じように複数のJavaScriptファイルが含まれています。今回は複数あるJavaScriptファイルのうち「bootstrap.min.js」を使います。

bootstrap.min.jsを使うbootstrap.min.jsを使う

4. JQueryをダウンロードする

BootstrapのJavaScriptは「JQuery」というJavaScriptのライブラリーの1つに依存しています。

そのため、JQueryもダウンロードする必要があるので「JQueryのダウンロードサイト」に移動押して、以下の画像の指示に従ってJQueryファイルをダウンロードしてください。

JQueryファイルをダウンロードするJQueryファイルをダウンロードする

JavaScriptの「ライブラリー」という言葉が出てきましたが、ここではJavaScriptの便利な機能をあつめたツールだと認識していただければ問題ありません。

5. ダウンロードしたファイルをHTMLで読み込む

以下の画像はこれまでダウンロードした「Bootstrap」「JQuery」の他に「index.html」が含まれているものです。

BootstrapのCSSを読み込むときは今まで学習してきたように、headタグ内でlink要素を使ってCSSファイルを読み込むことが出来ます。

JavaScriptファイルを読み込むときはscript要素を使って、src属性の値にJavaScriptファイルを指定すれば読み込むことが出来ます。

また、ここでの注意点としてJavaScriptファイルを読み込む順番は次の順番で読み込む必要があります。

  1. JQuery
  2. BootstrapのJavaScriptファイル

理由は、先ほども述べたように、BootstrapのJavaScriptファイルはJQueryに依存しているため、先にJQueryの読み込みを完了しておく必要があるのです。

ファイルの読み込み順番の指定はカンタンで、上から順番に先に読み込むファイルを指定します。以下の画像だと9行目でJQueryを読み込みんで、10行目でBootstrapのJavaScriptを読み込んでいます。

ローカルにダウンロードしたBootstrapとJQueryをHTML内で読み込んでいる様子ローカルにダウンロードしたBootstrapとJQueryをHTML内で読み込んでいる様子

Bootstrapの使い方(CDN編)

BootstrapのDownloadページ」に移動している前提で話を進めていきます。

また、「CDN」についてもカンタンに説明します。

CDNとは「Content Delivery Network(コンテンツデリバリーネットワーク)」の略で、インターネット上に置かれているファイルをそのまま利用することができる機能になります。

具体的にいうと、インターネット上のいろんなところに配置されているファイルから一番近くにあるファイルを使うなど、他にも意味はありますが、まずは「インターネット上のファイルをそのまま利用できるもの」と認識していただいて問題ないです。

CDNについて詳しく知りたい方は以下に参考となるリンクを貼っておくのでそちらを参照していただけたらと思います。

1. CDNのリンクをコピーする

BootstrapのDownloadページ」の下の方にスクロールすると、「BootstrapCDN」という項目が見つかります。

BootstrapCDNの中に「BootstrapのCSSとJavaScript」と「JQuery」のコードが記述されているので、それらのコードをコピーします。(以下の赤枠内をコピー)

赤枠内のコードをコピーする赤枠内のコードをコピーする

2. CDNのリンクをHTMLに貼り付ける

前の項目「1. CDNのリンクをコピーする」でコピーしたコードをHTML内に貼りつけます。

貼り付け方は、Bootstrapの使い方(ローカルファイル編の「5. ダウンロードしたファイルをHTMLで読み込む」で記述した箇所・順番と全く同じです。

CDNのリンクをHTMLに貼り付けるCDNのリンクをHTMLに貼り付ける

Bootstrapがうまく読み込めているか確かめる

ここまで行ってきたBootstrapJQueryが正しく読み込まれているか確認していきましょう。

以下の画像は僕の方で用意したサンプルコードである「Bootstrapの読み込みサンプル」を画像にしたものです。

Bootstrapの読み込みサンプル」に移動して、下の赤枠内のコードをコピーして、自身のコードに貼り付けて、画像左にある「青いボタン」「赤いボタン」が表示されれば、Bootstrapがうまく読み込めています。

正しく読み込めている確認するためのコードを記述正しく読み込めている確認するためのコードを記述

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  1. Bootstrapの読み込み方は「ローカルにダウンロードして使う方法」と「CDN経由でファイルを読み込んで使う方法」の2通りある
  2. BootstrapはJQueryに依存している部分もあるので、JQueryも読み込むようにする
  3. Bootstrapが正しく読み込めたか確認するためにBootstrapが提供しているボタンを使ってみた

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
Bootstrapを使う方法今回はBootstrapを使えるようにするまでの方法を解説します。Bootstrapを使えるようにするためには、ローカルにファイルをダウンロードして使うやり方と、CDNというものを使ってBootstrapを使う方法があります。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です