bootstrap 基本構造解説と使い方のポイントまとめ

はじめに

bootstrapを学びたい方のために、基本的な仕組みや使用方法について詳しくご紹介します。

bootstrapとは何か？

bootstrapとは、Twitter社によって開発されたオープンソースのフロントエンドフレームワークです。HTML、CSS、JavaScriptのテンプレートが豊富に用意されています。レスポンシブなWebサイトを簡単に作成できる点が特徴です。

bootstrapの基本構造とは？

bootstrapを使うためには、基本構造を理解することが重要です。主に以下のような流れで構成されます。

HTMLにbootstrapのCSSとJavaScriptを読み込む
レスポンシブデザインを意識したコンテナクラスを使用
グリッドシステムでレイアウトを管理
さらにコンポーネントを活用

HTMLファイルにbootstrapを読み込む方法

bootstrapを使用するためには、下記のようにCDNリンクを追加します。

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

コンテナとグリッドシステムについて

bootstrapのレイアウト設計では、「コンテナ」と「グリッドシステム」が重要な役割を果たします。

コンテナは、ページ全体の最大幅を制御し、適切な余白を持たせるために使用します。

.container：レスポンシブに対応した固定幅のコンテナ
.container-fluid：広いスクリーン全体に幅を広げるフル幅コンテナ

例：

<div class="container">
  通常のコンテナ
</div>

<div class="container-fluid">
  フル幅のコンテナ
</div>

グリッドシステムは、行（.row）と列（.col）を組み合わせてレイアウトを構成します。一行12分割の概念により、簡単に広い範囲に対応した配置設計ができます。

例：

<div class="container">
  <div class="row">
    <div class="col-6">50%幅</div>
    <div class="col-6">50%幅</div>
  </div>
</div>

レスポンシブ対応の列の書き方

bootstrapでは画面サイズに対応して、列の幅を統一したり分けたりできます！

例：

<div class="row">
  <div class="col-12 col-md-6">スマホでは1列，デスクトップ以上では2列</div>
  <div class="col-12 col-md-6">同じく2列目</div>
</div>

ブレークポイントのクラス：

col-sm- (小さな画面（1級）)
col-md- (中級の画面)
col-lg- (大きめの画面)
col-xl- (最大級の画面)

と、デバイスサイズに対応したクラス指定が可能です。

よく使われるbootstrapコンポーネント

bootstrapには、すぐに使える豊富なコンポーネントが用意されています。

ボタン (Button)
ナビゲーションバー (Navbar)
アラート (Alert)
モーダル (Modal)
フォーム (Form)

これらを駆使することで、サイト作成が大幅に効率化されます。

カスタマイズと拡張性

bootstrapは初期状態でも充分に使えますが、カスタマイズすることで一歩進んだサイトを作れます。

CSSの上書き
Sassを使った変数カスタマイズ
JavaScriptで動きを追加

さらに、外部プラグインを利用すれば拡張性も高められます。

用語解説

フレームワーク
開発を効率化するための枠組み。

レスポンシブデザイン
画面サイズに対応してレイアウトが変わる設計。

グリッドシステム
行と列による配置システム。

コンポーネント
事前に用意されたユーザーインタフェース。

CDN
近いサーバーからコンテンツを配信する技術。

おわりに

今回は「bootstrap 基本構造解説」として、初心者の方でも理解しやすいように概要と使い方をまとめました。