Bootstrap4から5のクラス名変更一覧！初心者向けdeprecatedと置き換えパターン早見表

1. Bootstrap4から5で変更された背景：なぜ書き換えが必要？

1. Bootstrap4から5で変更された背景：なぜ書き換えが必要？

Bootstrapは、世界中のWebデザイナーが利用する「Webサイトを素早くきれいに作るための便利なツールセット」です。2021年にリリースされたバージョン5では、従来の4から劇的な進化を遂げました。

この変更の背景には、主に3つの大きな理由があります。

• 最新ブラウザへの最適化： 古い技術（Internet Explorerなど）への対応を終了し、最新のブラウザでより速く、軽く動くようになりました。
• jQueryへの依存廃止： 以前は必須だった「jQuery」というプログラムが不要になり、よりシンプルで高速な動作が可能になりました。
• 多言語対応の強化： 「左・右」という概念から、アラビア語のように右から左に読む言語も考慮した「開始(start)・終了(end)」というユニバーサルな表現に刷新されました。

例えば、町名が変わった古い地図を使い続けると目的地にたどり着けないように、Bootstrapも最新の「ルール（クラス名）」に従って記述することが、SEO（検索エンジン最適化）や表示スピード、セキュリティの観点から非常に重要です。

<div class="text-left">
    <p>これは古い書き方の「左寄せ」です（Bootstrap4）。</p>
</div>
<div class="text-right">
    <p>これは古い書き方の「右寄せ」です（Bootstrap4）。</p>
</div>

<hr>

<div class="text-start">
    <p class="text-primary fw-bold">これは新しい書き方の「左寄せ（開始地点）」です（Bootstrap5）。</p>
</div>
<div class="text-end">
    <p class="text-success fw-bold">これは新しい書き方の「右寄せ（終了地点）」です（Bootstrap5）。</p>
</div>

上の例のように、.text-leftが.text-startに変わるなど、より論理的で現代のWeb標準に合わせた命名規則に変更されています。一見面倒に思える「書き換え」ですが、これを行うことで、あなたのWebサイトは将来にわたって正しく表示され続けるようになります。

2. Bootstrap5で変更された主要なクラス名と記述方法

2. Bootstrap5で変更された主要なクラス名と記述方法

Bootstrap5への移行で最も注意すべき点は、「左(Left)・右(Right)」という概念が「開始(Start)・終了(End)」という概念に置き換わったことです。これは、右から左に読む言語（アラビア語など）にも対応するための世界標準の考え方（RTL対応）を取り入れたためです。

プログラミング未経験の方でも、以下の比較表と具体例を見れば、どのように書き換えればよいかが直感的に分かります。

【実践例】余白とボタンのデザイン修正

実際に、未経験の方が間違いやすい「余白（マージン）」と「バッジ」の書き換え例を見てみましょう。Bootstrap4の古い書き方では、現在のブラウザでは正しくレイアウトが崩れてしまう原因になります。

<div class="mb-4">
    <p>1. 要素の右側にスペースを空ける例：</p>
    <button type="button" class="btn btn-primary me-3">保存する</button>
    <button type="button" class="btn btn-secondary">キャンセル</button>
</div>

<div>
    <p>2. 丸みのあるラベルを表示する例：</p>
    <span class="badge rounded-pill bg-success">更新完了</span>
    <span class="badge rounded-pill bg-danger">エラー</span>
</div>

3. 具体例で違いを確認しよう：フォームとバッジの書き換え

3. 具体例で違いを確認しよう：フォームとバッジの書き換え

Bootstrap 4から5への移行で、最も頻繁に修正が必要になるのが「入力フォーム」と「バッジ（ラベル）」の装飾です。 プログラミング初心者の方でも分かりやすいように、具体的なコードの変化と、なぜその変更が必要なのかを詳しく解説します。

フォームの変更点：余白とラベルの指定

Bootstrap 4ではform-groupという専用のクラスで囲んでいましたが、Bootstrap 5では汎用的なマージンクラス（mb-3など）を使うルールに変わりました。 また、ラベルには新しくform-labelクラスを指定する必要があります。

<div class="form-group">
  <label for="name1">名前</label>
  <input type="text" class="form-control" id="name1" placeholder="Bootstrap 4の書き方">
</div>

<div class="mb-3">
  <label for="name2" class="form-label">名前</label>
  <input type="text" class="form-control" id="name2" placeholder="Bootstrap 5の書き方">
</div>

バッジの変更点：背景色と丸みの指定方法

文字を強調する「バッジ」は、クラス名がより直感的になりました。 これまではbadge-primaryのように1つのクラスで色を決めていましたが、Bootstrap 5からは「これは背景色（Background）ですよ」と分かりやすくするためにbg-primaryという書き方に統一されています。 また、角を丸くするbadge-pillは、より汎用的なrounded-pillに変更されました。

<span class="badge badge-pill badge-primary">旧バッジ</span>

<span class="badge rounded-pill bg-primary">新バッジ（Bootstrap 5）</span>
<span class="badge rounded-pill bg-success">成功バッジ</span>
<span class="badge rounded-pill bg-danger">重要バッジ</span>

4. float系の違い（要素の横寄せ）

4. float系の違い（要素の横寄せ）

Bootstrap4から5へのアップデートで、初心者の方が一番戸惑いやすいのがこの「float（フロート）」の名称変更です。以前は直感的に「左（left）」「右（right）」と指定していましたが、Bootstrap5では.float-start（開始位置）と.float-end（終了位置）という名前に変わりました。

なぜこのような分かりにくい名前に変わったのでしょうか？それは、世界にはアラビア語のように「右から左に読む言語」があるからです。最新のウェブ標準では、どんな言語環境でも「文章が始まる側＝start」「終わる側＝end」と表現することで、柔軟に対応できるようになっています。日本人の感覚では「start ＝ 左」「end ＝ 右」と覚えてしまえばOKです！

<div class="float-left">旧：左寄せ</div>
<div class="float-right">旧：右寄せ</div>

<div class="clearfix"></div>
<hr>

<div class="float-start bg-primary text-white p-2">
	新しい左寄せ（float-start）
</div>
<div class="float-end bg-success text-white p-2">
	新しい右寄せ（float-end）
</div>

プログラミング未経験の方は、まずこの「startとend」の概念に慣れておきましょう。画像に文章を回り込ませたい時や、ボタンを右端に配置したい時に非常に便利です。クラス名が変わっただけで、基本的な使い方は以前のBootstrapと変わりませんので安心してくださいね。

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

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. 早見表を活用して効率的に移行しよう

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制作に取り組めるようになります。