カラムを作る際、Bootstrapを使用する事が多いのですが、記事一覧などをカラムで作成した際「タイトルの長さ」「写真の構図」が原因で高さが一定に保てずカラムが崩れてしまう事があります。アイキャッチ画像の縦横構図を気にすることなく使用されるクライアント様もいらっしゃいます。そんな時でもカラムの横並びがキレイに保たれる方法を紹介します。
まずは、CSSのflexで高さを揃える方法をご紹介します。対応ブラウザは、Chrome、IE10以上、Firefox、safari(一部のバージョンで未対応)となっています。
[html]
<div class="container">
<div class="row row-height">
<div class="col-md-6">
高さが変わっても横並びのカラムが崩れません。
<div>
<div class="col-md-6">
高さが変わっても横並びのカラムが崩れません。高さが変わっても横並びのカラムが崩れません。
<div>
<div class="col-md-6">
高さが変わっても横並びのカラムが崩れません。
<div>
<div class="col-md-6">
高さが変わっても横並びのカラムが崩れません。高さが変わっても横並びのカラムが崩れません。
<div>
</div>
</div>
[/html]
[css]
.row-height {
display: flex;
flex-wrap: wrap;
}
[/css]
次に、jQueryで高さを揃える方法をご紹介します。対応ブラウザは、chrome、IE10以上、Firefox、safariとなっています。
[html]
<div class="container">
<div class="row">
<div class="col-md-6 js-matchHeigtht">
高さが変わっても横並びのカラムが崩れません。
<div>
<div class="col-md-6 js-matchHeigtht">
高さが変わっても横並びのカラムが崩れません。高さが変わっても横並びのカラムが崩れません。
<div>
<div class="col-md-6 js-matchHeigtht">
高さが変わっても横並びのカラムが崩れません。
<div>
<div class="col-md-6 js-matchHeigtht">
高さが変わっても横並びのカラムが崩れません。高さが変わっても横並びのカラムが崩れません。
<div>
</div>
</div>
[/html]
[js]
<script type="text/javascript" src="js/jquery.matchHeight.js"></script>
<script type="text/javascript">
$(function(){
$(‘.js-matchHeigtht’).matchHeight();
});
</script>
[/js]
先日(2018年㋅23日)気付いたのですがページ内で複数指定する場合があると思います。通常のjQueryでは1つのclass指定でいけると思うのですが、matchHeight.jsは不可なようです。1ページ内に複数使う場合の対処法を追記しておきます。
[js]
<script type="text/javascript" src="js/jquery.matchHeight.js"></script>
<script type="text/javascript">
$(function(){
$(‘.js-matchHeigtht’).matchHeight();
$(‘.column_box’).matchHeight();
});
</script>
[/js]
ファイル(jquery.matchHeight.js)は、Githubページからダウンロードして使われてください。
個人的によく使っているのは、jQueryの方です。横並びの高さを揃える方法は他にもあり、試してみましたが紹介させて頂いた2つの方法が簡単で使いやすように思いました。