【Bootstrapの導入】Bootstrapをダウンロードしてから使うまで

「Bootstrap」とは、Webアプリケーションの画面デザインを作成するWebフレームワークです。
多くのテンプレートがあり、それを利用して画面を作成することができます。また、多彩な機能があり非常に使いやすいフレームワークです。
ここでは、Bootstrapをダウンロードしてから使うまでの手順を確認します。

システム
エンジニア

Bootstrapを使うと画面デザインが容易に作成できるのですね。ダウンロードしてから使うまでの手順を教えてください。

プロジェクト
リーダー

Bootstrapは多くの機能があり、使いやすいWebフレームワークです。ダウンロードしてから使うまでの手順を一緒に確認しましょう。

Bootstrapをダウンロードしてから使うまで

まずは、Bootstrap公式ページからダウンロードします。

「Download」リンクをクリックします。
すると、ダウンロードページが開くので、「Compiled CSS and JS」という部分の「Download」リンクをクリックします。

上記ページにはバージョンの記載がありますが、本記事を執筆している2019年8月時点では、バージョン4.3.1が最新版です。

zipファイルがダウンロードできるので、解凍します。
バージョン4.3.1の場合、「bootstrap-4.3.1-dist」というフォルダが解凍できます。

同じフォルダにhtmlファイルを作成し、以下のコードを記載します。

headタグにcssのパスを記載します。
先ほど解凍したフォルダの中に、bootstrap.min.cssが入っているので、以下のように記載します。

カレントフォルダにあるフォルダから、ファイルを読み込むという記載です。
この1文を記載するだけで使うことができます。
ダウンロードしてから使うまでの手順は以上で完了です。

そして、実際の画面デザイン部分ですが、上記のコードでは、以下のようにボタンを表示させるコードを記載しています。

Bootstrapで用意されているclassを指定しています。

実際の画面表示は以下のようになります。

このように、綺麗なデザインのボタンも簡単に作成することができます。
ボタンの色などを変えたい場合も、たくさん用意されているclassの中から好みのデザインを選んで使用することで、簡単に変更することができます。

BootstrapをCDNで利用する方法

BootstrapはCDNで利用することもできます。
先ほどダウンロードした時と同じく、Bootstrap公式ページを開きます。

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

すると、ダウンロードページが開くので、「BootstrapCDN」という部分に記載されているコードをコピーします。
右上にコピーボタンが表示されているので、クリックします。

コピーしたコードを使用して、以下のようにコードを実装します。

先ほどとは違い、headタグに記載するbootstrap.min.cssのパスはCDNで用意されているパスを指定します。
CDNで利用する場合も、これで利用する準備は完了です。
ファイルをダウンロードして配置する手間が無いため、CDNを利用したほうが簡単です。

CDNを利用することでアクセスが多いWebアプリケーションでも、アクセスの負荷を下げることができます。CDNの利用はWebアプリケーション構築の中で最善の方法といえるでしょう。

実際に使う時の実装は、ダウンロードした場合と同様です。上記のコードではボタンが以下のように表示されます。

システム
エンジニア

ダウンロードして使う方法、そしてCDNを利用する方法がよく分かりました！

プロジェクト
リーダー

使い始めるまでの手順が簡単ですね。Bootstrapを使うことで綺麗な画面デザインが作成できるので利用していきましょう。

BootstrapのダウンロードとCDNを利用することは簡単にできる

Bootstrapをダウンロードして使う方法、CDNを利用して使う方法を確認しました。
ダウンロードとCDN、どちらも導入の手順は簡単です。
Bootstrapを使うことで綺麗な画面デザインが作成できるので、Bootstrapを利用してみてはいかがでしょうか。