【Vanilla JS】ResizeObserver APIを使用した要素の高さ揃え

[ ID : 11912 ]
シルバー
【Vanilla JS】ResizeObserver APIを使用した要素の高さ揃え
実装目安
3分

概要

JavaScriptの「ResizeObserver API」を使用して対象の要素の高さを揃える方法を紹介。

用途・要件

  • 横並びになっている対象要素の高さを揃えたい場面で使用。(DEMOでは見出しテキストの高さを揃えています)
  • resizeイベントを使用せずResizeObserver APIを使用するため、ブラウザへの負荷が少ない。
  • PC時に高さを揃えて、SP時には高さ揃えを解除する。

注意事項

  • PC時、画面幅を変更した際に段落ちしないようにしてください。

検証ブラウザ

  • Google Chrome(最新)
  • Microsoft Edge(最新)
  • Firefox(最新)
  • Safari(最新)

実装

このコンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

新着記事

全ての記事を見る

KONOCODEのメリット 無料会員登録