THE HAM MEDIA BLOG

jQuery自作:高さの違うブロックを同じ高さにするプラグイン”jQuery SameHeight Plugin”

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin自作
タグ:
jquery
プラグイン
javascript
sameHeight
plugin

高さの違うブロックを同じ高さにするプラグイン”jQuery SameHeight Plugin”

高さの違うブロックを同じ高さにする方法は既に沢山でているのですが、
jQueryでできないかなって考えてみて、作ってみた。
これを使えば、内容量によってブロックの高さが変わっても、
自動的に揃えることができます。



SameHeight

今回はダウンロードできるようにしました。
リンク先を保存で保存して利用してください。

ダウンロード:jquery.sameHeight.js

動作を確認したブラウザは
Firefox3、IE6、IE7、Safari3、Opera9.6、Chrome。

そのうち、SafariとChromeは設定によって若干うまくいかない時があるようです。

使い方

jQueryが無いと動かないので、ダウンロードしてきてください。
そして今回のプラグインもダウンロードしておく。

そして二つを利用するために、head内に記述。

<script src="js/jquery.js" type="text/javascript"></script>  
<script src="js/jquery.sameHeight.js" type="text/javascript">
</script>  

そして利用したい部分のHTMLはこんな感じ

<div class="sameHeight">
    <div>内容</div>
    <div>内容</div>
    <div>内容</div>
</div>

divじゃなくてもいいのですが、外側をブロック要素で囲んで、
その要素のclassにsameHeightというクラスを指定することで利用できます。

CSSの設定によってはうまく揃わなかったり、
ブラウザで表示が違ったりしますが、その時は教えていただけたらと思います。

サンプルは下記の通りです。

サンプル(paddingの値が全て同じ場合)

■プラグイン未適応

padding:20px 10px;
ダミーテキスト
padding:20px 10px;
ダミーテキストダミーテキストダミーテキストダミーテキスト
padding:20px 10px;
ダミーテキストダミーテキスト

■プラグイン適応

padding:20px 10px;
ダミーテキスト
padding:20px 10px;
ダミーテキストダミーテキストダミーテキストダミーテキスト
padding:20px 10px;
ダミーテキストダミーテキスト

サンプル(paddingの値が違う場合)

■プラグイン未適応

padding:10px 10px;
padding:25px 10px;
ダミーテキストダミーテキストダミーテキストダミーテキスト
padding:20px 10px;
ダミーテキストダミーテキスト

■プラグイン適応

padding:10px 10px;
padding:25px 10px;
ダミーテキストダミーテキストダミーテキストダミーテキスト
padding:20px 10px;
ダミーテキストダミーテキスト

サンプル(divの内側のpにpaddingが設定されている場合)

■プラグイン未適応

padding:10px 10px;

padding:25px 10px;
ダミーテキストダミーテキストダミーテキストダミーテキスト

padding:20px 10px;
ダミーテキストダミーテキスト

■プラグイン適応

padding:10px 10px;

padding:25px 10px;
ダミーテキストダミーテキストダミーテキストダミーテキスト

padding:20px 10px;
ダミーテキストダミーテキスト

これは単純に高さを揃えるブロックの内側の要素にpaddingがついていても、
特に問題がないよというだけのこと。
marginであっても同じ。

サンプル(divの内側のpにpaddingがemで設定されている場合)

■プラグイン未適応

pタグに
padding:1em;

pタグに
padding:2em;
ダミーテキストダミーテキストダミーテキストダミーテキスト

pタグに
padding:1.5em;
ダミーテキストダミーテキスト

■プラグイン適応

pタグに
padding:1em;

pタグに
padding:2em;
ダミーテキストダミーテキストダミーテキストダミーテキスト

pタグに
padding:1.5em;
ダミーテキストダミーテキスト

これも単純に高さを揃えるブロックの内側の要素にpaddingがついていて、
その指定がemでの指定であっても、特に問題がないよというだけのこと。
これまたmarginであっても同じ。

サンプル(divにpaddingがemで設定されている場合)

■プラグイン未適応

padding:1em 0;
padding:2em 0;
ダミーテキストダミーテキストダミーテキストダミーテキスト
padding:1.5em 0;
ダミーテキストダミーテキスト

■プラグイン適応

padding:1em 0;
padding:2em 0;
ダミーテキストダミーテキストダミーテキストダミーテキスト
padding:1.5em 0;
ダミーテキストダミーテキスト

この場合、SafariとGoogle Chromeでの表示がうまくいかない。
高さは揃うものの、padding分のきちんとした広さが確保できない状態になる。
Firefox3、IE6、IE7、Opera9は問題なく表示される。

SafariやChromeにも対応させる場合はemではなく、
pxでpaddingを指定するようにしてもらいたい。

ちなみに、今後対応するかは未定です。

ダウンロード

Download:jquery.sameHeight.js

作ろうと思ったきっかけ

同じようなプラグインにSetting Equal Heights with jQueryというのもあるのですが、
自分でも最初から作ってみようかなと思って作ってみました。
ただ、作りたくても思うようにうまくいかないものですね。
paddingを指定していて、さらにはブロックそれぞれに違う値を指定していたら揃わなかった。
同じにしたいブロックで違う高さを指定するということはまずないと思うけど、
それでもIEでうまいこと揃わなかったので、結局paddingの高さを取得することで揃えた。

でもこれだと、さっきも書いたのですが、SafariとChromeでemを指定していた場合は
うまく高さ確保されないことが判明した。
これさえうまくいけばどのブラウザのどんな状況でも揃えられるのかなと思ったり・・・

何かバグなどがあれば教えてください。



この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

要素の高さを揃える超軽量なjQueryプラグインjquery.tile.jsを公開
Excerpt: 複数の要素をタイル状に配置するために、ブロック要素の高さを揃える軽量なjQueryプラグインjquery.tile.jsを公開します。このプラグインを使用すると、ブロック要素を簡単にタイル状に並べるこ..
Weblog: URIN HACK
Tracked: 2011-04-04 23:08

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。