タブレット用ブレークポイントは何pxが標準？現在のCSSレスポンシブ設計ガイド

2026年07月08日

タブレット用ブレークポイントは、現在の実務では 768px以上をタブレット開始、1024px以上をPC寄りの開始 と考えるのが扱いやすいです。つまり、スマホは通常CSSで作り、768px以上でタブレット向けの余白やカード列数を調整し、1024px以上で2カラム、サイドバー、PC用ナビゲーションなどを始める設計です。

ただし、これは絶対的な規格ではありません。Bootstrapでは md が768px以上、lg が992px以上、Tailwind CSSでは md が768px以上、lg が1024px以上、Material UIでは sm が600px以上、md が900px以上です。つまり、現在の標準的な考え方は「768pxだけをタブレットと決める」のではなく、768px・900px・1024pxを目的に応じて使い分けることです。BootstrapとTailwind CSSはどちらも768pxを中間サイズの重要な境界として使っており、Tailwind CSSでは1024pxが大きめ画面の境界として使われています。

1. タブレット用ブレークポイントとは

タブレット用ブレークポイントとは、スマートフォン向けの1カラム表示から、タブレット向けの少し広い表示へ切り替えるためのCSS上の基準値です。画面幅がある値を超えたときに、カードを2列にしたり、画像とテキストを横並びにしたり、余白を広げたり、フォームを2列にしたりします。CSSでは主に @media (min-width: 768px) のようなメディアクエリを使って指定します。

タブレットはスマートフォンより広い一方で、PCほど余裕があるわけではありません。そのため、タブレット用ブレークポイントでは、いきなりPCと同じレイアウトにするのではなく、スマホ表示を少し広げるような中間設計が重要です。MDNでも、メディアクエリは画面幅などの条件に応じてCSSを適用する仕組みとして説明されています。

1.1 タブレット表示の役割

タブレット表示の役割は、スマホより広い画面を活かしながら、PCほど情報を詰め込みすぎないことです。たとえば、スマホではカードを1列にし、タブレットでは2列にすることで、情報量を増やしながらも読みやすさを保てます。画像とテキストも、タブレット以上で横並びにすると、LPやサービス紹介ページで見やすくなる場合があります。

一方で、本文とサイドバーの2カラムは、タブレット縦向きでは狭くなることがあります。タブレットだからすべて横並びにするのではなく、本文、画像、カード、フォーム、ナビゲーションなど、それぞれの要素に合わせて切り替える必要があります。

1.2 端末名だけで決めない理由

タブレット用ブレークポイントを決めるとき、端末名だけで判断するのは危険です。タブレットには縦向きと横向きがあり、縦向きでは768px前後、横向きでは1024px前後になることが多いですが、すべての端末が同じ幅ではありません。さらに、ブラウザの表示領域やOSの設定によっても実際の見え方は変わります。

そのため、タブレット用ブレークポイントは「iPadだから何px」と決めるより、コンテンツが自然に見えるかどうかで決める方が安全です。カードが潰れていないか、本文が読みやすいか、ナビゲーションが折り返していないかを確認して、必要な幅で切り替えるのが実務的です。

1.3 タブレットでは中間設計が重要

タブレットは、スマホとPCの中間にある画面です。そのため、スマホ用の縦並びを少し広げるだけでよい場合もあれば、PC用の横並びに近づけた方がよい場合もあります。たとえば、カード一覧は768px以上で2列にしやすいですが、記事本文とサイドバーは1024px以上まで待つ方が読みやすいです。

この中間設計を無視して、768px以上ですべてPC表示にすると、タブレット縦向きで窮屈なレイアウトになりやすくなります。タブレット対応では、スマホからPCへ一気に切り替えるのではなく、段階的に広げる考え方が大切です。

1.4 タブレット対応で見るべき要素

タブレット用ブレークポイントを決めるときは、本文、カード、画像、フォーム、ナビゲーション、サイドバーを重点的に確認します。特にSEO記事では本文幅、LPではファーストビュー、ECサイトでは商品カード、管理画面ではテーブルやカードグリッドが重要です。

ブレークポイントは、画面幅だけで決めるものではありません。実際のコンテンツを入れた状態で、どこから2列にしても読みやすいか、どこから余白を増やすべきか、どこからPC用ナビゲーションにしてもよいかを確認しながら決めます。

2. 現在の標準は768pxと1024px

現在のタブレット用ブレークポイントで最も使いやすい基準は、768px以上をタブレット開始、1024px以上をPC寄り開始 とする方法です。768pxはタブレット縦向きの目安として使いやすく、1024pxはタブレット横向きや小型PCを意識した切り替えに向いています。

Bootstrapでは768px以上が md、992px以上が lg として扱われ、Tailwind CSSでは768px以上が md、1024px以上が lg として扱われます。フレームワークごとに少し差はありますが、768px前後と1024px前後が重要な境界である点は共通しています。

2.1 768pxはタブレット開始の目安

768pxは、タブレット向けの最初のブレークポイントとして非常によく使われます。この幅では、スマホより画面に余裕があるため、カードを2列にしたり、セクション余白を広げたり、画像とテキストを横並びにしたりできます。

ただし、768pxで本文とサイドバーを横並びにすると、本文幅が狭くなりやすいです。そのため、768pxは「軽いタブレット対応」の開始地点と考え、PCと同じ本格的な2カラムは1024px以上で行うのが安全です。

2.2 1024pxはPC寄りの目安

1024pxは、タブレット横向きや小型PCを意識したブレークポイントです。この幅になると、本文とサイドバーを横並びにしたり、ナビゲーションをPC用の横並びにしたり、カードを3列にしたりしやすくなります。

SEO記事やブログでは、1024px以上で2カラムにする設計が特に使いやすいです。スマホとタブレットでは本文を1カラムで読みやすく保ち、1024px以上でサイドバーを横に置くと、本文の可読性と補足情報の表示を両立できます。

2.3 900pxは中間値として便利

900pxは、タブレット縦向きより少し広く、1024pxより少し狭い中間値です。Material UIでは md が900pxで、Webアプリや管理画面のレスポンシブ設計では使いやすい値です。

たとえば、ダッシュボードカードを3列にする、フォームを2列にする、サイドパネルを一部表示するなど、アプリUIでは900pxがちょうどよい場合があります。一方、文章中心のSEO記事では900pxでも2カラムが窮屈な場合があるため、ページの種類で使い分けます。

2.4 基本設計の考え方

自作CSSで迷う場合は、スマホを通常CSS、768px以上をタブレット、1024px以上をPC、1280px以上を広いPCとして扱うと分かりやすいです。この流れは、ブログ、LP、企業サイト、サービスサイトなど多くのWebサイトに対応しやすいです。

Webアプリや管理画面の場合は、600px、900px、1200pxのようなMaterial UI寄りの値を使うのも自然です。重要なのは、プロジェクト内で基準を統一し、同じような目的に対して中途半端な値を増やさないことです。

3. タブレット標準幅の考え方

タブレットの標準幅は、単純に1つの数値で決めるより、768px〜1024px前後の範囲として考えるのが現実的です。縦向きでは768px前後、横向きでは1024px前後になることが多いため、この2つの幅を中心に設計すると自然なレスポンシブ対応ができます。

ただし、現在はタブレットとノートPC、折りたたみ端末、大型スマホの境界が曖昧になっています。そのため、タブレット用ブレークポイントも「端末カテゴリ」だけではなく、「コンテンツが自然に表示できる幅」を基準に決めるべきです。

3.1 縦向きタブレット

縦向きタブレットでは、幅が768px前後になることが多いため、スマホより広いけれどPCほど広くない画面として扱います。この幅では、カード2列や余白拡張はしやすいですが、本文とサイドバーの横並びは慎重に判断する必要があります。

たとえば、本文幅を十分に確保したい記事ページでは、768px以上でも1カラムを維持し、左右余白だけを広げる方が読みやすいです。一方、カード一覧やギャラリーは768px以上で2列にすると、画面を効率よく使えます。

3.2 横向きタブレット

横向きタブレットでは、1024px前後の幅になることが多く、PCに近いレイアウトを使いやすくなります。この幅では、サイドバー付きの2カラム、横並びナビゲーション、画像とテキストの横並び、大きめのグリッドなどを検討できます。

ただし、タブレット横向きでも高さはPCより少ない場合があります。ファーストビューに大きな画像や見出しを入れるLPでは、横幅だけでなく縦方向の見え方も確認する必要があります。

3.3 大型スマホとの境界

大型スマホや折りたたみ端末では、600px以上の幅になることもあります。そのため、600px前後を小型タブレットや大きめスマホ向けの軽い調整として使うことがあります。Material UIでは600pxが sm として使われています。

この幅では、いきなり本格的なタブレットレイアウトにするより、余白やボタン配置を少し調整する程度が自然です。カード2列やフォーム2列を始める場合も、実際のコンテンツが窮屈にならないか確認します。

3.4 小型PCとの境界

1024px以上になると、小型PCやタブレット横向きとして扱いやすくなります。Tailwind CSSでは1024pxが lg として使われ、PC寄りのレイアウトを始める境界として分かりやすいです。

この幅では、2カラム、横並びナビゲーション、サイドバー、カード3列などの本格的なレイアウト変更がしやすくなります。自作CSSでも、1024px以上をPC開始の基準にすると、多くのページで安定しやすいです。

4. タブレット向けブレークポイント表

タブレット向けのブレークポイントは、600px、768px、900px、1024px、1200pxのように段階的に考えると整理しやすくなります。ただし、すべてを必ず使う必要はありません。基本は768pxと1024pxを軸にし、アプリUIや細かい調整が必要な場合に900pxを追加します。

以下の表は、タブレット対応でよく使う幅と用途の目安です。プロジェクトごとに調整して構いませんが、まずこの表を基準にすると、不要なブレークポイントを増やさずに設計できます。

幅の目安主な扱い実務での使い方
600px以上大きめスマホ・小型タブレット余白拡張、ボタン横並び、一部フォーム調整
768px以上タブレット開始カード2列、画像とテキスト横並び、余白拡張
900px以上中間タブレット・アプリUI管理画面、フォーム、グリッド調整
1024px以上タブレット横向き・小型PC2カラム、サイドバー、PCナビゲーション
1200px以上通常PCコンテナ最大幅、余白、複数カラム調整

4.1 600px以上の扱い

600px以上は、スマホより少し広い画面として扱います。大きめスマホ、小型タブレット、横向きスマホなどが入りやすい幅で、余白を広げたり、ボタンを横並びにしたりする軽い調整に向いています。

ただし、600px以上で2カラムや複雑なグリッドを始めると、狭く感じる場合があります。特に文章中心のページでは、600pxはまだスマホ寄りとして考えた方が安全です。

4.2 768px以上の扱い

768px以上は、タブレット開始として最も使いやすい幅です。カード2列、画像とテキストの横並び、フォームの一部2列化、セクション余白の拡張などに向いています。

この幅では、画面に少し余裕があるため、スマホより情報量を増やせます。ただし、サイドバー付き2カラムなど、幅を大きく使うレイアウトはまだ慎重に判断します。

4.3 900px以上の扱い

900px以上は、アプリUIや管理画面で使いやすい中間値です。Material UIが md を900pxとしているため、ReactやMUIを使うプロジェクトでは自然に採用しやすいです。

カードグリッドを3列にする、ダッシュボードの横並びを増やす、フォームの配置を広げるなど、コンポーネントベースのUIに向いています。文章中心のページでは必須ではありません。

4.4 1024px以上の扱い

1024px以上は、PC寄りのレイアウトを開始する目安です。Tailwind CSSでは lg が1024pxで、大きい画面向けの切り替えに使われます。

SEO記事では2カラム、LPでは大きな横並び、ECサイトでは商品カード3〜4列、ナビゲーションでは横並びメニューなどを始めやすい幅です。タブレット横向きから小型PCまで自然に対応できます。

5. 768px以上で変えるべきもの

768px以上では、スマホの縦並びを少し広げる設計が向いています。いきなりPCのように多くの要素を横並びにするのではなく、カードを2列にする、画像とテキストを横に並べる、余白を少し広げるなど、読みやすさを保ったまま情報量を増やします。

この幅では、スマホより画面が広いため、余白を増やして見た目に余裕を出せます。ただし、本文やフォームなど、幅が必要な要素は無理に横並びにせず、読みやすさを優先します。

5.1 カードを2列にする

カード一覧は、768px以上で2列にしやすい代表的な要素です。スマホでは1列で読みやすくし、タブレットでは2列にすることで、情報を効率よく表示できます。関連記事、サービス一覧、実績一覧、ブログカードなどでよく使われます。

ただし、カード内の文章が長い場合や画像が大きい場合は、2列でも窮屈になることがあります。その場合は、カードの最小幅や余白を見直し、必要なら2列化を900px以上に遅らせます。

5.2 余白を広げる

768px以上では、セクションの左右余白や上下余白を広げると、スマホよりゆったりした印象になります。スマホでは左右20px程度、タブレットでは32px程度に広げる設計がよく使われます。

余白を広げるだけでも、タブレット表示はかなり見やすくなります。無理に列数を増やさなくても、余白設計を調整するだけで画面幅に合った見た目を作れます。

5.3 画像とテキストを横並びにする

LPやサービス紹介ページでは、768px以上で画像とテキストを横並びにすることがあります。スマホでは画像が上、テキストが下の縦並びにし、タブレット以上では左右に並べることで、セクションの見た目に変化を出せます。

ただし、画像とテキストの両方に十分な幅が必要です。見出しが長い場合や画像が大きい場合は、768pxではまだ縦並びの方が自然なこともあります。

5.4 768px以上のコード例

ファイル名: style.css｜言語: CSS｜用途: 768px以上でカードを2列にする

 

.card-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .card-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

 

6. 900px以上で変えるべきもの

900px以上は、タブレットとPCの中間として使いやすいブレークポイントです。特に管理画面やWebアプリでは、600px、900px、1200pxという区切りが自然です。Material UIでも md が900pxとして使われており、コンポーネントベースのUIでは実務的な値です。

900pxでは、フォームやカードグリッドを少し広げる、ダッシュボードの情報量を増やす、2列から3列へ増やす、といった調整が向いています。ただし、記事本文とサイドバーの2カラムは900pxでは狭い場合があるため、文章中心ページでは1024px以上を使う方が安全です。

6.1 管理画面で使いやすい理由

管理画面では、カード、グラフ、テーブル、フォーム、サイドメニューなど多くのUIが並びます。768pxではまだ余裕が少なく、1024pxまで待つと表示切り替えが遅すぎる場合があります。その中間として900pxが使いやすいです。

たとえば、768px以上で2列、900px以上で3列、1200px以上で4列のように、ダッシュボードカードを段階的に増やす設計ができます。アプリUIでは情報の密度が重要なので、900pxは便利な調整ポイントになります。

6.2 フォームで使いやすい理由

フォームでは、スマホは1カラム、タブレット以上で2カラムにすることがあります。900px以上なら、入力欄を横並びにしてもある程度の幅を確保しやすくなります。

ただし、メールアドレスや住所、問い合わせ内容のような長い入力欄は、2カラムにせず横幅いっぱいにする方が入力しやすいです。フォームでは見た目の整列だけでなく、入力ミスを減らすことも重要です。

6.3 グリッド調整に使いやすい理由

カードやダッシュボードでは、900px以上で列数を増やすと自然な場合があります。768pxでは2列、900px以上で3列、1200px以上で4列にすると、画面幅を効率よく使えます。

ただし、列数を増やしすぎるとカード1枚の幅が狭くなり、内容が読みにくくなります。グリッドでは、列数だけでなくカードの最小幅を確認することが重要です。

6.4 900px以上のコード例

ファイル名: style.css｜言語: CSS｜用途: 900px以上で管理画面カードを3列にする

 

.dashboard-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 600px) {
  .dashboard-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .dashboard-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

 

7. 1024px以上で変えるべきもの

1024px以上では、タブレット横向きや小型PCに近い画面幅になるため、本格的なPC向けレイアウトを始めやすくなります。2カラム、横並びナビゲーション、サイドバー表示、カード3列、画像とテキストの大きな横並びなどが候補になります。

ただし、1024pxでも広いPCほど余裕があるわけではありません。サイドバーやナビゲーションを表示するときは、本文やメインコンテンツが狭くなりすぎないか確認する必要があります。

7.1 2カラムを始める

SEO記事やブログでは、1024px以上で本文とサイドバーを2カラムにするのが安全です。サイドバー幅を300px、カラム間の余白を32pxにしても、本文幅をある程度確保できます。

768pxや900pxで2カラムにすると、本文が細くなりすぎる場合があります。文章を読むページでは、横並びよりも本文の読みやすさを優先するべきです。

7.2 PCナビゲーションを始める

ナビゲーションも1024px以上でPC向け横並びにしやすい要素です。メニュー項目が多い場合、768pxで横並びにすると折り返しや詰まりが起きることがあります。

項目数が少ないサイトなら768px以上でも問題ありませんが、企業サイトやECサイトのようにメニューが多い場合は、1024px以上で横並びにする方が安定します。

7.3 サイドバーを表示する

サイドバーは、関連記事、カテゴリー、プロフィール、CTA、広告などを置くために使われます。PCでは便利ですが、スマホやタブレット縦向きでは本文を圧迫しやすいため、1024px以上から横に表示するのがおすすめです。

スマホや768px前後のタブレットでは、サイドバーを本文の下に表示すると自然です。HTML上でも本文を先に書いておくと、スマホで読者がすぐ本文に入れます。

7.4 1024px以上のコード例

ファイル名: style.css｜言語: CSS｜用途: 1024px以上で記事ページを2カラムにする

 

.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 20px;
}

.sidebar {
  margin-top: 32px;
}

@media (min-width: 1024px) {
  .page {
    display: flex;
    gap: 32px;
  }

  .main {
    flex: 1;
    min-width: 0;
  }

  .sidebar {
    flex: 0 0 300px;
    margin-top: 0;
  }
}

 

8. Bootstrap基準のタブレット設計

Bootstrapを使う場合は、Bootstrapのブレークポイントに合わせるのが自然です。Bootstrap 5.3では、sm が576px以上、md が768px以上、lg が992px以上、xl が1200px以上、xxl が1400px以上です。Bootstrapのグリッドはmin-widthベースで、指定したブレークポイント以上にスタイルが適用されます。

Bootstrap基準では、タブレット向けは768px以上の md、PC寄りは992px以上の lg として考えます。自作CSSを追加する場合も、Bootstrapと同じ値に合わせると、グリッドやユーティリティクラスとのズレが少なくなります。

8.1 mdは768px以上

Bootstrapの md は768px以上で、タブレット向けの開始地点として使いやすいです。たとえば、col-md-6 は768px以上で2列にするような指定に使えます。

Bootstrapを使っているサイトでは、タブレット対応をmdから始めるのが分かりやすいです。カードやフォーム、グリッドの切り替えに向いています。

8.2 lgは992px以上

Bootstrapの lg は992px以上で、PC寄りのレイアウトに使いやすいです。Tailwind CSSの1024pxより少し早いタイミングでPC向け表示を始めるイメージです。

Bootstrapのグリッドに合わせて2カラムやナビゲーションを切り替える場合は、992pxを使うと一貫性が出ます。ただし、本文幅を重視するページでは1024px以上に近い感覚で調整しても問題ありません。

8.3 自作CSSも合わせる

Bootstrapを使っているのに、自作CSSだけ独自に800pxや1000pxで切り替えると、Bootstrapのグリッドとタイミングがずれることがあります。すると、ある幅ではグリッドだけ変わり、別の幅で自作CSSが変わるため、表示が不自然になりやすいです。

Bootstrapサイトでは、できるだけBootstrapのブレークポイントに合わせてCSSを設計する方が保守しやすいです。例外値を使う場合は、理由をコメントで残します。

8.4 Bootstrap基準のコード例

ファイル名: style.css｜言語: CSS｜用途: Bootstrapに合わせたタブレット・PC切り替え

 

.article-grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 768px) {
  .article-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .article-layout {
    display: flex;
    gap: 32px;
  }
}

 

9. Tailwind CSS基準のタブレット設計

Tailwind CSS基準では、md が768px以上、lg が1024px以上です。Tailwindはモバイルファーストの考え方を採用しており、接頭辞なしのクラスが基本表示、md: や lg: のような接頭辞付きクラスが指定幅以上で適用されます。

Tailwindを使っていない自作CSSでも、この考え方は非常に使いやすいです。スマホを通常CSS、768px以上をタブレット、1024px以上をPC、1280px以上を広いPCとして考えれば、レイアウトの段階が分かりやすくなります。

9.1 mdは768px以上

Tailwind CSSの md は768px以上です。カードを2列にする、セクション余白を広げる、画像とテキストを横並びにするなど、タブレット向けの切り替えに使いやすい値です。

自作CSSでも @media (min-width: 768px) をタブレット開始として使えば、Tailwindの感覚に近い設計になります。デザイナーや開発者がTailwindに慣れている場合、共有しやすい基準です。

9.2 lgは1024px以上

Tailwind CSSの lg は1024px以上です。ここからPC寄りのレイアウトとして、2カラム、ナビゲーション横並び、サイドバー表示、カード3列などを始めると自然です。

SEO記事やブログでは、1024px以上で2カラムにする設計が特に相性よく使えます。スマホとタブレットでは本文を優先し、PC以上で補足情報を横に出せます。

9.3 Tailwind基準は自作CSSでも使いやすい

Tailwindを使っていなくても、768px、1024px、1280px、1536pxという流れは現代的なWeb制作で使いやすいです。値が覚えやすく、スマホ、タブレット、PC、広いPCを段階的に分けられます。

特にLPやサービスサイトでは、768pxで画像テキストを横並び、1024pxでコンテナ幅やナビを調整、1280pxで余白を広げるような設計がしやすいです。

9.4 Tailwind風のCSS例

ファイル名: style.css｜言語: CSS｜用途: Tailwind基準に近い768px・1024px設計

 

.feature {
  display: grid;
  gap: 24px;
}

@media (min-width: 768px) {
  .feature {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

@media (min-width: 1024px) {
  .feature {
    gap: 48px;
  }
}

 

10. Material UI基準のタブレット設計

Material UI基準では、sm が600px以上、md が900px以上、lg が1200px以上です。BootstrapやTailwind CSSとは少し違い、768pxではなく900pxが中間サイズとして使われます。Material UIはReactアプリや管理画面で使われることが多いため、UIコンポーネントの配置を段階的に変える設計と相性がよいです。

Material UIを使うプロジェクトでは、自作CSSやカスタムコンポーネントのブレークポイントもMUIの値に合わせると一貫性が出ます。特に、600px、900px、1200pxの区切りはフォーム、カード、ダッシュボード、テーブルの調整に使いやすいです。

10.1 smは600px以上

Material UIの sm は600px以上です。この幅は、大きめスマホや小型タブレットを意識した軽い調整に向いています。余白を広げたり、ボタンを横並びにしたり、一部のカードを2列にしたりできます。

ただし、600px以上で複雑なレイアウトにするのは早い場合があります。スマホ寄りの表示を少し広げる程度に使うと自然です。

10.2 mdは900px以上

Material UIの md は900px以上です。アプリUIでは、900px以上でカードを3列にしたり、サイドパネルを表示したり、フォームを広げたりする設計が使いやすいです。

文章中心のSEO記事では900pxで2カラムにするかどうかは慎重に判断します。本文が狭くなるなら、1024px以上まで待つ方が読みやすいです。

10.3 lgは1200px以上

Material UIの lg は1200px以上です。通常PC向けの広い表示に使いやすく、ダッシュボードや複雑な管理画面で情報量を増やすタイミングとして向いています。

1200px以上では、カード列数を増やす、サイドナビを常時表示する、コンテンツ幅を広げるなどの調整ができます。アプリでは大きい画面を効率よく使う設計が重要です。

10.4 Material UI風のCSS例

ファイル名: style.css｜言語: CSS｜用途: MUI基準の600px・900px・1200px設計

 

.app-grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 600px) {
  .app-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .app-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

@media (min-width: 1200px) {
  .app-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

 

11. SEO記事・ブログ向けのタブレット設定

SEO記事やブログでは、タブレットだからといって必ず2カラムにする必要はありません。文章を読むページでは、本文の読みやすさが最優先です。タブレット縦向きでは、本文とサイドバーを横並びにすると、本文幅が狭くなって読みにくい場合があります。

そのため、SEO記事では768px以上で余白や関連記事カードを調整し、1024px以上で本文とサイドバーを2カラムにする設計がおすすめです。スマホとタブレットでは本文を優先し、PC以上で補足情報を横に置くと、検索流入ユーザーにも読みやすいページになります。

11.1 768pxでは余白を広げる

SEO記事では、768px以上で本文の左右余白を広げると読みやすくなります。スマホでは20px前後、タブレットでは32px前後の余白にすると、画面幅に合った見た目になります。

この段階では、本文自体は1カラムのままで問題ありません。タブレットでは本文をゆったり読めることを優先します。

11.2 関連記事カードを2列にする

記事下の関連記事やおすすめ記事カードは、768px以上で2列にしやすいです。本文とサイドバーを2カラムにするよりも、カード一覧の方が早い段階で複数列化しやすいです。

ただし、カードのタイトルが長い場合は、2列でも窮屈になることがあります。実際の記事タイトルを入れて確認することが重要です。

11.3 1024pxでサイドバーを表示する

本文とサイドバーの2カラムは、1024px以上で始めるのがおすすめです。サイドバーに300px程度を確保しても、本文幅をある程度残せるため、読みやすさを保ちやすくなります。

スマホやタブレットではサイドバーを本文の下に表示し、PCでは横に置く構成が自然です。HTMLでも本文を先に書くと、スマホで読者がすぐ本文に入れます。

11.4 SEO記事向けコード例

ファイル名: style.css｜言語: CSS｜用途: タブレットでは余白拡張・PCで2カラムにするSEO記事

 

.article-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 20px;
}

@media (min-width: 768px) {
  .article-page {
    padding: 40px 32px;
  }
}

@media (min-width: 1024px) {
  .article-page {
    display: flex;
    gap: 32px;
  }

  .article-main {
    flex: 1;
    min-width: 0;
  }

  .article-sidebar {
    flex: 0 0 300px;
  }
}

 

12. LP向けのタブレット設定

LPでは、タブレット向けブレークポイントを考えるときに、ファーストビューとCTAの見え方が重要です。スマホでは縦並びにし、タブレット以上で画像とテキストを横並びにすると、視覚的に分かりやすいセクションを作れます。ただし、画像が大きすぎる場合や見出しが長い場合は、768pxでも縦並びの方が自然なことがあります。

LPでは、見た目のインパクトと読みやすさのバランスが大切です。768px以上で横並び、1024px以上で余白をさらに広げる、という段階的な設計にすると、タブレットとPCの両方に対応しやすくなります。

12.1 ファーストビューを見る

LPのファーストビューでは、見出し、説明文、画像、CTAボタンが重要です。タブレットでは画面幅は広くても高さが限られる場合があるため、横幅だけでなく縦方向の見え方も確認します。

見出しが長すぎて画像やCTAが下に押し出される場合は、タブレットでも縦並びを維持した方がよいことがあります。レイアウト変更は、ユーザーが最初に何を見るべきかを基準に決めます。

12.2 画像とテキストを横並びにする

サービス紹介や特徴セクションでは、768px以上で画像とテキストを横並びにすると見やすくなる場合があります。画像でイメージを伝え、横に説明文を置くことで、PCに近い情報設計ができます。

ただし、画像とテキストの両方に十分な幅が必要です。テキストが長い場合は、900pxや1024px以上で横並びにする方が自然なこともあります。

12.3 CTAの位置を確認する

LPではCTAボタンが重要です。タブレット表示で画像や見出しが大きすぎると、CTAが下に押し出され、ユーザーがすぐ行動できない場合があります。

ブレークポイントを調整するときは、CTAが見やすい位置にあるか、ボタンが押しやすいサイズか、周囲の余白が十分かを確認します。

12.4 LP向けコード例

ファイル名: style.css｜言語: CSS｜用途: タブレット以上で画像とテキストを横並びにする

 

.feature {
  display: grid;
  gap: 24px;
  padding: 48px 20px;
}

@media (min-width: 768px) {
  .feature {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
    padding: 72px 32px;
  }
}

 

13. ECサイト向けのタブレット設定

ECサイトでは、タブレット用ブレークポイントを商品カードの幅で考えると安定します。商品カードには画像、商品名、価格、レビュー、ボタンなど多くの情報が入るため、列数を増やしすぎるとカードが小さくなり、情報が読みにくくなります。

スマホでは1列または2列、768px以上で2〜3列、1024px以上で3〜4列にする設計が多く使われます。ただし、商品名が長いジャンルや画像を大きく見せたい商品では、列数を少なめにする方がよい場合があります。

13.1 商品カードの最小幅を決める

ECサイトでは、商品カードが読みやすい最小幅を先に決めると設計しやすいです。画像が潰れないか、商品名が読みやすいか、価格とボタンが見やすいかを確認します。

列数は画面幅だけでなく、カード内の情報量で決めます。商品説明が短いサイトと、商品名やスペックが長いサイトでは、最適な列数が変わります。

13.2 768pxで2列または3列にする

タブレットでは、商品カードを2列または3列にすることが多いです。画像を大きく見せたい場合は2列、商品数を多く見せたい場合は3列が候補になります。

ただし、3列にするとカード幅が狭くなるため、商品名や価格が窮屈でないか確認します。ユーザーが比較しやすいことが最優先です。

13.3 1024px以上で列数を増やす

1024px以上では、3列または4列にしやすくなります。PC寄りの画面では、商品一覧を効率よく見せるために列数を増やせます。

ただし、列数を増やすほどカード内の情報は小さくなります。画像や価格が見にくくならないように、カードの最小幅を守ることが大切です。

13.4 ECサイト向けコード例

ファイル名: style.css｜言語: CSS｜用途: タブレット以上で商品カード列数を増やす

 

.product-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 600px) {
  .product-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .product-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

@media (min-width: 1200px) {
  .product-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

 

14. タブレット設定でよくある失敗

タブレット対応でよくある失敗は、768px以上になった瞬間にPCと同じレイアウトを適用してしまうことです。タブレットはスマホより広いですが、PCほど広くありません。特に縦向きタブレットでは、2カラム、横並びナビゲーション、複数列カード、大きな画像を同時に入れると、全体が窮屈になります。

もうひとつの失敗は、ブレークポイントを増やしすぎることです。768px、800px、860px、900px、960px、1024pxのように細かく増やすと、どの幅で何を切り替えているのか分かりにくくなります。基本値を決め、例外は必要なコンポーネントだけに限定することが重要です。

14.1 768pxでPC表示にしない

768px以上はタブレット開始の目安ですが、PC表示の開始ではありません。特に本文とサイドバーの2カラムは、768pxでは狭くなることが多いです。

768pxでは余白拡張やカード2列程度にして、PC用の本格レイアウトは1024px以上で始めると安全です。文章中心のページでは特にこの考え方が重要です。

14.2 ナビゲーションを詰め込みすぎない

タブレットで横並びナビゲーションにすると、項目数が多い場合に折り返したり、文字間が詰まったりします。ナビゲーションはサイト全体の操作性に関わるため、無理に横並びにする必要はありません。

項目が少ないサイトなら768px以上で横並びでもよいですが、項目が多いサイトでは1024px以上までハンバーガーメニューを維持する方が自然です。

14.3 例外値を増やしすぎない

コンポーネントごとに細かいブレークポイントを作ると、CSSが複雑になります。基本は768px、1024px、1280pxなどの共通値にそろえ、例外が必要な場合だけ理由を明記します。

たとえば、特定のカードだけ900pxで3列にしたい場合は、なぜその値が必要なのかコメントを残すと、後から保守しやすくなります。

14.4 例外値のコード例

ファイル名: style.css｜言語: CSS｜用途: 例外ブレークポイントに理由を書く

 

/* 900px以上でカード幅が280px以上確保できるため、この一覧だけ3列にする */
@media (min-width: 900px) {
  .case-card-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

 

15. 実務でおすすめのタブレット設定

実務で迷ったら、スマホは通常CSS、768px以上をタブレット、1024px以上をPC、1280px以上を広いPCとして設計するのがおすすめです。WebアプリやMaterial UI寄りの設計では、600px、900px、1200pxの流れを使うのも自然です。大切なのは、プロジェクト内で基準を統一し、コンテンツの見やすさを確認しながら決めることです。

SEO記事やブログでは、768px以上で余白や関連記事カードを調整し、1024px以上で2カラムにします。LPでは、768px以上で画像とテキストを横並びにするか確認し、必要なら1024pxまで待ちます。ECサイトでは、商品カードの最小幅を基準に列数を決めます。管理画面では、900pxを中間値として使うと便利です。

15.1 推奨セット

名前条件用途
mobile通常CSSスマホ基本、1カラム
tabletmin-width: 768pxタブレット向け余白、カード2列
app-mdmin-width: 900pxWebアプリ・管理画面の中間調整
desktopmin-width: 1024px2カラム、横並びナビ、サイドバー
widemin-width: 1280px大型画面向け最大幅・余白調整

15.2 推奨CSS

以下は、実務で使いやすいタブレット向けブレークポイントの基本セットです。スマホを通常CSSにし、768px以上でタブレット調整、1024px以上でPC向け2カラム、1280px以上で広い画面向けに調整します。

ファイル名: style.css｜言語: CSS｜用途: 実務向けタブレットブレークポイント基本セット

 

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 20px;
}

.layout {
  display: block;
}

@media (min-width: 768px) {
  .container {
    padding: 40px 32px;
  }

  .card-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (min-width: 1024px) {
  .layout {
    display: flex;
    gap: 32px;
  }

  .main {
    flex: 1;
    min-width: 0;
  }

  .sidebar {
    flex: 0 0 300px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1200px;
  }
}

 

15.3 使い分けの結論

タブレット用ブレークポイントの結論は、一般的なサイトなら 768px以上をタブレット開始、1024px以上をPC開始 とすることです。768pxでは余白、カード列数、画像テキスト配置を調整し、1024pxでは2カラム、サイドバー、PCナビゲーションを開始します。

アプリや管理画面では、900pxを中間値として使うと便利です。Material UIを使う場合は600px、900px、1200pxの基準に合わせると一貫性があります。BootstrapやTailwind CSSを使う場合は、それぞれのデフォルト値に合わせるのが安全です。

15.4 最終チェック

最後に、タブレット縦向きと横向きの両方で表示確認します。768px、900px、1024px、1200px前後を開発者ツールで確認し、本文が読みやすいか、カードが潰れていないか、ナビゲーションが折り返していないか、フォームが入力しやすいかを見ます。

ブレークポイントは、数値を決めたら終わりではありません。実際のコンテンツを入れて確認し、必要に応じて調整することで、SEOにもユーザー体験にも強いレスポンシブデザインになります。

おわりに

タブレット用ブレークポイントの現在の標準的な目安は、768px以上をタブレット開始、1024px以上をPC開始 とする設計です。768pxではカード2列や余白拡張、1024pxでは2カラムやサイドバー表示、1280pxでは広い画面向けの最大幅調整を行うと、スマホからPCまで自然に対応できます。

ただし、Bootstrap、Tailwind CSS、Material UIでは基準値が少し異なります。Bootstrapは768pxと992px、Tailwind CSSは768pxと1024px、Material UIは600px、900px、1200pxを重視します。フレームワークを使う場合は、その基準に合わせると保守しやすくなります。

最終的に大切なのは、数値そのものではなく、コンテンツが読みやすく、操作しやすく、横スクロールが出ないことです。タブレット対応では、768px、900px、1024pxを候補にしながら、実際の表示を確認して最適なブレークポイントを選びましょう。

LINE Chat