横並びカラムの高さを揃える2つの方法

2018年1月11日 | Web

カラムを作る際、Bootstrapを使用する事が多いのですが、記事一覧などをカラムで作成した際「タイトルの長さ」「写真の構図」が原因で高さが一定に保てずカラムが崩れてしまう事があります。アイキャッチ画像の縦横構図を気にすることなく使用されるクライアント様もいらっしゃいます。そんな時でもカラムの横並びがキレイに保たれる方法を紹介します。

CSSのFlexで高さを揃える方法

まずは、CSSのflexで高さを揃える方法をご紹介します。対応ブラウザは、Chrome、IE10以上、Firefox、safari（一部のバージョンで未対応）となっています。


<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>


.row-height {
    display: flex;
    flex-wrap: wrap;
}

jQueryで高さを揃える方法

次に、jQueryで高さを揃える方法をご紹介します。対応ブラウザは、chrome、IE10以上、Firefox、safariとなっています。


<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>


<script type="text/javascript" src="js/jquery.matchHeight.js"></script>

<script type="text/javascript">
          $(function(){
            $('.js-matchHeigtht').matchHeight();
          });
</script>

先日（2018年㋅23日）気付いたのですがページ内で複数指定する場合があると思います。通常のjQueryでは1つのclass指定でいけると思うのですが、matchHeight.jsは不可なようです。1ページ内に複数使う場合の対処法を追記しておきます。


<script type="text/javascript" src="js/jquery.matchHeight.js"></script>

<script type="text/javascript">
          $(function(){
            $('.js-matchHeigtht').matchHeight();
            $('.column_box').matchHeight();
          });
</script>

ファイル（jquery.matchHeight.js）は、Githubページからダウンロードして使われてください。