フレームワーク（Bootstrap）

はじめに

今回は Bootstrap というフレームワークをダウンロードしていきます。

フレームワークとは？

フレームワークとは、自分で複雑なコードを書かなくても簡単にウェブサイトの見た目を整えて、動きを付けることができるものです。

例えばウェブサイトを作る場合、HTML で構造を作って、CSS でレイアウトを整えて、JavaScript で動きを付けて、、、と進めていきます。

さらにタブレット・スマホ用のレイアウトも整えて、画像のスライドショーも付けたくなるかもしれません。

これらを全て自分で行うとなると時間もかかりますし、何より面倒ですよね。

こんな時に便利なのがフレームワークです。

フレームワークはウェブサイトの骨組みを作ってくれるものです。

用意されている HTML をコピー&ペーストするだけで、入力フォームのデザインを整えたり、スマホに対応したレイアウトにしてくれます。

今回のカレンダープロジェクトでは、特に人気が高くて私も仕事で何度も使ったことがある Bootstrap（ブートストラップ）というフレームワークの使い方を紹介します。

Bootstrap を使うと、キレイなデザインのボタンや表、スマホ用レイアウトを簡単に取り入れることができます。

フレームワークの使い方

フレームワークを使うには、フレームワークのファイルを自分のプロジェクトで読み込む必要がありますが

ダウンロードする方法
CDN を使う方法

の２通りがあります。

1. ダウンロードする方法

必要なファイルを全てダウンロードして、自分のプロジェクトフォルダに置いて使います。

インターネットに接続できなくても使うことができます。

2. CDN を使う方法

CDN は「コンテンツ・デリバリー・ネットワーク」といってインターネット経由で必要なファイルを読み込む方法です。

簡単に利用できて自分のウェブサーバーの負担を軽減できることがメリットですが、オフラインでは使うことができません。

どちらを使うか

どちらを使ってもよいですが、CDN はバージョンが変わる可能性があるので、今回は同じ環境で開発できるようにダウンロードする方法で進めていきます。CDN を使う方法も後ほど紹介します。

Bootstrap のダウンロード

Boostrap の公式サイトにアクセスします。

英語：https://getbootstrap.com/
日本語：https://getbootstrap.jp/

英語・日本語のどちらのサイトを使っても良いですが、ここでは2021年3月現在でより新しいバージョン（v5.0.0-beta2）が公開されている英語版を使います。

https://getbootstrap.com/ を開いて「Download」を押します。

Compiled CSS and JS の下にある「Download」を押します。

ダウンロードした zip ファイルを開いて css フォルダにある bootstrap.min.css を my_calendar フォルダの css フォルダに置いて下さい。

js フォルダにある bootstrap.min.js を my_calendar フォルダの js フォルダに置いて下さい。

.min.css / .min.js について

このあとダウンロードしていくファイルには

bootstrap.css
bootstrap.min.css
bootstrap.js
bootstrap.min.js

のように「min が付いているもの」「付いていないもの」の２種類が用意されています。

min は minified（縮小された）という意味で、改行やスペースなどが削除されているコードです。

ファイルサイズが小さくなるので、そのぶん速くファイルを読み込むことができます。

ウェブページは表示速度が１秒変わるだけでアクセス数に大きく影響が出てしまいます。

少しでも速く表示できるように min が付いているファイルを使うことをお勧めします。

次に行うこと

次回は Bootstrap と相性が良い Bootstrap Datetimepicker プラグインを用意しましょう。

完了して次のステップへ

PHP・MySQLでつくるカレンダー開発講座