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

スポンサードリンク

関連コンテンツ

オススメ記事

wordpress

【WordPress】パンくずリストをプラグイン無しで自作する方法

※追記(2018/2/12) もっと高機能になるように、改良修正しました。 人生で3回ほど死にそうになったことがある@It_is_Rです。 WordPressのパンくずリストを作

【Android Studio】エミュレータを起動してプログラムを実行する方法!

何をやっても長続きしない@It_is_Rです。 このままでは人生さえも長続きしないかも知れない。 さて、しばらくぶりになってしまいましたが、今回は Android Studio 2.3.2 を

WordPressのテーマを自作してみよう。テーマ開発の方法を徹底解説!

WordPressテーマの自作方法を紹介していきます。 今回はテーマ作成における知識や、ツール、ファイル構成、実際の作り方などを書いていきます。 WordPressのテーマを自作する上

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

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

【Android Studio】 GridLayout の使い方。複雑なレイアウトを表現する方法

スマホの充電がいつの間にか無くなっている@It_is_Rです。 Androidアプリ開発、10回目となりました。 前回、様々なレイアウトの使い方を紹介しましたが、今回はその中でもちょっと難しい

WordPress|ショートコードの作り方&使い方。確実に使いこなす為のガイド。

前回、WordPressで、特定のカテゴリ一覧を表示する方法について書きました。 改めまして、@It_is_Rです。 特定のカテゴリ一覧を表示したとき、ショートコードというものを使いましたが、

【enchant.js入門】ガンシューティングゲームの作り方を完全解説!

enchant.jsを使ってガンシューティングゲームの開発を行なっていきます。 enchant.jsはゲームを作るのに特化したJavaScriptフレームワークです。 これを使うことで、Jav

Android Studio

【Android Studio】新規プロジェクトを作成する方法

前回、 Android Studio のインストールが完了しました。 その続きから始めていきましょう。 今回は新規プロジェクトを作成する方法です。 新規プロジェクトの作成 それ

これまでのプログラム全体をクラスを使って作るべ!

【JavaScript】プログラム全体をクラスを使って作ってみよう! 小学生からのプログラミング入門

小学生からのプログラミング講座《こうざ》、第13弾です。 前回はプログラミングにおける、クラスの使い方を学びました。しかし、まだクラスをどうやって使えばいいのか、ピンときていないかもしれません

HTML CSS

CSSでの円の作り方と、その上下左右中央に文字を表示する方法

サイトを作る時、円形のパーツを作りたい時ってよくありますよね。 円はCSSで簡単に作ることができます。 さらに今回はCSSで作成した円の中央に文字を置く方法も紹介します。 CSSでの

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

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

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

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

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

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