Bootstrapブレークポイントの設計図！sm/md/lg/xlの選び方と実務基準

ブレークポイント設計：sm/md/lg/xl/xxlの選び方と実務の基準

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

生徒

「Bootstrapのクラス名によく出てくる『sm』とか『md』って何のことですか？」

先生

「それは『ブレークポイント』という、画面サイズを切り替えるための境界線のことです。」

生徒

「どうしてそんなにたくさんの種類があるんですか？どれを選べばいいか迷っちゃいます。」

先生

「スマホ、タブレット、パソコンといったデバイスごとに、最適な見た目に変えるためですよ。実務でよく使われる選び方の基準を一緒に見ていきましょう！」

1. ブレークポイントとは？レスポンシブの境界線

Bootstrap（ブートストラップ）を使う上で欠かせないブレークポイントとは、ウェブサイトのデザインが「切り替わるポイント」のことです。プログラミング未経験の方に例えると、洋服のサイズ選び（Sサイズ、Mサイズ、Lサイズ）のようなものです。着る人の体格（画面の幅）に合わせて、ピッタリの服に着替えるイメージですね。

現代では、iPhoneのような小さなスマートフォン、iPadのようなタブレット、そして大きなモニターを持つデスクトップパソコンまで、ウェブサイトを見る道具の大きさはバラバラです。この「画面の横幅」がある一定のサイズを超えた瞬間に、レイアウトをガシャっと組み替えるための合図がブレークポイントです。これがあるおかげで、どんな端末で見ても文字が小さすぎたり、画像がはみ出したりしない「レスポンシブサイト」が作れるようになります。

2. 五つの基本サイズ！sm・md・lg・xl・xxlの違い

Bootstrap5では、主に五つのブレークポイントが用意されています。これらは全て「横幅のピクセル数（px）」で決まっています。ピクセルとは、パソコンの画面を構成する最小の「点」のことです。この点が多く並ぶほど、画面は広くなります。

sm (Small)： 576px以上。主に大きなスマホを横にした時や、小さなタブレット。
md (Medium)： 768px以上。iPadなどの標準的なタブレット。
lg (Large)： 992px以上。ノートパソコンなどの小さなPC画面。
xl (Extra Large)： 1200px以上。デスクトップPCなどの大きな画面。
xxl (Extra Extra Large)： 1400px以上。超大型のモニター。

何も指定しない（最小サイズ）の状態は「スマホの縦持ち」を基準にしています。ここから、画面が大きくなるにつれて「smになったらこうする」「mdになったらこう変える」と命令を追加していくのが基本の考え方です。

3. 実務で最もよく使われるのは「md」と「lg」

初心者がまず覚えるべきはmd（768px）とlg（992px）です。なぜなら、多くのウェブサイト制作の現場では「ここからがパソコン用の見た目」という境界線を、この2つのどちらかに設定することが多いからです。

例えば、「スマホでは縦に並べて、タブレットやパソコンでは横に並べたい」という場合、col-md-6というクラスを使います。これは「画面の幅が768px（md）より大きくなったら、横幅を半分（6/12）にしてね」という魔法の言葉になります。逆に言えば、768pxより小さい時は、自動的に横幅いっぱいの縦並びになります。この「切り替え」を意識することがデザイン上とても重要です。


<div class="container text-center">
    <div class="row">
        <div class="col-md-6 bg-info p-3 border">ブロック A</div>
        <div class="col-md-6 bg-light p-3 border">ブロック B</div>
    </div>
</div>

ブラウザ表示

4. モバイルファーストという大事な考え方

Bootstrapを扱う上で絶対に知っておきたいのがモバイルファーストという考え方です。これは「まずスマートフォンの見た目を作り、後から大きな画面向けの設定を付け加える」という制作スタイルのことです。

昔はパソコンサイトが主役でしたが、今はほとんどの人がスマホでサイトを見ます。そのため、Bootstrapのクラス（例えば col-12 など）は、最初から「スマホサイズ」に適用されるようになっています。ブレークポイントの指定（-md- など）を何も書かないと、それは一番小さな画面用の設定になります。そこに後から「md以上ならこう」「lg以上ならこう」と、大きいサイズ向けの上書きを積み上げていくのが正しい設計手順です。

5. 複数指定で実現する「三段階変化」レイアウト

ブレークポイントは、一つの要素に対して複数同時に使うことができます。これができると、「スマホでは1列、タブレットでは2列、大きなパソコンでは4列」という、デバイスに完璧にフィットするレイアウトが作れます。

例えば col-12 col-md-6 col-lg-3 と書きます。パソコンに慣れていないと難しく見えるかもしれませんが、意味はシンプルです。「最初は12（全幅）」「mdサイズ以上なら6（半分）」「lgサイズ以上なら3（1/4）」というふうに、画面が広がるにつれて自分自身の幅を細くしていく指示です。これこそが実務で求められるプロのコーディングです。


<div class="container text-center">
    <div class="row">
        <div class="col-12 col-md-6 col-lg-3 bg-warning p-3 border">カード1</div>
        <div class="col-12 col-md-6 col-lg-3 bg-warning p-3 border">カード2</div>
        <div class="col-12 col-md-6 col-lg-3 bg-warning p-3 border">カード3</div>
        <div class="col-12 col-md-6 col-lg-3 bg-warning p-3 border">カード4</div>
    </div>
</div>

ブラウザ表示

6. 表示・非表示を切り替えるd-noneの使い方

ブレークポイントは横幅を変えるだけでなく、「特定の画面サイズだけで見せる・隠す」という操作にも使われます。例えば、「パソコンでは詳しい説明文を見せたいけれど、スマホでは画面が狭いので隠したい」という場合があります。

ここで使うのが d-none（表示しない）と d-md-block（md以上で表示する）という組み合わせです。これをマスターすると、情報量をデバイスごとに調整できるようになり、ユーザーにとって非常に使い心地の良いサイトになります。「パソコンで見るとリッチだけど、スマホで見るとスッキリしている」サイトは、この機能を使って作られています。


<div class="container">
    <div class="p-3 bg-dark text-white text-center">
        <span>常に表示されるタイトル</span>
        <span class="d-none d-md-inline bg-danger ms-2">PCだけに見えるお得情報！</span>
    </div>
</div>

ブラウザ表示

7. ブレークポイント設計で失敗しないためのコツ

設計でよくある失敗は、あまりにも細かくブレークポイントを使いすぎることです。全部の要素に sm, md, lg, xl と指定してしまうと、後で修正するのがとても大変になります。

コツは「基本はmd（またはlg）だけで考える」ことです。ほとんどのサイトは、スマホ用（1列）とパソコン用（2〜4列）の二種類の見た目があれば、十分綺麗に見えます。まずは -md- クラス一つでレイアウトを切り替える練習をし、どうしても微調整が必要な場所だけ他のサイズを足すようにしましょう。シンプルこそが、美しいプログラムへの近道です。