変更の背景
従来のブレイクポイント処理と問題点
従来のブレイクポイントは以下のように小数点つきのCSS変数でサイズを定義したり、直接小数点ありの数字を使用していました。
$xs-max: 575.98px;
$sm-max: 767.98px;
$md-max: 991.98px;
$lg-max: 1199.98px;
$xl-max: 1399.98px;
$sm-min: 576px;
$md-min: 768px;
$lg-min: 992px;
$xl-min: 1200px;
$xxl-min: 1400px;これは従来は主要ブラウザで < / <= / > / >= を使った Media Queries の範囲構文が利用できなかったためです。
そのため以下のように書くと 768px は両方に該当する という状態に陥ってしまいます。
/* タブレットの時 */
@media (max-width: 768px) { ... }
/* PC の時 */
@media (min-width: 768px) { ... }それを区別するために以下のように、境界値の重複を避けるため、1つのブレイクポイントに対して max 用と min 用の2つの数値を用意していました。
/* タブレットの時 */
@media (max-width: 767.98px) { ... }
/* PC の時 */
@media (min-width: 768px) { ... }また、メディアクエリはあらゆる箇所で記載されているため、記載箇所によっては 先述の通り例えば同じ 768px に対して mix-width としても min-width としても使用してしまっている箇所がありました。
現在のブレイクポイント事情
現在のCSSは max-width / min-width だけでなく、以下のように < / <= / > / >= を明示的に書くことができるようになりました。
/* タブレットの時 */
@media ( width <= 768px ) { ... }
/* PC の時 */
@media ( 768px < width ) { ... }これにより、 .98px のような余分な数値を用意する必要がなく、ブレイクポイントに対して１つの数値で運用が可能になっています。
WordPress 本体でもブレイクポイントは < width <= 方式での運用
WordPress 7.1 からは theme.json で モバイルとタブレットの２箇所のブレイクポイントが明示できるようになりました。
この数値は、その区分に含まれる最大値として扱われ、数値を越えると次の区分に切り替わります。
このブレイクポイントは将来的に切り替えが可能になると思われる（ 7.1 でも恐らくフックで可変できる ）ため、今の段階でなるべく WordPress 本体の挙動にあわせたブレイクポイントの再調整を実施する運びになりました。
変更方針
ブレイクポイントは以下の数値で 最大値として運用 します。
$xs-max: 576px;
$sm-max: 768px;
$md-max: 992px;
$lg-max: 1200px;
$xl-max: 1400px;これまでの例）
/* スマホの場合 */
@media( width <= $xs-max ) { ... }
/* タブレットの場合 */
@media( $sm-min <= width <= $md-max ) { ... }のように小さい方に対して <= を使用するケースも存在していたが、今後は 各変数は最大値として運用する ものとして、以下のように 上限側は <=、下限側は < という指定で統一します。
/* スマホの場合*/
@media( width <= $xs-max ) { ... }
/* タブレットの場合 */
@media( $xs-max < width <= $md-max ) { ... }
/* PCの場合 */
@media( $md-max < width ) { ... }min-width / max-width の使用は原則禁止
min-width と max-width は値を含むのか含まなのか誤解が生まれる余地もあるので原則使わないようにする。
影響事項
575.98px < width <= 576px などの境界領域において従来とのズレが発生するケースがあります。しかしながら現状で完全に一致していないため部分的にズレが発生しているのと、今後の WordPress 本体との整合性も踏まえ、再度統一調整をした方が安定した表示ができますので、何卒ご理解いただけますと幸いです。
アップデート時のご注意
現在作業中の製品と、作業が完了してリリース待ちとしているものがありますが、今週中のリリースを予定します。
実質ブレイクポイントが 1px ずれる箇所があるという変更ですが、予めご留意願います。
を購入して
特典をゲットしよう！
特典A
X-T9 工務店
（ ナチュラル ）
19,800円 (税込)
0円に！
特典B
Lightning ビジネス
（Evergreen）
9,900円 (税込)
0円に！
特典C
Lightning 工務店
（ ナチュラル ）
19,800円(税込)
0円に！
今なら！
Vektor Passport の
有効期間中、上記の
デモサイトデータを
何度でも素早くまるごと
インポートできます！
爆速!!１分でデモサイトと同じ
ホームページができる
選んだデモサイトと同じ状態の WordPress サイトを、わずか数ステップで再現できるインポート専用プラグインです。数クリックで、プロ品質のサイトがすぐに起動します。
フルサイト編集対応ブロックテーマ
WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。
パターンを使って
よりクオリティの高いサイトに
パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中！コピペしながら高品質なサイトを簡単に作れます。
ブロックエディターで
ABテストを
自由に作成できる
VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。