フレームワーク(Bootstrap)

はじめに

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

 

フレームワークとは?

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

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

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

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

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

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

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

 

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

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

image1

 

フレームワークの使い方

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

読み込む方法は

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

の2通りがあります。

 

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

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

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

 

2. CDN を使う方法

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

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

 

どちらを使うか

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

 

Bootstrap のダウンロード

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

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

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

 

 

完了して次のステップへ  
コメント

0 コメント