マーカーネット株式会社

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

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

関連記事

10月のPYPLプログラミング言語人気ランキング

10月のPYPLプログラミング言語人気ランキング

10月のPYPLプログラミング言語人気ランキング PYPL PopularitY of Programming Language index 10月のプログラミング言語人気ランキングの発表によりますと …

超簡単!【CSS3】ロールオーバー効果

超簡単!【jQuery】ロールオーバー効果 こちらではjqueryで簡単にロールオーバーをかける方法をご紹介しました。実はCSS3でも全く同じ効果を再現できるので、今回はCSS3でロールオーバー効果を …

jqueryを利用した、facebookのアルバムから写真一覧の取得について

jqueryを利用した、facebookのアルバムから写真一覧の取得について

jQueryを利用して、 facebookの指定のアルバムから写真の一覧を取得する方法を紹介します。 ※ まず、facebookからアルバム一覧します。 var name = “markernet”; …

jQueryでタブを作ってみた

今回はjQueryでタブを作ってみました。 タブは皆さんご存知の通りよくあるタブです! Webサイトのページ内でコンテンツ要素が大量にある場合 そのまま表示させるとページが縦長になり ブラウザ上で縦ス …

レスポンシブにも対応!③ フリックスライダーを作成してみました。

レスポンシブにも対応!③ フリックスライダーを作成してみました。

今回はレスポンシブに対応できるスライドショーを作成してみたいと思います。 ただ、レスポンシブに対応しているだけでなく、 スマホに便利なフリックも可能なものをご紹介致します。 前回までの関連記事です。 …