スポンサーサイト このエントリーを含むはてなブックマーク

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ブロック間の高さを勝手にアジャストしてくれるjQuery このエントリーを含むはてなブックマーク

jqueryロゴ
jQueryでカラムの高さをそろえる方法です。

レイアウト揃えれば見栄えがちょっと良くなる

所要時間:5分程度
設置難易度:★☆☆☆☆ (簡単)


ブロック要素の高さが合っていない場合、こうなる。これが普通っちゃ普通。(クリック拡大)
ss1.png

jQuery使うとブロック間の高さを勝手にあわせてくれる(クリック拡大)
ss2.png

jQueryの設置

参照サイト:ブロックレベル要素の高さを揃えるheightLine.jsこのエントリーを含むはてなブックマーク

jQuery本体
よくわかんねって人はとりあえず以下をテンプレートのhead-/head内にコピペ。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>


heightLine.jsをhead内に設置
heightLine.jsをダウンロードし、fc2ブログにアップロードします。
アップロードしたjsファイルを以下のようにhead内に設置します。src=の中にアップロードしたjsファイルへのリンクが入ります。
<script type="text/javascript" src="./heightLine.js"></script>


高さを揃えたいブロック要素にheightLineのクラスをつける
たとえばid名rightとleftがあった場合、それぞれにクラスをつけます。こんな感じ。
<div id="right" class="heightLine">
<div id = "left" class="heightLine">


HTML/CSS
不要です。

カラムがずれるとなんだかかっちょわるかったりもするので、見ている人はあんまり気にしないと思うけど。
簡単に導入できるので是非ためしてみてください。
COMMENT
こんばんは
テンプレートをお借りしたかったのですが
コメント欄に赤バツがつき
ダウンロード済みになってるのですが
ダウンロードできませんでした。
なにか問題があったでしょうか?
すみません。
2012/01/13(金) 22:37:10 |URL|Tinの母 #- [EDIT]
ダウンロードできました。
お騒がせしました_(..)_
2012/01/13(金) 22:42:33 |URL|Tinの母 #- [EDIT]
>Tinの母さん
無事にダウンロードいただけたようで何よりです!!
素人作なので不手際がありましたら何なりと!!!お待ちしとります!!!
2012/01/14(土) 11:28:46 |URL|管理人 #mQop/nM. [EDIT]
COMMENT FORM
  • URL:
  • comment:
  • password:
  • secret: 管理者にだけ表示を許可する
TRACK BACK
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。