要素の高さを揃える超軽量jquery.tile.jsがオススメ!ただし画像を含む場合は要注意!

  • あとで読みたい人は…

最近食欲が抑えられない、@cappeeです。

CSSやHTMLで要素の高さを固定するのではなく、要素内のコンテンツボリュームに合わせて都度高さを指定したいケースって結構ありますよね。今までは「heightLine.js」を使用していましたが、jQueryを使用した超軽量の「jquery.tile.js」を試してみてとても使いやすかったのでメモしておきたいと思います。

もちろん、同じ行にある要素の高さを揃えることもできます。嬉しい。

jquery.tile.jsを使って要素の高さを揃える

下記より「jquery.tile.js」ファイルをダウンロードして、<head>内か</body>の直前でファイルを指定して読み込みます。jQuery本体を読み込むのも忘れずに。(サンプルコードはHTML5です。)

jquery.tile.js

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="/js/jquery.tile.js"></script>

高さを揃えたいページか外部JSファイルに下記を記述する。「.className」のところに要素のクラス名を入れてください。

同じ行にある要素の高さを揃える場合は、「.tile(4)」の数字のところに列数をいれてください。

全ての要素の高さを揃える場合

<script>
 $(function(){
 $(".className").tile();
 });
 </script>

同じ行にある要素の高さを揃える場合

<script>
 $(function(){
 $(".className").tile(4);
 });
 </script>

こんなに簡単でいいのか!と思ってわくわくしながら更新したところ、うまく揃っていません。あれれ。

画像を含めるときの注意点

要素内のコンテンツを少しづつ削除して何が原因か調べたところ、どうやら画像が悪さをしているようです。調べてみたら、解決策ありました!ありがたし。

上記のコードを下記のように「$(window).load(function() {」に修正すればいいみたいです。下記だと画像を読み込んでからJSを実行するので正常に動作するようになると。

<script>
$(window).load(function() {
 $(".className").tile();
});
</script>

改善についてはこちらの「画像が含まれる要素の高さをjquery.tile.jsを使って調整する方法」を参考にさせていただきました。ありがとうございます。

Pocket
article clipper 要素の高さを揃える超軽量jquery.tile.jsがオススメ!ただし画像を含む場合は要注意!

One thought on “要素の高さを揃える超軽量jquery.tile.jsがオススメ!ただし画像を含む場合は要注意!

  1. Pingback: 私がよく使っているjQueryプラグインまとめ(スライダー、モーダルウィンドウなど) | OZPAの表4

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)