はじめてのBootstrap5: 一から学ぶフロントエンドフレームワークの全ガイド

Bootstrapは、Twitterが開発したフリーでオープンソースのフロントエンドフレームワークです。

レスポンシブなウェブサイトとモバイルファーストのプロジェクトを迅速に開発するためのHTML、CSS、そしてJavaScriptのコンポーネント（パーツ）を提供しています。

Bootstrapは、グリッドレイアウト、ボタン、フォーム、ドロップダウン、アラート、モーダルダイアログなど、さまざまな再利用可能なコンポーネントを備えています。また、jQueryプラグインも含まれています。

また、Bootstrapはレスポンシブデザインを採用しており、さまざまなデバイス（デスクトップ、タブレット、スマートフォンなど）で適切に表示されるように設計されています。これにより、異なるデバイスでの表示を手動で調整する必要がなくなり、効率的に開発を進めることが可能となります。

読む前に知っておくべきこと
なぜBootstrapを使用するのか
Bootstrap5の例
Bootstrap5とBootstrap 3＆4

読む前に知っておくべきこと

Bootstrap5を学ぶ前に、以下の知識に基本的な理解を持っている必要があります。

HTML
CSS

なぜBootstrapを使用するのか

使いやすさ：HTMLとCSSに基本的な理解があれば、誰でもすぐにBootstrapを使用することができます。

レスポンシブデザイン：Bootstrapは、異なるプラットフォーム（platform）（スマートフォン、タブレット、デスクトップ）に応じて調整可能です。

モバイルファースト：Bootstrapでは、自動的にモバイルデバイスに対応する機能がフレームワークの中核部分を占めています。

ブラウザ互換性：Bootstrap5はすべての主要なブラウザ（Chrome、Firefox、Edge、Safari、Opera）と互換性があります。

Bootstrap5の例

Bootstrap5を利用するためには、まずBootstrapのCSSとJavaScriptファイルをHTML文書にリンクします。その後、Bootstrapのクラスを使って独自の要素をスタイリングします。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">

  <title>Bootstrapの基本例</title>
</head>
<body>
  <div class="container">
    <h1 class="text-center">こんにちは、世界！</h1>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

上記のHTML文書では、bootstrap.min.cssとbootstrap.bundle.min.jsの2つのリンクを用いてBootstrapのCSSとJavaScriptを読み込んでいます。

そして、containerクラスとtext-centerクラスを用いて、Bootstrapのグリッドシステムとテキストの中央揃えを利用しています。

Bootstrap5とBootstrap 3＆4

Bootstrap5はBootstrapの最新バージョンで、新たなコンポーネント、より高速なスタイルシート、そしてより高速なレスポンス能力を備えています。

Bootstrap5はすべての主要な最新の安定版ブラウザをサポートしていますが、Internet Explorer 11以前のバージョンをサポートしていません。

Bootstrap5とBootstrap 3＆4の主要な違いは、Bootstrap5がjQueryに依存していない点で、代わりにネイティブのJavaScriptを使用しています。しかし、もし必要であれば、jQueryを追加して使用することも可能です。

Bootstrap5 マニュアル