マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

javascript(jquery)

ブロック要素の高さを揃えるのに便利なjqueryライブラリ【jquery.tile.js】

投稿日:2014年7月7日 更新日:

jquery_tile

ブロック要素にfloatをかけて回り込ませる、
というのはコーディングをする際によく使う手法ですよね。

「ブロック要素の高さを揃えたい」と思う事はありませんか?
そんな時、私がよく使う便利なjqueryライブラリ、
jquery.tile.jsのご紹介です。

通常CSSのみでブロック要素の高さを揃える場合、
使用したいカラムごとにdivタグ等で囲みclearをかけて
ブロック要素の高さを指定すると思います。

しかしこのjqueryライブラリを使用すると

$(‘.sample1′).tile();
クラスが「sample1」のブロック要素全て同じ高さにする。

$(‘.sample2′).tile(4);
クラスが「sample2」のブロック要素を4カラムで同じ高さにする。

jquery.tile.js Demos

と、とても簡単に実装が可能です。

このライブラリを使えばulで囲んだliの繰り返しで
カラムを指定して高さを揃える事が出来ます。

例えばWordpress等、プログラムでループ処理を行いたい場所の
高さを綺麗に揃えたい場合等に重宝すると思います。

-javascript(jquery)

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

HTML5 【data-】 独自データ属性を使おう!

独自データ属性、カスタムデータ属性、data-role属性・・・ と色々な呼ばれ方をする、html5で追加されたオリジナルの属性をつくれる素敵な仕組み! 「href」はリンク先、「id」「class」 …

面白い動きや便利な機能をJSで実装! その2:いろんな種類のグラフを簡単に作成!

面白い動きや便利な機能をJSで実装! その2:いろんな種類のグラフを簡単に作成!

以前ご紹介しました面白い動きや便利な機能をJSで実装! その1:簡単にグラフを作成する方法!の応用編になります。 前回は折れ線グラフをご紹介致しましたが、今回は「棒グラフ」「レーダーチャート」「円グラ …

javascriptの便利なライブラリについて

javascriptの便利なライブラリについて

オブジェクト(配列)や文字列の処理は自作の作成した場合、時間を要してしまします。 そこで、これらの処理をおこなう際に便利なJavascriptライブラリを紹介します。 1. underscore.js …

面白い動きや便利な機能をJSで実装! その1:簡単にグラフを作成する方法!

折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなどを 作成することができる「Chart.js」をご紹介致します。 今回は一番汎用性の高いと思われる折れ線グラフを作成してみたいと思います。 表示の瞬 …

レスポンシブにも対応!行ごとのブロック要素の高さを自動で合わせる方法。

レスポンシブにも対応!行ごとのブロック要素の高さを自動で合わせる方法。

ブロック要素の高さを揃えるJavaScriptはいくつかあります。 その中でも行ごとの高さを変えたい場合に便利な「fixHeight.js」をご紹介します。 「fixHeight.js」の設置方法 ま …