THE HAM MEDIA BLOG

jQuery自作:カラム落ちも防止できる!幅の違うブロックを同じ幅にする”jQuery SameWidth Plugin”

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

幅の違うブロックを同じ幅にする”jQuery SameWidth Plugin”

先日高さの違うブロックを同じ高さにするプラグインを作りましたが、
高さの違うブロックを同じ高さにするプラグイン”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の設定によってはうまく揃わなかったり、
ブラウザで表示が違ったりしますが、その時は教えていただけたらと思います。

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

サンプル ブロックが3つ

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

■プラグイン未適応(ブロック3つ)

width:110px;
padding:20px 10px;
width:130px;
padding:20px 10px;
width:90px;
padding:20px 10px;

■プラグイン適応(ブロック3つ)

width:110px;
padding:20px 10px;
width:130px;
padding:20px 10px;
width:90px;
padding:20px 10px;

サンプル  ブロックが4つ

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

■プラグイン未適応 (ブロック4つ)

width:30px;
padding:20px 10px;
width:10px;
padding:20px 10px;
width:90px;
padding:20px 10px;
width:50px;
padding:20px 10px;

■プラグイン適応 (ブロック4つ)

width:30px;
padding:20px 10px;
width:10px;
padding:20px 10px;
width:90px;
padding:20px 10px;
width:50px;
padding:20px 10px;

サンプル ブロックが絡む落ちするような場合(ブロック3つ)

外枠は同じく450px

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

width:200px;
padding:20px 10px;
width:200px;
padding:20px 10px;
width:200px;
padding:20px 10px;

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

width:200px;
padding:20px 10px;
width:200px;
padding:20px 10px;
width:200px;
padding:20px 10px;

サンプル ブロックが絡む落ちするような場合(ブロック4つ)

外枠は同じく450px

■プラグイン未適応(ブロック4つ 合計値が外枠以上)

width:200px;
padding:20px 10px;
width:200px;
padding:20px 10px;
width:200px;
padding:20px 10px;
width:200px;
padding:20px 10px;

■プラグイン適応(ブロック4つ 合計値が外枠以上)

width:200px;
padding:20px 10px;
width:200px;
padding:20px 10px;
width:200px;
padding:20px 10px;
width:200px;
padding:20px 10px;

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

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

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

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

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

ダウンロード

Download:jquery.sameWidth.js

今後

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

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

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

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

ホームページアドレス:

コメント: [必須入力]

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


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

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

トップに戻る

×

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