web制作の備忘録(仮)

web制作の備忘録。たくさん勉強したいです。

要素の高さを揃えてくれるjquery.tile.js

jquery.tile.jsとは

jquery.tile.js(公式サイト:http://urin.github.io/jquery.tile.js/ )とは要素の高さを揃えてくれるjqueryプラグインです。 シンプルに要素の高さを揃えるだけのプラグインのため、使い方もシンプルでわかりやすく軽量です。いつもお世話になっています。 とてもシンプルなので使い方も公式サイトを見た方が早いと思いますが、メモします。

使い方

使い方1 要素の高さを全て揃える

jquery上記サイトより落としたjquery.tile.jsを読み込み、高さを揃えたい要素に共通のクラス(例.sample)をふり、下記の記述をするだけです。例では、.sampleというクラスをふられた要素は、その中で一番高さのある要素と同じ高さに全て揃います。

 $('.sample').tile();

使い方2 要素を指定した数ごとに並べたいとき

使い方1の.tile();の()にその数を入れるだけで、その数ごとに高さが揃います。

 $('.sample').tile(3);

並べた要素が複数行にわたる場合、全て同じ高さになってしまうより、1行ごとに揃っていた方が見た目が綺麗ですよね。そういうときに上記のように1行の要素数を指定して使います。表に見たてると列の数を入れる感じです。

ありがたいポイント

要素を並べるレイアウトってよく利用しますが、中身がテキストだったり、CMSでコンテンツ量が想定できない場合、高さを固定したくないですよね。なので、なるがままにしていたことが多いのですが、こちらのtile.jsを見つけてからはコンテンツ量に合わせた高さで揃ってくれるため、情報量を損なわずに綺麗な見た目を保ってくれてすごく重宝しています。ありがたい。