コンテンツの高さと幅を揃えるなら 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

人気の記事

2017年、人気の無料WordPressテーマ100選
2017年、人気の無料WordPressテーマ100選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ11選
アドセンス運用に最適なWordPressテーマ11選

コメント

  • Posted on
  • Updated on
  • Views 1,617