フレームワーク(Bootstrap)

はじめに

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

 

 

フレームワークとは?

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

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

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

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

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

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

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

 

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

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

image1

 

 

フレームワークの使い方

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

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

の2通りがあります。

 

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

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

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

 

2. CDN を使う方法

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

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

 

どちらを使うか

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

 

 

Bootstrap のダウンロード

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

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

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

image2

 

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

image3

 

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

image4

 

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

image5

 

 

 

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

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

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

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

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

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

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

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

 

 

次に行うこと

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

 

コメント

0 コメント