コンテンツの高さと幅を揃えるなら eqaulize.js

cap2

equalize.jsはコンテンツの高さと幅を揃えてくれるjQueryプラグインです。使用方法も簡単です。
dviやpタグなどを揃えることができます。

導入

jqueryと一緒に読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/js/equalize.js"></script>

 高さを揃える

一番高い要素の高さに合わせます。
揃えたい要素の親要素(下記の場合は「#height-example」)をセレクタで指定します。

$('#height-example').equalize(); // defaults to height

equalize.js適用前(高さがバラバラ)

cap3

equalize.js適用後(高さが揃った)

cap4

横幅を揃える

一番広い横幅に合わせます。
揃えたい要素の親要素(下記の場合は「#width-example」)をセレクタで指定します。

$('#width-example').equalize('width');

equalize.js適用前(横幅がバラバラ)

cap5

equalize.js適用後(横幅が揃った)

cap6

オプション1(デフォルト値をリセットして高さと横幅を揃える)

「reset: true」を指定すると、要素に設定されている高さの値を一度リセットして、再度要素の高さを取得します。

$('#height-example').equalize({reset: true}); // default to height

横幅の場合はこのように指定します。

$('#width-example').equalize({equalize: 'width', reset: true});

equalize.js適用前(高さがバラバラ)

普通に高さを合わせると、真ん中の一番高い要素に高さが揃ってしまいます。
「reset: true」を指定しているので、一度すべての高さをリセットしてから、要素の高さを取得し直して一番高い高さに合わせます。

cap8

equalize.js適用前(高さが揃った)

cap9

オプション2(outer、innerの指定)

outerHeightやinnerHieght、outerWidthやinnerWidthを指定することもできます。

$('.parent').equalize('height'); // default, same as above
$('.parent').equalize('outerHeight');
$('.parent').equalize('innerHeight');
$('.parent').equalize('width');
$('.parent').equalize('outerWidth');
$('.parent').equalize('innerWidth');

オプション3(子要素を指定)

「children: ‘要素’」 で対象の子要素を指定することもできます。下記の場合は、.parentの中のpタグが対象になります。

$('.parent').equalize({children: 'p'}); // equalize height of paragraphs within .parent

関連記事

人気の記事

目的別おすすめのWordPressテーマ(無料・有料)【2018年版】
目的別おすすめのWordPressテーマ(無料・有料)【2018年版】
2018年におすすめしたい、日本語対応の有料WordPressテーマ10選
2018年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ10選
アドセンス運用に最適なWordPressテーマ10選

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

コメント

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • Posted on
  • Updated on
  • Views 1,675