SWELLを使ったWeb制作時にブレイクポイントを把握しておくことは重要です。
SWELLのブレイクポイントは主に下記になります。
- 600px
- 960px
しかし、これにはWordPressの標準のブロックやプラグインのブロックにも影響してくるので、ブレイクポイントを揃えることも大事で、コーディングがしやすくなります。
ですので、できるだけSWELLのブロックを使ってコーディングをするべきです。
※例えばWordPressの標準のカラムブロックのなどはブレイクポイントが782pxとなっています。
結論を書いてしまいましたが、本記事ではSWELLでの最適なブレイクポイントを調査いたしました。
SWELLのCSSにおけるブレイクポイントの特徴
SWELLに格納されているblocks.cssやmain.cssのメディアクエリを調べてみました。
調べたCSSのコードは行数が多いので割愛します。
その変化するブレイクポイントをまとめております。
WordPressのブロックのブレイクポイントの特徴
その前にWordPressで使われているブロックのCSSを調査すると変化するのは主に以下の2つになります。
- 600
- 781
SWELLのブロックのブレイクポイントの特徴
そしてSWELLで使われているCSSを調査すると、テーマでは主に5つのブレイクポイントを設定しています。
- 600px
- 960px
- 1080px
- 1200px
- 1320px
この中で赤文字の2つが非常に重要です。
他は微調整で使われているので無視して良いです。
SWELLでのWeb制作で注意するべきブレイクポイント
結局はチェックでw375px〜w2560pxあたりのサイズはすべてみると思いますが、
WordPressのテーマやブロックを利用してコーディングするのであれば、ブレイクポイントの前後は特に注意してチェックしましょう。
motoki例えばWordPressのカラムは使わずにSWELLのリッチカラムを使うべし！
| 機種 | 画面サイズ |
|---|---|
| iPhone X | 375×667 |
| iPhone 14 Pro Max | 428×928 |
| スマホ | 600（※SWELLとWordPressブロック） |
| iPadｍini | 768×1024 |
| タブレット | 781（※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のコードも減り、レイアウトが崩れる確率も減ります。