SWELL│Web制作時にチェックしておくべきブレイクポイントまとめ

2024.03.292026.10.02

SWELLを使ったWeb制作時にブレイクポイントを把握しておくことは重要です。

SWELLのブレイクポイントは主に下記になります。

600px
960px

しかし、これにはWordPressの標準のブロックやプラグインのブロックにも影響してくるので、ブレイクポイントを揃えることも大事で、コーディングがしやすくなります。

標準カラムとSWELLのリッチカラムでは、列数を切り替える条件と設定方法が異なります。画面サイズごとの列数を設定したい場合はリッチカラム、標準のカラム構成で足りる場合は標準カラムを選び、使ったブロックの境界を確認します。

※例えばWordPressの標準のカラムブロックのなどはブレイクポイントが782pxとなっています。

下記の記事のように修正する方法もあります。

SWELLのCSSにおけるブレイクポイントの特徴

SWELLに格納されているblocks.cssやmain.cssのメディアクエリを調べてみました。

調べたCSSのコードは行数が多いので割愛します。

その変化するブレイクポイントをまとめております。

WordPressのブロックのブレイクポイントの特徴

その前にWordPressで使われているブロックのCSSを調査すると変化するのは主に以下の2つになります。

600
782px

SWELLのブロックのブレイクポイントの特徴

そしてSWELLで使われているCSSを調査すると、テーマでは主に5つのブレイクポイントを設定しています。

600px
960px
1080px
1200px
1320px

この中で赤文字の2つが非常に重要です。

1080px・1200px・1320pxなどの条件も、対象のヘッダーやレイアウトに使われていれば確認が必要です。600pxと960pxだけで、すべてのブロックの切り替えを判断できるわけではありません。

SWELLでのWeb制作で注意するべきブレイクポイント

代表的な小さい幅・大きい幅に加え、実際に使うブロックの切り替え直前と直後を確認します。

WordPressのテーマやブロックを利用してコーディングするのであれば、ブレイクポイントの前後は特に注意してチェックしましょう。

motoki

標準カラムとSWELLのリッチカラムは切り替え条件が異なります。使っているブロックと設定に合わせて確認しましょう。

逆に別のところでブレイクポイントを作ってしまうと、変化する箇所が増えて、かえってコーディングが面倒になるかもしれないリスクもあります。

機種	画面サイズ
小さい画面幅の確認例	375×667
大きいスマホ幅の確認例	428×926
スマホ	600（※SWELLとWordPressブロック）
iPadｍini	768×1024
タブレット	782px（※WordPressブロック）
タブレット	960（※SWELLブロック）
iPad Pro12.9	1,024×1,366
MacBook Air 11.6インチ	1,366×768
iMac 21.5インチ	1,920×1,080
iMac 27インチ	2,560×1,440

まとめ

レスポンシブの確認をする時は検証画面で画面の幅をフレキシブルに変えながら、レイアウトの崩れなどを確認すると思いますが、ブレイクポイントの確認もしっかり把握しておきましょう。

押さえるべき場所がわかっていると、CSSのコードも減り、レイアウトが崩れる確率も減ります。

数値は端末の分類ではなく、ブラウザーの表示領域の幅（CSSピクセル）として確認します。まず599／600／601px、781／782／783px、959／960／961pxの両側を比べ、対象のCSSに別の条件があればその境界も追加してください。ブラウザーのズームや分割表示によって、同じ端末でも適用される条件は変わります。

標準カラムとリッチカラムを同じ画面で比べる

次の標準カラムは2列で「モバイルで縦に並べる」を有効にした見本です。リッチカラムはPC3列・タブレット2列・スマホ1列に設定しています。列数を変える追加CSSは使っていません。ここで示す結果は、この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公式説明も参照できます。