レスポンシブデザインの要！ブレイクポイントの決め方とCSSの書き方ガイド

よく使うブレイクポイントの例（スマホ・タブレット・PC）

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

生徒

「スマホで見ると、文字が小さすぎたり画面からはみ出したりしてしまいます。どうやって直せばいいですか？」

先生

「それはブレイクポイントを設定することで解決できます。画面の横幅に合わせてデザインを切り替える境目のことですよ。」

生徒

「ブレイクポイントって、具体的に何ピクセルに設定するのが一般的なんですか？」

先生

「よく使われるスマホ、タブレット、パソコンの数値があります。具体的な書き方と一緒に解説しますね！」

1. ブレイクポイントとは何かを初心者向けに解説

ブレイクポイントとは、ウェブサイトのデザインが切り替わる「境界線の数値」のことです。今の時代、私たちはスマートフォン、タブレット、ノートパソコン、大きなデスクトップモニターなど、さまざまな大きさの画面でインターネットを楽しみます。しかし、パソコン用の大きな画面に向けて作ったデザインをそのままスマホで見ると、文字が豆粒のように小さくなったり、逆に画像が巨大すぎて画面を突き抜けたりしてしまいます。

そこで、ＣＳＳというプログラミング言語を使って、「画面の横幅が〇〇ピクセルになったら、このデザインに変えてください」という命令を出します。この切り替え地点となる数値がブレイクポイントです。これを正しく設定することで、どんな端末で見ても美しく読みやすい「レスポンシブデザイン」を実現することができます。プログラミング未経験の方でも、まずは「画面の幅によってルールを変えるための仕切り」だとイメージすれば大丈夫です。

2. スマートフォン向けのブレイクポイントと設定のコツ

最近のウェブサイト制作では、まずはスマートフォンでの見え方を最優先に考える「モバイルファースト」という手法が主流です。スマホの画面幅は機種によって多少異なりますが、一般的には横幅が４８０ピクセル以下の範囲をスマホ用として扱うことが多いです。以前はもっと狭い数値もありましたが、最近のスマホは画面が大型化しているため、少し余裕を持った数値で設計するのがコツです。

スマホ用のデザインでは、指で操作しやすいようにボタンを大きくしたり、文字を一行に詰め込みすぎないように工夫したりします。ブレイクポイントを設定する際は、まずスマホ用の基本スタイルを書き、そこから画面が大きくなった時の設定を追加していくという流れが最もスムーズで、プログラムの無駄も少なくなります。これがモダンなウェブ制作の基本ステップとなります。


<style>
/* スマホ向けの基本設定 */
.box-sample {
    background-color: #ffe0e0;
    padding: 20px;
    text-align: center;
    width: 100%;
}
</style>

<div class="box-sample">
    <p>これはスマホで見た時のデザインです。</p>
    <i class="bi bi-phone"></i>
</div>

ブラウザ表示

3. タブレット向けによく使われる数値の例

タブレット端末、例えばアイパッドなどを対象にする場合、ブレイクポイントは７６８ピクセルが非常によく使われます。これは多くのタブレットが縦向きにした時の幅に近い数値だからです。スマホとパソコンの中間サイズであるタブレットは、スマホ用の縦長レイアウトを少し広げて、横に要素を並べ始めたり、サイドバーを表示させたりするタイミングとして最適です。

７６８ピクセルから上の範囲をタブレット用、または小さなノートパソコン用として扱うことで、画面の余白を有効活用できるようになります。ただし、最近はタブレットを横向きにして使う人も多いため、次に説明するパソコン用のブレイクポイントとの兼ね合いも重要になってきます。基本的には、この７６８ピクセルを一つの大きな「分岐点」として覚えておくと、設計が非常に楽になります。


<style>
.tab-box {
    background-color: #e0f7fa;
    padding: 20px;
    border: 2px solid #00acc1;
}

/* 画面幅が768px以上になったら適用 */
@media (min-width: 768px) {
    .tab-box {
        background-color: #b2ebf2;
        font-weight: bold;
    }
}
</style>

<div class="tab-box">
    <p>768ピクセル以上の幅になると背景色が濃くなります。</p>
    <i class="bi bi-tablet"></i>
</div>

ブラウザ表示

4. パソコン用のデザインに切り替えるブレイクポイント

パソコンの大きなモニターで見るとき、横幅を無制限に広げてしまうと、文章が一行に長く伸びすぎてしまい、視線の移動が大変で読みづらくなります。そのため、一般的には１０２４ピクセルや１２００ピクセルあたりをパソコン用のブレイクポイントとして設定し、コンテンツの最大幅を制限するのが一般的です。これにより、どんなに大きな画面で見ても、中央に読みやすい幅で内容が収まるようになります。

また、パソコンではマウス操作が基本となるため、スマホでは隠していたメニューを最初から表示させたり、写真と説明文を左右に並べたりと、ダイナミックなレイアウト変更を行います。この「横並びにする」という処理を行うタイミングが、まさにこのパソコン用ブレイクポイントの役割です。広い画面を贅沢に使うための指示を、ここに追加していきましょう。


<style>
.pc-layout {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 画面幅が1024px以上になったら横並びにする */
@media (min-width: 1024px) {
    .pc-layout {
        flex-direction: row;
        justify-content: space-around;
        background-color: #f5f5f5;
    }
}

.item {
    padding: 15px;
    background-color: #fff;
    border: 1px solid #ccc;
}
</style>

<div class="pc-layout">
    <div class="item">メニュー1</div>
    <div class="item">メニュー2</div>
    <div class="item">メニュー3</div>
</div>

ブラウザ表示

5. メディアクエリの基本的な書き方と仕組み

ブレイクポイントを実際にプログラミングコードとして書くには、「メディアクエリ」という構文を使います。これは、ＣＳＳの中に書く特殊な条件式のようなものです。例えば「アットマークメディア（ミンウィズ：７６８ピクセル）」と書くと、ブラウザは「もし今、画面の幅が７６８ピクセル以上だったら、この中身を実行してね」と理解してくれます。この仕組みがあるおかげで、一つのファイルの中に、スマホ用、タブレット用、パソコン用のルールを同居させることができるのです。

メディアクエリの中には、色を変えたり、フォントの大きさを変えたり、要素を非表示にしたりと、あらゆるＣＳＳの命令を書くことができます。初心者がよくやってしまう間違いは、中括弧を閉じ忘れたり、命令を書く順番を間違えたりすることです。ＣＳＳは「下に書いたものが優先される」というルールがあるため、スマホ用を一番上に書き、その下に大きな画面用の設定を順番に付け足していくのが正しい書き方です。

6. なぜ複数のブレイクポイントが必要なのか

「スマホ用とパソコン用の２種類だけで十分ではないか」と思うかもしれません。しかし、実際にはその中間にある「大きなスマホ」や「小さなノートパソコン」など、デバイスの多様化が進んでいます。もし２種類しか設定がないと、中間のサイズの画面で見た時に、文字が不自然に大きすぎたり、余白がガタガタになったりしてしまいます。複数のブレイクポイントを用意するのは、そうした「微妙なサイズ」でも快適に閲覧してもらうための配慮なのです。

ユーザーがストレスを感じるサイトは、すぐにブラウザを閉じられてしまいます。検索エンジンのグーグルも、ユーザーが快適に使えるサイトを高く評価するため、細やかなレスポンシブ対応はＳＥＯ対策としても非常に重要です。まずは基本の３パターンから始め、慣れてきたら自分のデザインに合わせて細かく数値を調整していくのが上達への近道です。

7. メディアクエリを使った背景画像の切り替え例

ブレイクポイントはレイアウトだけでなく、画像の切り替えにも便利です。スマホでは縦長の画像を見せたいけれど、パソコンでは横に長いダイナミックな写真を使いたい、ということがよくあります。このような場合もメディアクエリを使えば、画面サイズに応じて読み込む画像を変更することが可能です。これにより、スマホ利用者の通信量を節約しつつ、パソコン利用者には高画質な体験を提供できるようになります。

このように、単にサイズを合わせるだけでなく、デバイスごとの利用シーンを想像して最適な素材を出し分けるのが、プロのウェブデザイナーやエンジニアの仕事です。未経験の方でも、この「出し分け」の発想を持つだけで、サイトのクオリティは格段に上がります。以下のコードで、実際にどのように切り替えるかのイメージを掴んでみましょう。


<style>
.image-change {
    width: 100%;
    height: 200px;
    background-image: url('/img/sample120-120.jpg');
    background-size: cover;
}

/* 画面幅が768px以上になったら別の画像（または表示方法）にする */
@media (min-width: 768px) {
    .image-change {
        background-image: url('/img/sample150-100.jpg');
        height: 300px;
    }
}
</style>

<div class="image-change"></div>
<p>画面を広げると、表示される画像や高さが変わります。</p>

ブラウザ表示

8. ブレイクポイントを決めるときの注意点と最新トレンド

最後に、数値を決めるときに気をつけるべきポイントをお話しします。実は、絶対にこのピクセル数でなければならないという正解はありません。大切なのは「自分のデザインが崩れる場所」を見つけることです。ブラウザの幅をゆっくり狭めていったときに、文字が重なったり、画像が小さくなりすぎて見えにくくなったりした場所。そこが、あなたにとっての最適なブレイクポイントになります。

また、最近では「コンテナクエリ」という、画面全体ではなく部品（コンポーネント）の幅に合わせてデザインを変える新しい技術も普及し始めています。しかし、まずは基本となる画面全体のブレイクポイントをマスターすることが先決です。基礎をしっかり固めることで、どんな新しい技術が出てきても対応できる応用力が身につきます。一歩ずつ、パソコンやスマホでの見え方を確認しながら、丁寧なサイト作りを心がけていきましょう。

2026年最新スキルアップ・実践セミナー