SWELLを使ったWeb制作時にブレイクポイントを把握しておくことは重要です。
SWELLのブレイクポイントは主に下記になります。
- 600px
- 960px
WordPress標準ブロックやプラグインは、それぞれ別の切り替え条件を持つ場合があります。境界を一律に揃える必要はありません。対象のブロックでレイアウトが崩れる幅を確認して調整します。
標準カラムとSWELLのリッチカラムでは、列数を切り替える条件と設定方法が異なります。画面サイズごとの列数を設定したい場合はリッチカラム、標準のカラム構成で足りる場合は標準カラムを選び、使ったブロックの境界を確認します。
例えば「モバイルで縦に並べる」を有効にしたWordPress標準カラムの切り替えはブレイクポイントが782pxとなっています。
本記事では、SWELLとWordPress標準カラムの切り替え条件と、表示幅を変えて確認する手順を紹介します。
SWELLのCSSにおけるブレイクポイントの特徴
2026年10月21日に、保存済みのSWELL 2.19のblocks.cssとmain.cssを照合しました。テーマの更新や追加CSSによって条件は変わるため、使用中のバージョンでも確認してください。
調べたCSSのコードは行数が多いので割愛します。
その変化するブレイクポイントをまとめております。
WordPressのブロックのブレイクポイントの特徴
WordPress側で見かける幅条件には次のような値があります。ただし、全ブロック共通の条件ではありません。標準カラムでは、モバイルで縦に並べる場合に782px未満と782px以上を切り替えます。
- 600px
- 782px
SWELLのブロックのブレイクポイントの特徴
SWELL 2.19のCSSには、次の幅条件が含まれています。これが全条件ではなく、1020pxなどの条件もあります。
- 600px
- 960px
- 1080px
- 1200px
- 1320px
本記事のリッチカラム見本で列数が切り替わる境界は、600pxと960pxです。
1080px・1200px・1320pxなどの条件も、対象のヘッダーやレイアウトに使われていれば確認が必要です。600pxと960pxだけで、すべてのブロックの切り替えを判断できるわけではありません。
SWELLでのWeb制作で注意するべきブレイクポイント
代表的な小さい幅・大きい幅に加え、実際に使うブロックの切り替え直前と直後を確認します。
WordPressのテーマやブロックを利用してコーディングするのであれば、ブレイクポイントの前後は特に注意してチェックしましょう。
motoki標準カラムとSWELLのリッチカラムは切り替え条件が異なります。使っているブロックと設定に合わせて確認しましょう。
| 確認する表示領域 | 幅×高さ、または切り替え幅（CSS px） |
|---|---|
| 小さい表示領域の例 | 375×667 |
| 縦長の表示領域の例 | 428×926 |
| リッチカラムの境界 | 600px |
| 中間の表示領域の例 | 768×1024 |
| 標準カラムの境界 | 782px |
| リッチカラムの境界 | 960px |
| 縦長で広い表示領域の例 | 1024×1366 |
| 横長の表示領域の例 | 1366×768 |
| さらに広い表示領域の例 | 1920×1080 |
| 大きな表示領域の例 | 2560×1440 |
まとめ
レスポンシブの確認をする時は検証画面で画面の幅をフレキシブルに変えながら、レイアウトの崩れなどを確認すると思いますが、ブレイクポイントの確認もしっかり把握しておきましょう。
既存の切り替え条件を確認すると、追加CSSが必要な箇所を判断しやすくなります。条件を揃えるだけで表示崩れを防げるわけではありません。
数値は端末の分類ではなく、ブラウザーの表示領域の幅（CSSピクセル）として確認します。まず599／600／601px、781／782／783px、959／960／961pxの両側を比べ、対象のCSSに別の条件があればその境界も追加してください。ブラウザーのズームや分割表示によって、同じ端末でも適用される条件は変わります。
標準カラムとリッチカラムを同じ画面で比べる
次の標準カラムは2列で「モバイルで縦に並べる」を有効にした見本です。リッチカラムはPC3列・タブレット2列・スマホ1列に設定しています。列数を変える追加CSSは使っていません。下の実測表は、2026年10月2日のこの2つのブロックとサイト設定の組み合わせによる記録です。
WordPress標準カラム：2列
標準カラム A
標準カラム B
SWELLリッチカラム：PC3列・タブレット2列・スマホ1列
リッチカラム A
リッチカラム B
リッチカラム C
エディターで同じ見本を作る場合は、標準カラムを2列で追加し、もう1つリッチカラムを3列で追加します。リッチカラムの画面サイズ別の列数を3・2・1へ設定し、公開前プレビューを開きます。ブラウザーの開発者ツールで表示幅を変え、下の表と比較してください。
| 表示幅（CSS px） | 標準カラム | リッチカラム |
|---|---|---|
| 599 | 1列 | 1列 |
| 600・601 | 1列 | 2列 |
| 781 | 1列 | 2列 |
| 782・783 | 2列 | 2列 |
| 959 | 2列 | 2列 |
| 960・961 | 2列 | 3列 |
600pxの前後はリッチカラム、782pxの前後は標準カラム、960pxの前後はリッチカラムの違いが見えます。横幅を変えた後は列数だけでなく、長い文字の折り返しやページ全体の横はみ出しも確認します。設定を戻す場合は変更前の列数と「モバイルで縦に並べる」を復元します。標準カラムの設定はWordPress公式説明も参照できます。
公開画面の確認記録
よくある質問：SWELLでWeb制作するときのブレイクポイント
SWELLの主なブレイクポイントは、いくつですか？
本記事のリッチカラム見本では600pxと960pxです。SWELL 2.19のCSSには1080px・1200px・1320px・1020pxなどの条件もあり、全体を5つだけに限定できません。対象の要素に適用されるメディアクエリを確認してください。
600pxと960pxだけ見ておけば十分ですか？
十分とは限りません。記事では、1080px・1200px・1320pxなどの条件も、対象のヘッダーやレイアウトに使われていれば確認が必要で、600pxと960pxだけですべてのブロックの切り替えを判断できるわけではないとしています。
WordPressの標準ブロックのブレイクポイントは、SWELLと同じですか？
ブロックによって異なります。「モバイルで縦に並べる」を有効にした標準カラムでは782pxが境界です。SWELLのリッチカラムとは異なりますが、一律に揃える必要はありません。
標準カラムとSWELLのリッチカラムは、どう違いますか？
記事では、列数を切り替える条件と設定方法が異なります。画面サイズごとの列数を設定したい場合はリッチカラム、標準のカラム構成で足りる場合は標準カラムを選び、使ったブロックの境界を確認します。記事の比較では、600pxの前後はリッチカラム、782pxの前後は標準カラム、960pxの前後はリッチカラムの列数が変わります。
ブレイクポイントは、どう確認しますか？
記事では、数値は端末の分類ではなく、ブラウザーの表示領域の幅（CSSピクセル）として確認します。まず599／600／601px、781／782／783px、959／960／961pxの両側を比べ、対象のCSSに別の条件があればその境界も追加します。横幅を変えた後は、列数だけでなく長い文字の折り返しやページ全体の横はみ出しも確認します。
同じ端末なら、いつも同じ条件が適用されますか？
適用されません。記事では、ブラウザーのズームや分割表示によって、同じ端末でも適用される条件は変わるとしています。
独自のブレイクポイントを新しく作ってもよいですか？
追加できます。既存の条件で対応できない表示崩れがある場合は、対象を絞って追加してください。条件が増えると確認箇所も増えるため、追加した境界の前後と既存の境界を確認します。
記事の比較表は、どこまで確認されていますか？
比較表は2026年10月2日の実測記録です。標準カラム2列とリッチカラム（PC3列・タブレット2列・スマホ1列）の組み合わせを確認し、列数を変える追加CSSは使っていません。現在の環境や全テーマ要素で同じ結果になることを保証するものではありません。
