Webサイトにおいて横に並ぶコンテンツの高さを揃える簡単な実装方法

Webサイトにおいて横に並ぶコンテンツの高さを揃える簡単な実装方法

こんにちは!Webエンジニアのtrrn(呼称:てらりん)です。

だんだん暑くなってきましたね。。。
歩いてるだけで結構汗をかくので、クールビズの一環としてそろそろビーサンで出勤しようと思います⊂(゚∀゚⊂⌒`つ≡≡≡

今回はWebサイト作成にあたり、最近よく実装している横に並ぶコンテンツの高さを揃える超簡単な実装方法を紹介します。

前提条件

普段フロント面の実装でjQueryを使用することがほとんどなので、jQueryプラグインを使って実装します。

使用するjQueryプラグイン

jquery.matchHeight.js
こちらのプラグインを使用します。簡単なWebサイトであれば十分要件を満たしてくれます。

サンプル

実装前

下記のように内容によって高さが決まるコンテンツは、横並びだとガタガタした見た目になってしまいます。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae possimus omnis dolorum velit libero aut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, aut vel illum officia consequuntur minima iure consequatur numquam fuga ipsum doloremque explicabo magnam voluptate iste, praesentium ea optio accusamus blanditiis.
Lorem ipsum dolor sit amet.

実装後

コンテンツの高さを揃えてみました。

※Resultボタンを押すと確認できます。

See the Pen jquery.matchHeight by trrn1210 (@trrn1210) on CodePen.

実装方法

超簡単です。

手順1. jQuery と jquery.matchHeight を読み込む

手順2. 高さを揃えたいボックスにdata-mh属性を追加し、値に共通の文字列を入れる

以上になります。

こちらのプラグインには今後もお世話になることでしょう!


Previous: jQueryの基本 Next: Google Apps Script で動作スピードを改善する方法3つ

© 2017 ALL CONNECT Inc. All Rights Reserved.