横並びの高さの違うリスト(カラム)を揃える方法を3つまとめた【CSSとjQuery】HOMEHTML/CSS横並びの高さの違うリスト(カラム)を揃える方法を3つまとめた【CSSとjQuery】ブログ系のサイトなら記事一覧ページ、EC系のサイトなら商品一覧ページなど、同じカラムが並んだリストは、大抵のサイトにはあるかと思うんですが、1カラムの情報が違えば、高さがまちまちになってしまいます。見た目がキレイではないので、「この下の隙間って同じ高さにできないんですかね?」って要望がほぼ確実に出てきます。自分が実務で使っているカラムの高さの整列の仕方はCSSでやったりjQueryを使ったり、色々なんで、整理も兼ねてまとめてみました。HTMLは共通で、CSSのプロパティやjQueryが違ってます。47px;}【1】FlexBoxを使って、カラムの高さを揃えるCSS3から実装されたCSSプロパティ「FlexBox」を使えば、難なく横並びの高さを揃えることができます。FlexBoxが使える環境下までのブラウザ対応であれば、こちらで十分かと思います。基本、ベンダープレフィックスを追記すれば、IEもサポートしているので、問題ないかと。いうタイプのデータベースからの情報吐き出し型の構成の場合は、FlexBoxで横並びさせると、不具合が出ることがあるみたいで、システム絡みの案件については、若干の注意が必要かと思います。wrap;}大元で囲っている<ul>にFlexBoxをあてます。wrap」も一緒にあてておきます。DEMO【2】高さの変化する場所のCSSを編集して、カラムの高さを揃えるこの方法は、少々強引ですが、可変するところに「min-height」で最小値の高さを設定します。4em;}「min-height」の単位をpxで指定すると、ブラウザで文字サイズを変更した時にあっさりレイアウト崩れが起こってしまうので、単位を「em」としておけば、指定しているフォントサイズの◯文字分と計算してくれるので、px指定よりはまだレイアウト崩れがマシです。DEMO【3】jQueryライブラリの「jquery.tile.js」を使って、カラムの高さを揃えるjQueryを使って高さを計算して並べてくれるのは「jquery.tile.js」というライブラリが一番お手軽っぽいです。下記サイトから「jquery.tile.js」をダウンロードします。pageそして、大元のjQueryと一緒に読み込みます。src="js/jquery.tile.min.js"></script>あとは、以下のようにスクリプトコードも書けば、jQuery側で自動的に高さを計算してくれます。「tile(4)」っていうのは、今回4カラムのレイアウトなので「4」としています。行ごとに高さを変えたい場合はこの数字が必須です。});全部の行のカラムを同じ高さにしたい場合は、下記のように数字を省いて記述します。});DEMOまとめ基本的にはFlexBoxでいくのが、お手軽なんですがブラウザ対応だったり、絡んでくるシステム次第では、【3】の「jquery.tile.js」を使ったほうが安心かもしれません。デザインのモックアップ時には、意外とその辺を考えずにデザインしたものが上がってくる場合があるので、注意が必要ですね。position:absoluteの組み合わせはレイアウトが激崩れの恐れありこちらの記事もあわせてどうぞ【全ブラウザ対応】perfect-scrollbar.jsでスクロールバーの色をCSSで自由に変更する。コメントをキャンセルメールアドレスが公開されることはありません。Memo当ブログの管理人Kc_fuji(け-し-)です。WEB制作会社に務めるサラリーマンです。このブログは、制作の覚え書きとWordpressの実験所として利用しています。PAGEWEB(K)Campus(WEB系キャンパス)は娯楽は少なめ。