1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. Bootstrap
  6. »
  7. Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。

Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。

今回は Bootstrap 4 の使い方です。It_is_Rです。
では詳しくみていきましょう。

目次
  1. Bootstrap とは
  2. ダウンロード無しで Bootstrap 4 を使う
  3. Bootstrap をダウンロードして使う場合

Bootstrap とは

Bootstrap は Webサイトを制作するときに使う、CSSフレームワークです。
例えば、レイアウトを整えたり、ボタンを作ったりということが、あらかじめ用意されたクラスを割り振っていくことで、簡単にできてしまいます。

 Bootstrap 4 では、 Bootstrap と jQuery 、そして Popper.js というライブラリを読み込む必要があります。
今回はそれらのインストール方法を、かなり詳しく解説していきます。

ダウンロード無しで Bootstrap 4 を使う

Bootstrap はダウンロードすることなく始めることができます。
まずは以下の link タグを、<head></head>の間に入力します。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

次に以下のコードを、</body>の直前に入力します。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

HTML 全体で、以下のようになります。

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

    <!-- ここから -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <!-- ここまでを入力 -->
  </head>
  <body>
    <h1>Bootstrapの使い方。</h1>

    <!-- ここから -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
    <!-- ここまでを入力 -->
  </body>
</html>

上のサンプルでは、 jquery の slim を使っていますが、フルバージョンもサポートしているとのこと。

Bootstrap をダウンロードして使う場合

では、ダウンロードして使う方法を解説します。
ダウンロードの場合は少々手間がかかります。本当ならば直接urlを指定する、上記の方法で行うのをおすすめしますが、ソースをダウンロードして設定する方法も紹介しておきます。

Bootstrap のダウンロード

今回は公式サイトからダウンロードする方法と、パッケージマネージャーを使ってダウンロードする方法を紹介します。

サイトからダウンロードする方法

Bootstrap をダウンロードしていきます。
ダウンロード方法はいくつかあります。まずは、サイトからダウンロードする方法です。
Bootstrap
Bootstrap

上のリンクから Bootstrap のページへ飛び、「 Download 」をクリックします。
Bootstrap

さらに「 Download 」をクリックすると、実際にダウンロードが開始されます。
Bootstrap

npm を使ってインストールする方法

npm を使う場合は、 Node.js が必要になります。
下の記事の「 Homebrewのインストール 」と、「 Node.jsをインストール 」を参考にしてください。
gulpでsassをcssにコンパイル。インストール&便利な使い方。

フォルダを作成し、ターミナルの cd コマンドで、作成したフォルダへ移動します。
その後、npm initで package.json ファイルを作ります。

では、インストールしていきましょう。
以下のコマンドを実行してください。

$ npm install bootstrap@4.0.0-beta

Yarn を使ってインストールする方法

Yarn の詳しい使い方については「Yarn の使い方。インストールの方法から使い方まで解説します。」を参考にしてください。

ここではさわりだけ解説します。
yarn initで package.json ファイルを作ります。

インストールは以下のコマンドです。

$ yarn add bootstrap@4.0.0-beta

これで先ほど作ったフォルダの中に node_modules フォルダが作成され、そのなかに bootstrap フォルダが作成されていれば成功です。

jQuery のダウンロード

同様に、公式サイトからダウンロードする方法と、パッケージマネージャーを使う方法を紹介します。

jQuery をサイトからダウンロード

jQuery もダウンロードしましょう。
jQuery
jQuery

Download jQuery をクリックすると、次の画面が表示されるので、使用したいタイプの jQuery を選び、クリックでダウンロードされます。
jquery

jQuery を npm でインストール

package.json ファイルがあるフォルダで、以下のコマンドを実行してください。

$ npm install jquery

これで、 node_modules フォルダの中に jquery フォルダが作成され、その中に様々なファイルが生成されました。

jQuery を Yarn でインストール

package.json ファイルがあるフォルダで、以下のコマンドを実行してください。

$ yarn add jquery

これで、 node_modules フォルダの中に jquery フォルダが作成され、その中に様々なファイルが生成されました。

Popper.js のダウンロード

Popper.js に関しては、パッケージマネージャーを使ってダウンロードします。

Popper.js
Popper.js

Popper.js を npm でインストール

package.json ファイルがあるフォルダで、以下のコマンドを実行してください。

$ npm install popper.js

node_modules フォルダの中に popper.js フォルダが作成されます。

Popper.js を Yarn でインストール

package.json ファイルがあるフォルダで、以下のコマンドを実行してください。

$ yarn add popper.js

node_modules フォルダの中に popper.js フォルダが作成されます。

index.html から読み込む

では、index.html から jQuery と Popper.js を読み込みます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <!-- ここから -->
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
    <!-- ここまでを入力 -->
  </head>
  <body>
    <h1>Bootstrapの使い方。</h1>
 
    <!-- ここから -->
    <script src="./node_modules/jquery/dist/jquery.slim.min.js"></script>
    <script src="./node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- ここまでを入力 -->
  </body>
</html>

作成したHTMLファイルをブラウザで開いてみて、次ように表示されていれば準備完了です。
隙間が空いていたり、ブラウザのコンソールにエラーが出ていたら、見直しましょう。

この企画の一覧はこちら

  1. Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。
  2. 【 Bootstrap 4 】全体的な機能の解説と、Alert の使い方。
  3. 【Bootstrap 4】badgeを使ってテキスト横に小さな文字を入れる方法
  4. 【Bootstrap 4】パンくずリスト(Breadcrumb)を作ってみよう!
  5. Bootstrap 4によるボタンの作り方。色やサイズなどの指定方法!
  6. 【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法
  7. 【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方
  8. 【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法!

スポンサードリンク

関連コンテンツ

オススメ記事

Scratchでピアノを 作ってみよう!

Scratchでピアノ鍵盤を作って音を鳴らそう! 小学生からのプログラミング入門

今回も、小学生からのScratch《スクラッチ》入門、はじめていきます。 前回、「Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門」では、Scratchを使ってシ

おみくじゲームを作るべ!

JavaScriptでおみくじを作ろう! 小学生からのプログラミング入門

さて、今日も楽しく、プログラミングを学んでいきましょう!今回はなんと、プログラミングでおみくじゲームを作ってみます。 そして今回から、Scratch(スクラッチ)より、少しレベルアップして、J

小学生からのプログラミング入門。プログラミングってなぁに?

小学校でプログラミングを勉強しなくてはいけないことになり、「プログラミングなんてやったことないし、そもそもプログラミングってなんなんだろう」と思う方も多いのではないでしょうか。 といっても、「

fish shell

Fish shellの使い方。プラグインなしでもここまで可愛くできる!

先日、Macをフォーマットしたため、今まで構築したきた開発環境が消えました。 といっても、バックアップはとってあるので戻すことはできるのですが、せっかく綺麗に全部消えたので、もう一度作り直そうかな、

Gitの使い方。バージョン管理する流れを、実際にやってみよう

こんにちは。@It_is_Rです。 前回「【Mac】Gitのダウンロードとインストールの手順」では、Gitのインストーラを公式サイトからダウンロードしてインストールする方法と、Homebrew

【Android Studio】TextView 文字の色やサイズ、書体を変更する方法。

サイズは大きいほど、押しがいがあります。@It_is_Rです。 スマホのボタンの話ですよ。何を考えてたんですか? Androidアプリ開発、8回目となりました。 今回はこれまでに学習した T

zplug を使ってプラグインをインストール、管理する。

二つのことを同時にできない、@It_is_Rです。 今回はターミナルをかっこよくするシリーズ、第三回目です。 zplug を使って、プラグインをインストールする方法を紹介します。

マップ上をキャラが移動できるようにしよう!

【JavaScript】マップでキャラを動かせるようにしよう! 小学生からのプログラミング入門

小学生からのプログラミング講座《こうざ》、今回もはじめていきましょう! 前回は、JavaScriptでのマップの作り方を紹介《しょうかい》しました。しかし、まだマップを配置《はいち》しただけで

【Gulp4】gulpfile.jsを複数ファイルに分割して、作業効率を上げよう!

Gulpを使って開発を進めているいると、だんだんとgulpfile.jsが複雑になり、どこになにが書いてあったか分からなくなることがあります。そんなときは、gulpfile.jsを分割して管理すると

とってもかんたん!iPhoneアプリ開発

SwiftUIでじゃんけんゲームを作ろう。かんたんiPhoneアプリ開発入門

SwiftUIは、2019年にアップルが発表したフレームワークです。 SwiftUIを使って、iPhoneで遊べるじゃんけんゲームを作成してみましょう。 この入門ではXcodeを使いますので、

2件のコメント “Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。

  1. Rails 5で開発を進めております。
    ドロップダウンがなかなか表示されず、四苦八苦しておりました。
    しかし主様の記事で無事解決しました。

    原因は直前でcdnを読み込んでいなかったことと、読み込む順番でした。
    本当にありがとうございました。

    1. >名無しの新九郎さん
      コメントありがとうございます。
      無事解決できたとのこと、私も嬉しく思います。
      開発、お互い頑張っていきましょう。
      ありがとうございます。

コメントをどうぞ!(コメントは承認後に反映されます)

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