THE HAM MEDIA BLOG

ブロックレベル要素の高さを揃える方法あれこれ

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
デザイン
タグ:
Height
CSS
javascript

ブロックレベル要素の高さを揃える方法あれこれ

ネタ元:[mixi] CSSテクニック | divの高さを100%に

複数のカラムを利用するときに、
コンテンツの量によって高さは変わってくる。

でも、高さを同じにして見た目を同じにしたい!
というケースに出会った事があるひとが多いのではないだろうか?

その場合まず考えられるのが、heightを指定して、同じ分px指定をする方法。
でもこの方法だと、コンテンツ量が変化するたびに変化させる必要があって面倒。

では、どのようにしたら高さを同じにできるのか?

調べてみたら様々な方法があるようなので、まとめてみた。



CSSで揃える - その1

ブロックレベル要素の高さを揃える方法あれこれ

揃える方法はいろいろあるが、まずはCSSで揃える方法。
一度画面がはみ出るくらい長くpadding-bottomを指定してmargin-bottomでその幅を縮小。
あとは親要素にoverflow: hiddenを指定して、必要な範囲だけにする方法である。

以下のサイトを参照してもらいたい。

こういう方法もあるのか!という方法だと思う。
結構荒技な印象も受ける。

CSSで揃える - その2

ブロックレベル要素の高さを揃える方法あれこれ

これは単純に高さを揃えたいブロックを囲んで、
そこで片側の背景と同じものを指定するという方法である。

参照:段の背景色が切れないようにする - [ホームページ作成]All About

floatとかした時は要注意かもしれないけど、
CSSで設定するならこの方法が一番かな?

背景画像で揃える

ブロックレベル要素の高さを揃える方法あれこれ

これはかなり汎用性が高くて、いろいろなサイトで使われている(たぶん)。

この方法は高さをそろえるというよりも、
高さが違っても、背景画像を使って視覚的に同じに見えるようにする方法である。

1つのカラムで背景を指定するのではなくて、
複数のカラム背景をまとめて指定してしまうことで、
一番高さのあるブロックの高さ分、全体にも背景がついて同じ高さに見える。

例としてはこんな感じ↓

段組レイアウトのお約束:段組ボックスの底辺を揃える(揃っているように見せる)

JavaScriptで揃える

これはJavaScriptとclassさえ指定しておけば自動的に高さを揃えてくれる方法。

ブロックレベル要素の高さを揃えるheightLine.js[to-R]

さすがは西畑さん、僕も使わせていただいています。
heightLine.jsは高さの揃えたいところで、
classでheightLineなどを指定することで高さを揃えることができる。

これと似たもので、jQueryを使うプラグインものある。

jQueryでブロック要素の高さを揃えてみる - 徒書

CSSよりもJavaScriptでの方が、
コンテンツの内容などに幅広く対応できるような気がする。
それぞれ使いやすい方法で設定をしてみてはどうだろうか。



この記事へのコメント
いろいろ試していたものの、どれもしっくり来なかったのですが…
「CSSで揃える - その2」を試してうまくいきました。
この方法があったのですね。おかげさまで助かりました!
Posted by はっち at 2011年08月31日
コメントを書く
お名前: [必須入力]

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

ホームページアドレス:

コメント: [必須入力]

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


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

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

トップに戻る

×

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