THE HAM MEDIA BLOG

先日高さの違うブロックを同じ高さにするプラグインを作りましたが、
（高さの違うブロックを同じ高さにするプラグイン”jQuery SameHeight Plugin”）
それの横幅バージョンを作ってみました。

また、カラム落ちを防ぐ機能もついているので、
横幅が揃っている場合でも使えるものになるのではないかと思います。

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

ダウンロード：jquery.sameWitdh.js

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

今回emでの指定などのことは見ていない状態での結果は全て大丈夫でした。
emなどpx指定以外にしてしまった場合、どうなるかは今のところ不明です。

使い方

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

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

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

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

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

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

それと必ずsameWidthをつけた部分にはwidthを設定してください。

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

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

サンプル ブロックが３つ

どちらも外枠は450pxになっています。

■プラグイン未適応（ブロック3つ）

■プラグイン適応（ブロック3つ）

サンプル　 ブロックが４つ

これも外枠は450pxになっています。

■プラグイン未適応 （ブロック４つ）

■プラグイン適応 （ブロック４つ）

サンプル　ブロックが絡む落ちするような場合（ブロック３つ）

外枠は同じく450px

■プラグイン未適応（ブロック3つ 合計値が外枠以上）

■プラグイン適応（ブロック3つ 合計値が外枠以上）

サンプル　ブロックが絡む落ちするような場合（ブロック４つ）

外枠は同じく450px

■プラグイン未適応（ブロック４つ 合計値が外枠以上）

■プラグイン適応（ブロック４つ 合計値が外枠以上）

ちなみに、ブロックが４つ以上でも２つの場合でも、
どちらでも適応されるようになっています。

このプラグインの使いどころ。

この例だとわかり辛いかもしれないですが、
横幅を同じにする場合のカラム落ちを修正して
落ちないように揃えてくれます。

画面全体で使うようなカラムで使う場合、
横幅が同じようなケースではいいのですが、
カラムごとに違うケースの様な場合は今回のは適さないと思います。

ただ、小さいブロックを揃えたい時で、
崩れてしまうのを防ぐことができるので、
今回のサンプルのような、部分的なケースには使えるプラグインだと思います。

ダウンロード

Download：jquery.sameWidth.js

今後

今回は横幅を揃えるプラスカラム落ちを防ぐようなプラグインにしましたが、
カラムの横幅がそれぞれ違うよなケースでも使えるプラグインなら使えそうですね。

横幅のwidthだけじゃなく、paddingなどの要素も絡んでカラム落ちしてしまうケースが多々あるので、
CSSで設定ミスをしてもカラム落ちをしないように調節してくれるような、
CSS初心者向けのプラグインを今後は作ってみようかなと思います。