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、カルーセル機能のを実装方法!

スポンサードリンク

関連コンテンツ

オススメ記事

Docker Composeで自分のWordPressサイトをローカル開発環境に反映!

ローカルにWordPress開発環境を整えてテーマを作成することがあるのですが、単にローカルに環境を作っただけでは記事がなく、テーマのイメージが分かりません。@It_is_Rです。 かといって、te

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ヘッダーをカスタマイズ。

寒くなってきましたね。皆さま前かがみになって、まるで亀の様です。@It_is_Rです。 皆様がブログを見て、一番最初に目に入ってくるのはどこでしょうか? 殆どの場合、ヘッダー部分ですよね。つま

【 WordPress 】functions.php で色んな機能を使ってみよう!【基本】

馬鹿は風邪を引かないといいますが、どうやら引いたようです。@It_is_Rです。 ちなみに、「馬鹿は風邪を引かない」ということわざは、「馬鹿は風邪を引いても気がつかない」という例えだって知ってました

WordMove | 運用中の WordPress 環境をローカルと FTP で同期

道が覚えられない、@It_is_Rです。 人生さえ彷徨い続けてここにいます。 さて、運用中の WordPress サイトの環境を、ローカル開発環境と同期したい時、 WordMove を使うとと

【Android Studio】アプリ開発の基本とそれぞれのファイルの役割を覚える。

iPhone持ってないみなさん、一緒にAndroidアプリ開発しましょう。@It_is_Rです。 Androidアプリ開発、5回目となりました。 今回は Android Studio でアプリ

【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方

Bootstrap4の使い方、第7回目です。 トップページなどを見ると、記事の一部が抜粋された記事一覧が表示されているサイトをよく見かけます。 今回はそんな記事一覧ページを作るのに便利な「カー

【Gitの使い方 – その3】Gitで実際にバージョン管理してみよう!

お魚くわえた@It_is_Rです。 Gitの使い方第3回目の今回は、実際にGitを使ってバージョン管理をしてみようと思います。 [serif name="It is R"]りこ師匠

wordpress

WordPress管理画面のテーマカスタマイザーに独自の項目を追加。

WordPressみたいに私自身の人生もカスタムできたらいいのに。@It_is_Rです。 WordPressのカスタマイズは、公開しているサイトだけではありません。 管理画面をカスタマイズする

WordPress | ツイート数やシェア数付きのSNSシェアボタンを自作しよう!

最近SNSシェアボタンを作り直した@It_is_Rです。 せっかく作ったんだから、シェアするのだよ、みんな。 そこで今回は、Twitter や Facebook、GooglePlus、はてな

WordPress テーマ自作 | Pug ( Jade ) で記事一覧ページを作る方法!

愛と勇気だけが友達の@It_is_Rです。 今回はPugでWordPressテーマを作る方法を少し紹介します。 詳しいテーマの作り方はこちらをご覧ください。 WordPressのテーマを自作

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

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

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

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

コメントをどうぞ!

メールアドレスが公開されることはありません。