先生と生徒の会話形式で理解しよう

生徒

「先生、Bootstrapを勉強しているんですが、バージョン4と5でクラス名が違うことがあって混乱します。どうやって確認すればいいですか？」

先生

「とても良い気づきですね。Bootstrap4から5にかけて、古いクラス名が使えなくなり、新しいクラスに置き換えられている部分がたくさんあります。こういう古い書き方は『deprecated（非推奨）』と呼ばれますよ。」

生徒

「非推奨ってなんですか？エラーになるんですか？」

先生

「非推奨は、今後使わないほうがいいという意味です。すぐにエラーにはならない場合もありますが、新しいバージョンでは動かなくなることがあるので、新しいクラスに直しておくことが大切です。」

生徒

「なるほど！じゃあ具体的にどのクラスをどう直せばいいのか知りたいです。」

先生

「では、Bootstrap4から5にかけてのクラス名変更を、早見表で見ていきましょう！」

1. Bootstrap4から5で変更された背景

Bootstrapは、Webページをきれいに整えるための便利な道具です。バージョンが変わるときには、より分かりやすい名前に統一されたり、最新のブラウザに合わせた仕様に調整されることがあります。その結果、古いクラスが廃止され、新しいクラスが登場しました。

例えば、昔の地図に載っていた町名が新しい地図では変わっているように、Bootstrapでもクラス名が刷新されるのです。

2. クラス名変更の代表例

ここでは代表的な変更例を紹介します。初心者でも混乱しやすい部分を中心にまとめました。

Bootstrap4（deprecated）	Bootstrap5（新しいクラス）	説明
`.form-group`	`.mb-3`	フォームの余白設定。シンプルにマージン指定で代用。
`.badge-pill`	`.rounded-pill`	丸みを帯びたバッジ。角丸クラスに統合。
`.input-group-append`	不要（構造を簡略化）	追加ボタンはそのまま`.input-group`内に配置。
`.input-group-prepend`	不要（構造を簡略化）	同様にシンプルな構造へ。
`.custom-select`	`.form-select`	セレクトボックスの統一クラス。
`.float-left`	`.float-start`	左寄せがstartに変更。
`.float-right`	`.float-end`	右寄せがendに変更。
`.ml-*`	`.ms-*`	margin-leftがmargin-startに変更。
`.mr-*`	`.me-*`	margin-rightがmargin-endに変更。

3. 具体例で違いを確認しよう

それでは、実際にフォームとバッジのクラス変更を見比べてみましょう。


<!-- Bootstrap4の例 -->
<div class="form-group">
  <label for="name">名前</label>
  <input type="text" class="form-control" id="name">
</div>
<span class="badge badge-pill badge-primary">旧バッジ</span>


<!-- Bootstrap5の例 -->
<div class="mb-3">
  <label for="name" class="form-label">名前</label>
  <input type="text" class="form-control" id="name">
</div>
<span class="badge rounded-pill bg-primary">新バッジ</span>

ブラウザ表示

4. float系の違い

Bootstrap4では.float-leftや.float-rightを使っていましたが、Bootstrap5では.float-startと.float-endに統一されました。これは、左右の表現を「開始」「終了」とすることで、右から左に読む言語（アラビア語など）にも対応しやすくなったためです。


<!-- Bootstrap4の例 -->
<div class="float-left">左寄せ</div>
<div class="float-right">右寄せ</div>


<!-- Bootstrap5の例 -->
<div class="float-start">新しい左寄せ</div>
<div class="float-end">新しい右寄せ</div>

ブラウザ表示

このように、クラス名がより国際的で柔軟な書き方になっています。

5. マージンとパディングの書き方変更

Bootstrap4では.ml-3や.mr-2のように、左右を直接指定していました。しかしBootstrap5では、これが.ms-3（margin-start）、.me-2（margin-end）に置き換えられました。これも、右から左に読む言語を意識した変更です。


<!-- Bootstrap4の例 -->
<div class="ml-3 mr-2">古い余白指定</div>


<!-- Bootstrap5の例 -->
<div class="ms-3 me-2">新しい余白指定</div>

ブラウザ表示

こうした細かい違いを一つずつ覚えていくと、移行作業がとてもスムーズになります。

6. 早見表を活用して効率的に移行しよう

すべてのクラス名を丸暗記する必要はありません。まずは代表的な置き換えを覚え、あとは早見表を参考にしながら直していけば十分です。Bootstrap公式ドキュメントにも移行ガイドがありますが、初心者にとってはシンプルな早見表が便利です。

このように、deprecatedと新しいクラスを対比させて覚えることで、少しずつ理解が深まり、Bootstrap5の最新の書き方に自然と慣れていけます。

まとめ

Bootstrap4からBootstrap5へ移行する際に重要となるクラス名の変更や非推奨表記の置き換えは、初心者にとって理解しづらい部分も多くありますが、代表的な変更点を一つずつ確認することで、段階的に覚えられるようになります。特にフォーム関連やバッジや余白指定のクラスは使用頻度が高く、間違いやすいポイントとして知られているため、違いを正確に理解しておくと移行作業が格段に楽になります。たとえばform-groupがmb三に変わったり、badge-pillがrounded-pillに置き換わったりする変更は、Bootstrap5における記述の簡略化や統一を象徴するものであり、これらの変更を反映させることでより現代的で扱いやすいコードになります。また、国際化対応の観点から導入されたfloat系や余白系の名前変更は、多言語環境に適応しやすい設計として大きな意味を持ちます。こうした背景を理解しながら作業を進めることで、単なる置き換えではなく、Bootstrap5がどのような思想で改善されているのかを体感できる点が非常に学びの多い部分といえます。

さらに、Bootstrap5ではJavaScript依存の構造が改善され、よりシンプルで軽量な構成へと進化しました。この変化により、以前より複雑だった構造が明確化され、初心者でも読みやすいコードを作成できるようになりました。また、実際の移行作業では、一度に全体を修正する必要はなく、コンポーネントごとに整理しながら進めることで、負担を感じることなく作業を継続できます。特にフォームは変更点が多い部分であり、Bootstrap4で複雑だったinput-group構造がBootstrap5で簡略化され、より直観的な形へと整理されています。非推奨クラスの整理と新しい構造の理解をセットで学ぶことで、コードの見通しが良くなり保守性も高まります。

また、移行時に役立つもう一つのポイントとして、実際のサンプルコードを比較しながら理解を深める方法があります。文章だけでは違いが分かりにくい部分もありますが、実際のコードを確認することで、どのように構造が変わっているのかを視覚的に把握しやすくなります。以下にBootstrap5でのフォーム構造を含むサンプルコードを掲載しています。これは実際に移行するときに参考にできる形となっており、初心者がよく利用するレイアウト要素を中心に組み立てています。変更後のクラス名や構造がそのまま理解できるため、学びながら移行作業を進めたい人にとても役立ちます。

Bootstrap5で書いたフォームのサンプル


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Bootstrap5サンプルフォーム</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<style>
    .sample-box {
        border: 2px solid #0d6efd;
        border-radius: 8px;
        padding: 20px;
        background-color: #f8f9fa;
    }
    .sample-title {
        font-size: 1.3rem;
        font-weight: bold;
        color: #0d6efd;
    }
</style>
</head>

<body class="p-4">
<div class="sample-box">
    <div class="sample-title">入力フォーム例</div>

    <div class="mb-3">
        <label for="username" class="form-label">ユーザー名</label>
        <input type="text" id="username" class="form-control">
    </div>

    <div class="mb-3">
        <label for="mail" class="form-label">メールアドレス</label>
        <input type="email" id="mail" class="form-control">
    </div>

    <span class="badge rounded-pill bg-primary">新しいバッジ</span>

    <button class="btn btn-primary mt-3">送信</button>
</div>
</body>
</html>

ブラウザ表示

この構造を見ると、Bootstrap4ではform-groupやbadge-pillなどのクラスを使っていた部分が、Bootstrap5ではより簡潔で分かりやすい形へと改善されていることが分かります。また、mb三のように余白指定クラスに統一されたことで、フォーム全体の設計が直観的になっています。実際の移行作業では、フォーム、バッジ、余白、float、input-groupといったよく使う要素から順番に確認していくと効率よく作業を進められます。特にfloat-startやfloat-endのような国際化対応のクラス変更や、msやmeといった余白指定の見直しは、これまでの左右固定概念から柔軟な表現へと進化した証でもあります。こうした改善を理解しながら作業することで、Bootstrap5の利点を最大限活用できるようになり、長期的なサイト管理においても安定性が増すでしょう。

さらに、Bootstrap4からBootstrap5への移行を成功させるためには、頻繁に登場するクラスを優先的に整理し、必ず実際の表示を確認しながら進めることが欠かせません。ブラウザで確認することで、意図した見た目になっているかどうかを逐一チェックでき、誤った置き換えを防ぐことができます。また、必要な部分だけ順番に直していけばよいため、初心者でも焦らず落ち着いて作業に取り組むことができます。この積み重ねがBootstrap5への正しい理解へとつながり、自信を持ってWeb制作に取り組めるようになります。

先生と生徒の振り返り会話

生徒：きょうの学習で、Bootstrap4と5の違いがかなり分かるようになりました。特にクラス名の変更は覚えにくいと思っていたけれど、意味を知ると理解しやすいですね。

先生：その通りです。ただ丸暗記するのではなく、なぜ変更されたのかという背景を知ることで、自然と覚えられるようになりますよ。

生徒：サンプルコードを見ると、Bootstrap5のほうがすっきりしていて扱いやすそうです。移行作業にも挑戦してみたくなりました。

先生：良い姿勢ですね。今回学んだ置き換えパターンを活かしながら進めれば、必ずスムーズに移行できますよ。

生徒：ありがとうございます！これから実際のプロジェクトでも試してみます。

先生：ぜひ挑戦してみてください。理解が深まるほどBootstrap5の便利さが実感できますよ。