全世界で利用されているTwitterが開発したCSSのフレームワーク
「Bootstrap」
～その利用方法を一気に紹介～
まずは、導入方法！
以下の通り、２つあります！
・Bootstrapファイルをダウンロードする
・CDNを利用する
①ファイルをＤＬする方法
以下の公式ドキュメントからＤＬ！
https://getbootstrap.jp/
手順としては、、、
１適当なHTMLファイルを作成
２Bootstrapのドキュメントのトップページからバージョンを指定
３ファイルをダウンロード！！
解凍した後、、、
先ほど作成した、HTMLファイルと同じ階層にDLしたCSSとJSファイルを移動。
４HTMLファイルにBootstrap の設定を記述する
以下のコードを追記
#head内
<link rel="stylesheet" href="css/bootstrap.min.css">
#</body>の上
<script src="js/bootstrap.min.js"></script>
これで導入は完了！！
試しに、Bootstrapのページ公式ドキュメントのデモなんか見て、動作を確認してみては！
はい、次ー
②CDNを利用する方法
CDNとは、コンテンツデリバリーネットワークの略です。
つまるところ、先ほどのCSSやJSファイルをDLしなくても、インターネット経由でそれらを使用できるのです。
簡単、簡単、、
１CDNをHTMLファイルに追記！
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
+ <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
先ほど移動したCSSファイルやJSファイルの記述は削除しましょう！
以上！簡単でしょ！
一旦休憩。。。
では、カルーセルぐらいから始めていいきましょう！
実践
１．カルーセル
カルーセルとは、複数の画像や要素をスライドさせる 仕組みの事。
で、Bootstrap には様々なカルーセルのタイプがあるんだけれど、今回使わせて頂きますのは、
「With Captions」というタイプのもの。
（https://getbootstrap.jp/docs/5.0/components/carousel/#with-captions）
上の画像の下に、コードがございますので、
そちらをコピーペーストで、一度試してみてください。
＜構成＞
・キャンプション（画像を入れる箇所）
・インジケーター
・左右の切り替えボタン
ボタン
公式サイト
Bootstrapにはたくさん種類のボタンが用意されております。
試しに以下のコードをためしてみください！
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
以下は、枠のみ
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
以上からわかるように。。。
classを変更するだけでスタイルも変更されちゃうんです！
色の他にも大きさ、影など
大きさを変更する
・btn-lg:デフォルトより大きい
・btn-sm：デフォルトより小さい
以下のように追加してミソ
<button class="btn btn-secondary btn-lg" ></button>
<button class="btn btn-info btn-sm" ></button>
影をつける
・shadow-sm：範囲が狭い
・shadow：範囲が中くらい
・shadow-lg：範囲が広い
・shadow-none：影がつかないようにする
プレビュー
スライドモード
全世界で利用されているTwitterが開発したCSSのフレームワーク
「Bootstrap」
～その利用方法を一気に紹介～
まずは、導入方法！
以下の通り、２つあります！
・Bootstrapファイルをダウンロードする
・CDNを利用する
①ファイルをＤＬする方法
以下の公式ドキュメントからＤＬ！
https://getbootstrap.jp/
手順としては、、、
１適当なHTMLファイルを作成
２Bootstrapのドキュメントのトップページからバージョンを指定
image.png
３ファイルをダウンロード！！
解凍した後、、、
先ほど作成した、HTMLファイルと同じ階層にDLしたCSSとJSファイルを移動。
４HTMLファイルにBootstrap の設定を記述する
以下のコードを追記
#head内
#