目次

• はじめに
• フレームワークとは？
• フレームワークの使い方
• Bootstrap のダウンロード
• 次に行うこと

はじめに

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

フレームワークとは？

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

例えばウェブサイトを作るには「HTML で構造を作って、CSS で見た目を整えて、JavaScript で動きを付けて、、、」と進めていきます。

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

これらのコードを全て自分で書くとなると時間もかかりますし、何より面倒ですよね。

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

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

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

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

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

フレームワークの使い方

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

読み込む方法は

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

の２通りがあります。

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

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

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

2. CDN を使う方法

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

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

どちらを使うか

どちらの方法でも良いですが、まずはダウンロードする方法で進めていきます。CDN を使う方法も後ほど紹介します。

Bootstrap のダウンロード

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

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

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

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 Datetimepicker プラグインを用意します。