Bootstrap

Bootstrap4の使い方・必要なファイルのインストール方法

 

ここでは Bootstrap 4 を使うための

  • 必要なファイルのインストール方法
  • 基本的な使い方
  • Bootstrap と相性の良いアイコンサービス

を紹介しています。

 


 

必要なファイルのインストール方法

Bootstrap を利用するのに必要なファイルは

  • bootstrap.min.css
  • jquery.min.js
  • popper.min.js
  • bootstrap.min.js

の4つです。

jQuery, Popper, JavaScript は必須ではありません。
Modal(モーダル)やTooltip(ツールチップ)など動きがある要素を使う場合に読み込みます。

ボタンやテキストの色だけに Bootstrap を使う場合は bootstrap.min.css のみ読み込めば利用できます。
 

これら4つのファイルを読み込む方法は

  1. CDN を利用する方法
  2. ファイルをダウンロードする方法

があります。
 

CDN の方が簡単に Bootstrap を使い始めることができるのでオススメですが、どちらでも問題ありません。

好きな方を選んでインストールしてみてください????
 

方法1:CDN を利用する(オススメ)

CDN はコンテンツデリバリネットワークといい、インターネット経由でファイルを読み込むことができます。

ファイルをダウンロードする必要がなく、必要なコードをコピー&ペーストするだけなので、簡単に Bootstrap を読み込むことができます。
 

Step1

「Bootstrap」を検索、または https://getbootstrap.com/ にアクセスします。
 

「Get Started」をクリックします。

 
 

Step2

CSS を <head>タグ内に、JavaScript を</body>タグの直前に貼り付けます。


 

 

以上で Bootstrap を使う準備は完了です。
 
 

方法2:ダウンロードする

次にファイルをダウンロードする方法を紹介します。
 

Step1

「Bootstrap」を検索、または https://getbootstrap.com/ にアクセスします。

「Download」をクリックします。

 
 

Step2

「Compiled CSS and JS」という見出しの下に「Download」ボタンがあるのでクリックします。

クリックするとダウンロードが開始されます。


 

ダウンロードできたらファイルを開いてください。

css フォルダ内の bootstrap.min.css、 js フォルダ内の bootstrap.min.js を使います。

 
 

Step3

先ほどダウンロードしたファイルには jQuery と Popper.js は含まれていないので、別にダウンロードする必要があります。

* Bootstrap だけダウンロードして、jQuery と Popper.js は CDN を利用することもできます。
 
 

jQuery をダウンロードする

https://jquery.com/download/ を開いて、
「Download the compressed, production jQuery 3.3.0 slim build」の上で右クリックして保存します。

 
 

Popper.js をダウンロードする

https://github.com/FezVrasta/popper.js#installation を開いて、
「https://unpkg.com/popper.js/dist/umd/popper.min.js」の上で右クリックして保存します。

 
 

Step4

ダウンロードした4つのファイルをフォルダにまとめます。

ここでは css フォルダと js フォルダを作成して、index.html で Bootstrap を読み込む例を紹介します。

 
 

Step5

index.html を開き、以下のようにファイルを読み込みます。

 

以上で Bootstrap を使う準備は完了です。

 
 

Bootstrap の使い方

Bootstrap の使い方は簡単で、サンプルコードをコピー&ペーストするだけです。
 

例えばボタンを使いたい場合には、 https://getbootstrap.com/docs/4.3/components/buttons/ を開いて、コードをコピー&ペーストします。


 
 

Bootstrap の推奨アイコン

Bootstrap 3 では独自のアイコンが用意されていましたが、Bootstrap 4 ではアイコンが含まれていません。

Bootstrap 公式サイトでは、アイコンの利用に

を推奨しています。

これら3つは Bootstrap 側でテスト済みとなっているため安心して使うことができます。
 

他にも Google Material icons・Glyph などのアイコンサービスも紹介されていますが、これらはテスト済みとなっていないようです。

そのほかのアイコンはこちら:https://getbootstrap.com/docs/4.3/extend/icons/
 

アイコンを利用したい場合は、Bootstrap 側でテスト済みとなっている Font Awesome・Iconic・Octicons から選ぶのが良いでしょう。
 

どれを使えば良いか?

アイコンの種類の多さ、利用方法の簡単さを考えると Font Awesome がオススメです。

Font Awesome の場合はファイルをダウンロードする必要がなく、すぐにアイコンを利用することができます。
 

Font Awesome の利用方法は以下の記事をお読みください。

【2019年12月更新】Font Awesome の使い方 Font Awesomeとは、簡単にアイコンを利用できるサービスです。 自分のウェブサイトに少しだけアイコンを使いたい...

 
 

ABOUT ME
Sara
Sara
「わかりやすく・シンプル」をモットーに、携帯アプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂
独学は難しそうと感じたら

 
独学でプログラミングを勉強するのは難しそう、効率的にプログラミングを学びたいという方はオンラインスクールがオススメです。

オンラインスクールを選ぶときのポイント

  • 無料体験があること
  • 個別サポートがあること

自分にあったスタイルを見つけるために、無料体験のご利用をオススメします。(無料体験後に自分には合わないなと感じたらハッキリ断ってしまって問題ありません。)
 
個別サポートもプログラミング学習に挫折しないために重要なポイントです。エラーや困った時にすぐに個別対応をしてくれるスクールを利用して下さい。

ここでは3つのオンラインスクールを紹介します。
全て無料体験がありますので、ぜひ自分に合ったスクールを見つけてみて下さい????
 

1. TechAcademy(テックアカデミー)

オンライン完結で勉強できるスクールで、コースがとても充実しています。チャットで質問すればすぐに回答を得られるのが一番のおすすめポイントです。
オリジナルのサービスやアプリの開発もサポートしてくれるので、開発したいものが決まっている人にもオススメです。

無料体験はこちら

2. CodeCamp(コードキャンプ)

一対一で受講できる個別指導のプログラミングスクールです。
Webデザイン・Webサービス開発・アプリ開発などを幅広く学習することができます。
マンツーマンなので自分のペースで学習できて、質問もその都度できるのがメリットです。

無料体験レッスンはこちら

3. Treehouse

英語でも良い、英語とプログラミングを同時に勉強したいという方は Treehouse がオススメです。月25ドルで始めることができて、たくさんのプログラミング言語を学ぶことができます。
個別サポートはありませんが、掲示板が充実しています。ほとんどの場合、質問してから30分程度で回答を得ることができます。

7日間の無料体験はこちら

COMMENT

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

CAPTCHA