レイアウトシフト（Layout Shift）とは

レイアウトシフトとは、要素が不本意にズレることです。これによりユーザーが意図しないアクションをしてしまう可能性があります。

上の例では動的に追加される要素が原因ですが、他の原因には下記が挙げられます。

この問題は、開発時に見つけにくいという特徴があります。開発時は通信速度が速い状態でテストすることが多いため、通信の遅延等にまで意識が届かずレイアウトシフトを起こしてしまう…といった具合です。

レイアウトシフトを防ぐには、ネットワーク速度も意識してデバッグを行う必要があります。他にも、画像や動画などの追加で読み込みが発生する要素のアスペクト比をあらかじめ固定し、表示領域を確保しておくことも有効ですね。

要素のアスペクト比

従来のアスペクト比固定ハック

従来は、CSSを用いて簡単にアスペクト比を固定する方法がありませんでした。そこで、下記のようなpaddingを利用した固定法が広く使われました。

<div class="aspect-ratio-16vs9">
  <div class="aspect-ratio-16vs9--item">...</div>
</div>
.aspect-ratio-16vs9 {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 要素の上の余白を幅の56.25%（9/16）に */
}
.aspect-ratio-16vs9--item {
  position: absolute;
  top: 0;
}

しかしながら、可読性が低い上にコードも長くなってしまうという問題を抱えていました。開発者目線ですが、もっとシンプルに記述したいですよね。

CSS aspect-ratioプロパティ

CSSのaspect-ratioプロパティが主要ブラウザで対応され始めています。これからは下のような書き方で利用できるようになります。

.aspect-ratio-16vs9 {
  width: 100%;
  aspect-ratio: 16 / 9;
  /* 幅 : 高さ = 16 : 9 */
}

可読性が非常に高く、なおかつコードもスッキリしていますね。

Can I useによると、aspect-ratioプロパティに対応しているのはChromeとEdgeのみであり、ブラウザシェアを加味すると63%のユーザーに正しく表示されます（2021年3月17日時点）。デスクトップSafari・Firefoxでもすでに試作的に利用できるので、主要ブラウザで対応される日も遠くなさそうです。

この記事の 最終更新：2021.3.16