「Bootstrap」とは
WEB開発で広く使われている「CSSとJavaScriptを組み合わせたフレームワーク」です。
これを使うことによる大きなメリットは、レスポンシブデザイン1を手軽に実装できることです。
その他にも、ページ上に配置することのできる便利な部品（コンポーネント）が豊富に用意されているため、オリジナルの部品を作る手間を省くことができます。
ライセンスはMITライセンスとなっており、もちろん商用利用も可能です（使ってもお金を払わなくてもよい）
Bootstrapにはいくつかのバージョンがあり、2025年2月現在では「Bootstrap 5」が最新のバージョンとなっています。旧バージョンと互換性がない場合もあるため、これから始めるなら「Bootstrap 5」を使っていきましょう。
- PCやタブレット端末、そしてスマートフォンなど、異なる大きさの画面に合わせてページの表示をいい感じに整えてあげることをレスポンシブデザインと呼びます。レスポンシブ対応していないサイトは、PCで見たときは良くても、スマートフォンで見たときに操作性や視認性が悪くなっていることが多いです。 ↩︎
サンプルページ
- Gridレイアウトのサンプル（新しいタブで開きます）
- PCとスマホで表示したときにレイアウトがそれぞれの表示幅に合わせて変わっていることを確認してください。PCのブラウザのウインドウの大きさを変えたり、開発者ツールで確認することも可能です。
- Carouselのサンプル（新しいタブで開きます）
- 「カルーセル（カルーセルスライダー）」とは、数枚の画像の表示を横にスライドさせることで切り替えるものです。画面上の同じ場所に複数の画像を表示させられるので省スペースになります。ユーザーにスライドしてもらうだけでなく、画像ごとに表示する時間を決めて自動でスライドさせたりもできます。また、画像だけでなく動画も表示させることができます。