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

公開 : → 更新 :

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

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 [email protected]

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

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

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

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

$ yarn add [email protected]

これで先ほど作ったフォルダの中に 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 の使い方。

スポンサードリンク

関連コンテンツ

コメントをどうぞ!

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




オススメ記事

enchant.js

ゲームに背景画像を表示する方法!( enchant.js )

こんばんわ、@It_is_Rです。 ゴールデンウィークいかがお過ごしでしょうか。 今回は、 enchant.js を使った横スクロールアクションゲームの背景を表示してみようと思います。 空と

【CSS設計】ボタンを作って覚える。機能ごとに分けて作る重要性。

手が回らない、頭が回らない、口が回らない。@It_is_Rです。 CSSはある程度大雑把に書いても動かすことができます。しかし、CSSを覚える上で一番難しい部分と言えばCSS設計でしょう。 パ

KSSでスタイルガイドを作る方法。インストールと使い方。

そのうちWordPressのテーマを作る方法の解説とかしたいなーと思っている@It_is_Rです。 いま準備中ですので、もうちょっとお待ちくださいねー。 そして今回ですが、KSSを使ったスタイ

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

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

WordPress のテーマ開発に絶対必須な gulp プラグイン9選!

3Dゲームに酔ってしまう@It_is_Rです。 WordPress テーマ自作シリーズ、第2回目です。 今回は、テーマを自作するのに必須な gulp プラグインの紹介と使い方について書いていき

カスタムロゴの使い方。 WordPress サイトのタイトルを画像に変更!

笑いたい時に笑えず、笑っちゃいけない時に笑えてくる@It_is_Rです。 WordPress テーマ自作シリーズ第9回目となります。 今回はカスタムロゴの使い方を紹介したいと思います。

Swift

【Xcode7】Swift2でMacアプリ開発。画像を読み込む為のボタンを作る。

犬も歩けば棒にあたる。だからRは歩かない。@It_is_Rです。 最近はSwiftの記事が多いと思っている人もいるのでは無いでしょうか。実はRは現在、Swiftを使ってゲーム開発のお助けアプリを

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

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

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

インスタント焼きそばを作ろうとすると、なぜか焼うどんになります。 @It_is_R です。 しかも、ラーメン作ろうと思うと焼きそばができあがります。 前回、 Android Studio のイ

wordpress

WordPress – デフォルトで用意されたショートコード一覧と使い方。

昔は WordPress の画面が真っ白になって、頭も真っ白になったこともありました。@It_is_Rです。 WordPress では、プラグインを使ったりしない限り、投稿記事のなかで php