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のグリッドシステムとは、画面をタイルのように「分割」して配置する仕組みです。1行を12個に分けることで、自由にパーツを配置できます。

たとえば、2つの箱を横に並べたいとき、それぞれを6個分（12のうちの半分）にすれば、キレイに半々に表示されます。

<div class="container">
    <div class="row">
        <div class="col-6">左のコンテンツ</div>
        <div class="col-6">右のコンテンツ</div>
    </div>
</div>

このように、container・row・col-数字を使うことで、画面の中を自由に分割できます。

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

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

コンポーネントとは、「部品」という意味で、Bootstrapにはすぐに使えるデザイン済みの部品がたくさん用意されています。たとえば、以下のような部品です：

• ボタン
• カード
• ナビゲーションバー（上のメニュー）
• モーダル（ポップアップ画面）

たとえば、ボタンを表示したいときは次のように書きます。

<button class="btn btn-primary">送信する</button>

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分割して要素を配置できる仕組みで、レイアウトを自由に調整できるのが特徴です。たとえば左右にコンテンツを分けたいときなどに便利です。