WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。
投稿日：2014年7月7日 更新日：
ブロック要素にfloatをかけて回り込ませる、
というのはコーディングをする際によく使う手法ですよね。
「ブロック要素の高さを揃えたい」と思う事はありませんか？
そんな時、私がよく使う便利なjqueryライブラリ、
jquery.tile.jsのご紹介です。
通常CSSのみでブロック要素の高さを揃える場合、
使用したいカラムごとにdivタグ等で囲みclearをかけて
ブロック要素の高さを指定すると思います。
しかしこのjqueryライブラリを使用すると
$(‘.sample1′).tile();
クラスが「sample1」のブロック要素全て同じ高さにする。
$(‘.sample2′).tile(4);
クラスが「sample2」のブロック要素を4カラムで同じ高さにする。
と、とても簡単に実装が可能です。
このライブラリを使えばulで囲んだliの繰り返しで
カラムを指定して高さを揃える事が出来ます。
例えばWordpress等、プログラムでループ処理を行いたい場所の
高さを綺麗に揃えたい場合等に重宝すると思います。
関連記事
面白い動きや便利な機能をJSで実装！ その3：一目で印象に残るアニメーション背景を作成！
web制作をされている方ならば、サイトを訪れてくれた人を少しでも長く引き留めたいと思われると思います。 一体どうやって見てくれる人の興味をひけるのか。色々な方法がありますが、その一つとして面白い動きを …
レスポンシブにも対応！行ごとのブロック要素の高さを自動で合わせる方法。
ブロック要素の高さを揃えるJavaScriptはいくつかあります。 その中でも行ごとの高さを変えたい場合に便利な「fixHeight.js」をご紹介します。 Contents 「fixHeight.j …
html5の新属性、独自データ属性”data-〇〇”を使ってみましょう！！ Contents デモ アコーディオンタイトル コンテンツコンテンツコンテンツコンテンツ コンテンツコンテンツコンテンツコン …
面白い動きや便利な機能をJSで実装！ その2：いろんな種類のグラフを簡単に作成！
以前ご紹介しました面白い動きや便利な機能をJSで実装！ その１：簡単にグラフを作成する方法！の応用編になります。 前回は折れ線グラフをご紹介致しましたが、今回は「棒グラフ」「レーダーチャート」「円グラ …
レスポンシブにも対応！③ フリックスライダーを作成してみました。
今回はレスポンシブに対応できるスライドショーを作成してみたいと思います。 ただ、レスポンシブに対応しているだけでなく、 スマホに便利なフリックも可能なものをご紹介致します。 前回までの関連記事です。 …
