マーカーネット株式会社

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

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

関連記事

【jQuery】 超簡単!アコーディオンメニュー ②

【jQuery】 超簡単!アコーディオンメニュー ②

【jQuery】 超簡単!アコーディオンメニュー ① こちらでとっても簡単なアコーディオンを作成しましたが、これでは自分のデザインに活用できなかった・・・ そんな時はhtml5の新属性、独自データ属性 …

画像を自動的にlightBox風に表示するjQuery ColorboxのWordPressプラグイン

画像を自動的にlightBox風に表示するjQuery ColorboxのWordPressプラグイン

jQueryプラグイン「Colorbox」は便利ですが、 さらにWordPressプラグインとして導入すれば 設定は更に簡単になります。 ソースをいじる必要はありませんので初心者にもおすすめです。 W …

面白い動きや便利な機能をJSで実装! その3:一目で印象に残るアニメーション背景を作成!

web制作をされている方ならば、サイトを訪れてくれた人を少しでも長く引き留めたいと思われると思います。 一体どうやって見てくれる人の興味をひけるのか。色々な方法がありますが、その一つとして面白い動きを …

面白い動きや便利な機能をJSで実装! その5:ちょっと変わったマウスオーバーの応用編

javascript(jquery)でマウスオーバー時に変わった動きを付けたいと思います。 面白い動きや便利な機能をJSで実装! その4:ちょっと変わったマウスオーバーを実装してみました。の続きになり …

Movable Type6がリリースされました

Movable Type6がリリースされました

movable type6 以下の新機能が追加されたとのことです。 – Data API APIを通じてMovable Typeの管理画面の操作や記事の読み込みが可能になったとのことです。 – Cha …