とにかくすぐにBootstrapを使いたい！5分で簡単導入

今回はWebデザインやレスポンス対応を簡単にする「Bootstrap」の
導入方法について5分でできる簡単な方法をご紹介します！

前書きはいいからとにかくBootstrap使わせろ！

Bootstrapの説明はいいからまずは手を動かしたい！
という方は以下のコードを自分のhtmlの＜head＞タブの中にコピーしてみてください。

今回は「CDN」という仕組みでBootstrapを使うため
ダウンロードやファイルの配置といっためんどうな作業は一切ありません！

※2020年4月現在の最新版CDN

コピーはできましたか？？
これで導入は完了です！！

コピーする場所がわからない。。
そもそもhtmlを作ってないよ！

って人は以下にサンプルを添付していますので、
ダウンロードして使ってみてくださいm(._.)m
index.html

導入の確認

では導入されたかどうか実際に確認してみましょう。

body部に以下のソースを追加してみてください。

※添付している「index.html」には
すでに記載されているので追加の必要はありません。

ボタンをひとつ追加するためのコードです。
保存ができたらさっそく確認です。

保存したhtmlファイルをブラウザで開いてみましょう。

青いボタンが表示されていればOKです！

最新版の導入

Bootstrapは定期的にアップデートされます。
そのため最新版を使いたいという方向けに
Bootstrapのサイトからの導入方法を紹介します。

手順は以下の３Stepです。

1. Bootstrapのサイトに移動
2. ダウンロードページへ移動
3. CDNコードをコピー

Bootstrapのサイトに移動

まずはBootstrapの公式サイトを開きましょう。

ダウンロードページへ移動

サイトを開くことができたらダウンロードページへ移動しましょう。
以下の「Download」ボタンを押下してください。

CDNコードをコピー

ダウンロードページに移動できたら
下に少しスクロールすると「BootstrapCDN」の項目があります。
ここに記載されているコードを自分のhtmlファイルの
＜head＞タグ内に記載することでBootstrapが使用できるようになります。

Bootstrapの練習

さて、Bootstrapを使う準備はできたと思いますが、
実際Bootstrapってなにができるの？？
という方のために普段使っているチートシートをご紹介します。

チートシートにはBootstrapで
用意されている部品(ボタンやナビバー等)が紹介されています。
Bootstrap 4 Cheat Sheet

使ってみたい部品をクリックすると
「コード」と「プレビュー」が表示されるので
「コピー」ボタンをクリックして自分のコードに追加してみましょう！！

使える部品はたくさんあるので、
いろんなパーツを試してみてください。

まとめ

今回はとりあえずBootstrapを使ってみたいという方向けに
導入方法を紹介させていただきました。

Bootstrapを使えるようになれば、
今まで時間をかけて実装していた機能が
一瞬で実現できることもあるでしょう！

まずは手を動かしたい！

そんな人はぜひ試してみてください。