Bootstrap 5 の使い方入門：グリッド・コンポーネント・ユーティリティの全体像を初心者向けに解説！

1. Bootstrap 5とは何か？初心者向けに簡単に解説

1. Bootstrap 5とは何か？初心者向けに簡単に解説

Bootstrap 5（ブートストラップ・ファイブ）は、Webサイトのデザインを効率化するために世界中で最も使われている「CSSフレームワーク」です。一言でいうなら、プロが作ったデザインパーツの詰め合わせセットだと考えてください。

通常、プログラミング未経験の方がゼロからWebサイトを作ろうとすると、HTMLで骨組みを作り、CSSで色や配置を1つずつ指定しなければなりません。これは非常に時間がかかる作業です。しかし、Bootstrapを使えば、あらかじめ用意された「クラス名」をHTMLに書き加えるだけで、ボタン、メニュー、レイアウトといった複雑なデザインを瞬時に適用できます。

例えば、プログラミングを始めたばかりの方が、自力でCSSを書いておしゃれなボタンを作る場合と、Bootstrapを使う場合を比較してみましょう。

<style>
    .my-button {
        background-color: #0d6efd;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    .my-button:hover {
        background-color: #0b5ed7;
    }
</style>
<button class="my-button">自作ボタン</button>

<button class="btn btn-primary">Bootstrapのボタン</button>

このように、Bootstrap 5を使えば、コードの量を大幅に減らしながら、清潔感のある洗練されたサイトを作成できます。これからのWeb開発において、必須とも言える強力なサポーターとなってくれるでしょう。

2. グリッドシステムでレイアウトを自由に設計する

2. グリッドシステムでレイアウトを自由に設計する

Bootstrapの最大の特徴であり、初心者の方がまず覚えるべきなのが「グリッドシステム」です。これは、Webサイトの画面を横方向に12個のパーツ（列）に分割して考える魔法のような仕組みです。

プログラミング未経験の方でも、「12個のポケットがある棚」をイメージすれば簡単です。例えば、2つの要素を同じサイズで横に並べたいときは、12の半分である「6」ずつを割り当てます。3つ並べたいときは「4」ずつ、といった具合に、合計が12になるように数字を選ぶだけで、プロのような整ったレイアウトが完成します。

<div class="container text-center">
    <div class="row">
        <div class="col-6 p-3 bg-primary text-white border">
            <h3>左側のエリア</h3>
            <p>ここは12マスのうち「6」を使っています。</p>
            <img src="/img/sample150-100.jpg" alt="サンプル画像1" class="img-fluid">
        </div>
        <div class="col-6 p-3 bg-success text-white border">
            <h3>右側のエリア</h3>
            <p>こちらも「6」を使っているので、ちょうど半分です。</p>
            <img src="/img/sample150-100.jpg" alt="サンプル画像2" class="img-fluid">
        </div>
    </div>
</div>

このように、container（全体の枠組み）、row（横一行のまとまり）、col-数字（横幅の指定）という3つの要素をセットで使うのが基本ルールです。難しい計算をしなくても、数字を入れ替えるだけでスマートフォンやPCで見やすい柔軟なデザインが作れるようになります。まずは「合計12にする」という点だけ意識して、色々な数字を試してみましょう。

3. コンポーネントとは？かんたんに使える便利な部品

3. コンポーネントとは？かんたんに使える便利な部品

Bootstrapの最大の魅力は、「コンポーネント」と呼ばれるデザイン済みの部品が豊富に揃っていることです。コンポーネントとは、Webサイトによく使われる「ボタン」や「メニューバー」などのパーツを、HTMLタグに特定のクラス名を書き込むだけで呼び出せる仕組みのことです。プログラミング未経験の方でも、複雑なCSSを書くことなく、プロ級の見栄えを瞬時に再現できます。

例えば、代表的なコンポーネントには以下のようなものがあります：

• ボタン：クリックしたくなる立体的なデザイン
• カード：画像と説明文をセットにした、SNSのような投稿枠
• アラート：「送信完了！」などのメッセージを伝える色付きの枠
• ナビゲーションバー：画面上部に表示されるサイトのメニュー

【実践例】ボタンとカードを使ってみよう

まずは、最も基本となる「ボタン」の書き方です。通常なら数十行のCSSが必要なデザインも、Bootstrapならたった1行で完成します。

<button class="btn btn-primary">青色の送信ボタン</button>
<button class="btn btn-outline-success">緑の枠線ボタン</button>

次に、画像とテキストを組み合わせた「カード」コンポーネントを紹介します。これを使えば、ネットショップの商品紹介やブログの記事一覧のようなデザインが驚くほど簡単に作れます。

<div class="card" style="width: 18rem;">
    <img src="/img/sample150-100.jpg" class="card-img-top" alt="サンプル画像">
    <div class="card-body">
        <h5 class="card-title">便利なコンポーネント</h5>
        <p class="card-text">Bootstrapなら、このように画像と文字をセットにした「カード型」のデザインも、クラスを指定するだけで綺麗に整います。</p>
        <a href="#" class="btn btn-primary">詳細を見る</a>
    </div>
</div>

コード内のbtnは「これはボタンです」という基本設定を、btn-primaryは「青色にする」という装飾を意味しています。このように、「役割（コンポーネント名）」と「見た目（装飾）」のクラスを組み合わせるだけで、自由自在にデザインを構築できるのがBootstrapの大きな特徴です。

4. ユーティリティクラスで細かい調整も自由自在

4. ユーティリティクラスで細かい調整も自由自在

ユーティリティクラスとは、文字の色、大きさ、余白、配置などを細かく指定できる便利な仕組みです。たとえば、以下のようなことがすぐにできます。

• text-center：文字を中央にする
• mt-3：上に余白（margin top）を少しつける
• fw-bold：文字を太字にする

実際に使ってみましょう。

<p class="text-center fw-bold mt-3">中央に表示された太字の文字</p>

このように、クラス名を指定するだけで、特別なCSSを書かなくても簡単に見た目を変えることができます。

5. グリッド・コンポーネント・ユーティリティの組み合わせ例

5. グリッド・コンポーネント・ユーティリティの組み合わせ例

それぞれの仕組みを組み合わせると、もっと実用的なレイアウトが作れます。以下は、カード型のデザインを2列に並べた例です。

<div class="container">
    <div class="row">
        <div class="col-6">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">タイトル1</h5>
                    <p class="card-text">説明文がここに入ります。</p>
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">タイトル2</h5>
                    <p class="card-text">もうひとつの説明文です。</p>
                </div>
            </div>
        </div>
    </div>
</div>

このように、グリッドで列を作り、コンポーネントのカードを使い、ユーティリティクラスで見た目を調整すれば、ホームページの基礎的な部分が完成します。

6. Bootstrap 5でよく使う用語の意味も覚えよう

6. Bootstrap 5でよく使う用語の意味も覚えよう

はじめての方のために、よく出てくる単語の簡単な意味を紹介しておきます。

• クラス（class）：HTMLタグに見た目や動きをつけるための指定。たとえばclass="btn"のように使います。
• レイアウト：画面の配置のこと。どこにどのパーツを置くかの設計図です。
• レスポンシブ：スマホやタブレットでもキレイに見えるように調整すること。
• フレームワーク：よく使う機能がひとまとめになった便利セット。

まとめ

まとめ

ここまで、Bootstrap 5 の使い方を大きく三つの柱である「グリッド」「コンポーネント」「ユーティリティ」を中心に整理しながら学んできました。これらはウェブ制作において特に重要な基礎部分であり、初心者が最初につまずきやすい箇所でもあります。しかし、Bootstrap の仕組みを知れば、ホームページの構造を整え、見た目を調整し、スマートフォンにも自然に対応したデザインを作れるようになります。クラス名ひとつで見た目が大きく変わるため、試しながら理解を深めるほど、自然なレイアウトや画面構成が作りやすくなります。

とくに、グリッドシステムは画面全体の骨組みを作るために欠かせません。列幅を指定するだけで横並びや縦並びがきれいに分割され、要素同士のバランスをとりやすくなります。行と列という構造を意識して組み立てることで、画面全体が整い、情報を伝えたい順番で並べられるようになります。さらにレスポンシブ対応が標準で組み込まれているため、スマートフォンやタブレットでも自然なレイアウトを保つことができます。

一方で、コンポーネントは「部品」のような役割を持ち、ボタン、カード、ナビゲーション、モーダルなど多くのデザインが最初から用意されています。複雑なHTMLやCSSを自分で一から書く必要がなく、決められたクラスを追加するだけで簡単に整った見た目を作れます。特にカードやボタンは利用頻度が高く、さまざまなページで応用できます。クリックしやすいボタン、情報をまとめるカード、使いやすいメニューなどがすぐに作れるため、初心者でも実務に近いページ構成を体験できます。

また、ユーティリティクラスは細かな調整に役立つ小さな道具の集まりです。文字の大きさ、色、太さ、余白、配置などはサイトの雰囲気を決める大切な要素です。たとえば、適切な余白をつけることで読みやすさが大きく変わります。太字・中央揃え・色の調整などをクラス名だけで指定できるため、デザイン調整の作業時間が大幅に短縮されます。

以下に、それぞれの要素を組み合わせた簡単な例をもうひとつ用意しました。グリッドで構造を作り、コンポーネントで情報をまとめ、ユーティリティで見た目を整えた構成になっています。

<div class="container mt-4">
    <div class="row">
        <div class="col-4">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="card-title fw-bold">お知らせ</h5>
                    <p class="card-text">最新情報を一覧で確認できます。</p>
                    <button class="btn btn-primary w-100">もっと見る</button>
                </div>
            </div>
        </div>
        <div class="col-4">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="card-title fw-bold">サービス紹介</h5>
                    <p class="card-text">提供している機能と特徴をまとめています。</p>
                    <button class="btn btn-success w-100">サービスを見る</button>
                </div>
            </div>
        </div>
        <div class="col-4">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="card-title fw-bold">お問い合わせ</h5>
                    <p class="card-text">お問い合わせ方法をご案内します。</p>
                    <button class="btn btn-outline-primary w-100">問い合わせる</button>
                </div>
            </div>
        </div>
    </div>
</div>

このように、Bootstrap 5 を使えば、初心者でも自然な構造と整った見た目を簡単に作れます。グリッドで配置を決め、コンポーネントで内容を整理し、ユーティリティで細部を調整する。それぞれの特徴を理解して組み合わせることで、非常に実用的で完成度の高いページが作れるようになります。これらの基本を押さえておくと、制作のスピードが大幅に向上し、実務での応用もしやすくなるため、Web制作の第一歩として大いに役立つ力になります。

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

Bootstrap 5とは何ですか？初心者でも使えるツールですか？

Bootstrap 5とは、HTMLやCSSでWebページを作るときに、見た目を簡単に整えることができるフレームワークです。あらかじめ用意された部品セットがあり、初心者でもすぐに使えるのが特徴です。

Bootstrapのグリッドシステムとはどういう意味ですか？

グリッドシステムとは、画面を12分割して要素を配置できる仕組みで、レイアウトを自由に調整できるのが特徴です。たとえば左右にコンテンツを分けたいときなどに便利です。