1.
Bootstrapとは
Bootstrapとは
Bootstrapは、PCやスマホで同時にレイアウトできるレスポンシブデザインに対応した CSSフレームワークの１つです。
CSSを省略してデザインできる
CSSフレームワークを利用すると、CSSを作成しなくてもレイアウト、文字、ボタンなど、ある程度デザインできます。
レスポンシブ対応
PCやスマホ、タブレットによって画面幅が違いますが、CSSフレームワークを利用すると複数端末に対応したレイアウトを作成できます。Bootstrap ではグリッドレイアウトに対応しており、ブラウザの横幅を基準に自動的にレイアウトしてくれます。
Bootstrapのインストール方法
Bootstrapを利用するにはいくつかの方法があります。
- Bootstrapをダウンロードして HTMLから読み込む
- CDNで HTMLから読み込む
- npmなどのパッケージでインストール
CDNインストール
CDN（コンテンツデリバリーネットワーク）はURLを指定するだけでインストールできるので、導入が簡単です。BootstrapのCDNは公式ページ「はじめに（5.0 の）」ページにアクセスすると、リンクがコピーできます。
コピーしたリンクを、HTMLヘッダーにペーストします。integrity と crossorigin は省略しても構いません。
<head>
...
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
...
</head>
CDNはインターネット接続が必要
CDNはキャッシュサーバに配置したBootstrapを読み込むので、インターネット接続が必要です。つまりインターネットに接続できないと利用できないのがデメリットです。
ダウンロードインストール
ダウンロードでインストール方法は、Bootstrap公式サイトのダウンロードページからダウンロードできます。CSS やJavaScriptの構成です。
bootstrap/
├── css/
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ └── bootstrap.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.js
├── bootstrap.js.map
├── bootstrap.min.js
└── bootstrap.min.js.map
必要に応じてファイルを読み込みますが、最初は「bootstrap.min.css」を読み込めば最低限の機能は利用できます。
パッケージインストール
パッケージインストールは、Node.jsによる「npm」コマンドの知識が必要になります。
パッケージのインストール例
% npm install bootstrap