Bootstrapブレークポイント完全ガイド！sm・md・lg・xl・xxlの意味と選び方を初心者向けに解説
生徒
「Bootstrapでsmとかmdって書いてあるんですが、正直よく分かりません…」
先生
「それは画面の大きさごとにデザインを切り替えるための目印です。」
生徒
「スマホとかパソコンで見た目を変えるってことですか？」
先生
「そうです。Bootstrapではそれをブレークポイントと呼びます。」
1. ブレークポイントとは何か
ブレークポイントとは、画面の横幅によってレイアウトを切り替えるための境目のことです。スマートフォン、タブレット、パソコンでは画面の大きさが違います。
そのまま同じ配置にすると、文字が小さすぎたり、横にはみ出したりします。そこで、ある幅を境にデザインを変える仕組みが必要になります。
2. Bootstrapが用意している画面サイズの考え方
Bootstrapでは、よく使われる画面サイズをあらかじめ分類しています。これにより、細かい計算をしなくてもレスポンシブ対応ができます。
レスポンシブとは、画面サイズに応じて自動で見た目が変わる設計のことです。
3. smとmdの意味をやさしく理解する
smは小さめの画面を意味します。主にスマートフォンを横にしたサイズや、小さなタブレットを想定しています。
mdは中くらいの画面です。タブレットや小型ノートパソコンをイメージすると分かりやすいです。
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">内容</div>
<div class="col-sm-6 col-md-8">内容</div>
</div>
</div>
4. lgとxlの役割を知ろう
lgは大きめの画面を意味します。一般的なデスクトップパソコンの画面サイズです。
xlはさらに広い画面を想定しています。横幅が広いモニターで、余白を活かしたデザインができます。
<div class="container">
<div class="row">
<div class="col-lg-3 col-xl-2">メニュー</div>
<div class="col-lg-9 col-xl-10">メイン</div>
</div>
</div>
5. xxlはどんなときに使うのか
xxlはとても大きな画面向けの指定です。横幅が非常に広いディスプレイで使われます。
必ず使うものではありませんが、管理画面や情報量の多いページでは役立ちます。
<div class="container">
<div class="row">
<div class="col-xxl-2">サイド</div>
<div class="col-xxl-10">コンテンツ</div>
</div>
</div>
6. モバイルファーストという考え方
Bootstrapはモバイルファーストという考え方で作られています。これは、まずスマートフォンを基準にデザインし、画面が大きくなるにつれて調整する方法です。
そのため、何も指定しない場合はスマホ向けの表示になります。
7. ブレークポイントの選び方の基本
初心者の方は、すべてのサイズを無理に使う必要はありません。まずはmdとlgを中心に考えると分かりやすいです。
画面を縮めたり広げたりしながら、「ここで見づらくなる」という位置を基準に選ぶのがおすすめです。
8. ブレークポイント設計で失敗しないコツ
細かく切り替えすぎると、コードが複雑になります。まずはシンプルに作り、必要になったら追加するのが安全です。
Bootstrapの決められた区切りを使うことで、安定したレスポンシブ設計ができます。
【60分集中】CSSを1行も書かない！？Bootstrap 5ユーティリティクラス活用で開発工数を50%削減
「スピード」が武器になる。Bootstrap 5で商用クオリティのWebサイトを高速構築。
本講座では、世界シェアNo.1のフレームワークBootstrap 5を使いこなし、ゼロからレスポンシブサイトを組み上げる「現場最速のワークフロー」を学びます。単なる導入に留まらず、ユーティリティクラスを活用した効率化と、実務で必須となるカスタマイズ技法を60分で完全習得します。
具体的なワークショップ内容と環境
【つくるもの】
モダンなランディングページ（LP）やダッシュボードのプロトタイプを作成します。ナビゲーション、ヒーローセクション、カードレイアウト、フッターなど、Bootstrapのコンポーネントを組み合わせて「一瞬で形にする」感動を体験してください。
【開発環境】
VS CodeにBootstrap 5専用のSnippet（補完機能）を導入し、手入力を最小限にする環境を構築。最新のCDN利用法や、表示速度（Core Web Vitals）を意識した最適な読み込み設定など、プロの初期設定を伝授します。
この60分で得られる3つの革新スキル
スマホ・タブレット・PCでレイアウトを自由自在に切り替える「ブレイクポイント」の極意を学びます。
CSSを1行も書かずに、マージン・パディング・カラーを制御。開発工数を半分以下にする実戦術を習得します。
「Bootstrap感」を消し、独自のブランドイメージに合わせるための、上書きの作法とデザインの整え方を伝授します。
※本講座は、HTML/CSSの基本を理解した方向けの「実践加速講座」です。制作会社のコーダーや副業フリーランスとして「案件の回転率」を上げ、市場価値を最大化させたい方をモクモクがバックアップします。
Bootstrap 5を楽しみながら、一緒に学びましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
