実務で地味に使う「高さ揃え」。
カードUIや一覧レイアウトで、
- タイトルの高さがバラバラ
- 行ごとに高さを揃えたい
- デザインが微妙に崩れる
…みたいなこと、まだありますよね？
昔はjQueryを使用していたこともあり、 jquery-match-height を使っていました。
でも最近は、
- できるだけ jQuery を使わない構成にしたい
- 依存を増やしたくない
- 本当に必要な機能だけ欲しい
という案件が増えてきました。
そこで、
「じゃあVanilla JSで作ればよくない？」
と思って作ってみたのがvanilla-matchheight です。
👉 https://www.npmjs.com/package/@neruco/vanilla-matchheight
実務で困っていたこと
WordPress案件でよくあるのが、
- ACFでカードを量産
- タイトルや説明文の文字数がバラバラ
- デザインは“きれいに揃っている前提”
という状況。
CSSだけでなんとかしようとすると限界があって、
結局JSで高さを揃えることになります。
でも、
「そのためだけにjQuery入れるのもな…」
というモヤモヤがずっとありました。
作ったもの
See the Pen @neruco/vanilla-matchheight demo by あお＠neruco (@coder_ao) on CodePen.
今回作ったライブラリは、やっていることはシンプルです。
- 同じ
data-mhを持つ要素をグループ化 - 行ごとに最大の高さを計算
- その高さを適用
例えばこんな感じ。
HTML
<div class="card" data-mh="group1">Card A</div>
<div class="card" data-mh="group1">Card B</div>
<div class="card" data-mh="group1">Card C</div>
JavaScript
VanillaMatchHeight.applyDataApi();
これだけで、同じ data-mh を持つ要素同士の高さが揃います。
タイトルだけ揃える、みたいなこともできる
実務だと、
- カード全体の高さを揃えたい
- さらに、カード内のタイトル（h3）も揃えたい
というケースもあります。
その場合は、グループを分けるだけ。
<article class="card" data-mh="cards-a">
<h3 data-mh="cards-a-title">Title</h3>
</article>
cards-a と cards-a-title を別グループとして扱えばOKです。
実務目線で「こういうの欲しかった」を詰め込みました。
CDNでもnpmでも使えるようにした
せっかく作るなら、ちゃんと公開しようと思い、
- UMD形式で出力
- npm公開
- jsDelivr対応
までやってみました。
CDNで使う場合はこんな感じです。
<script src="https://cdn.jsdelivr.net/npm/@neruco/vanilla-matchheight@1.0.0/dist/vanilla-matchheight.umd.min.js"></script>
まとめ
今回やってみて思ったのは、
- 実務の小さな不満は、自分で解決できる
- jQueryなしでも高さ揃えは十分実装できる
- npm公開は思っていたよりハードルが低い
ということ。
もし、
- jQueryを減らしたい
- 軽量な高さ揃えが欲しい
- 実務向けのシンプルな実装を探している
という方がいたら、よかったら使ってみてください。
👉 https://www.npmjs.com/package/@neruco/vanilla-matchheight
- PR
