【css】ボックスの高さを揃えるheightLine.jsが便利

私はデザインの仕事に携わって早15年になりますが、コーディングも10年以上経験しています。

そんな私がよく遭遇する、htmlやcssをコーディングしている時のあるあるネタのひとつをご紹介したいと思います。

Webデザインでは、複数あるdivなどのボックスの高さを（高さ指定なしの可変）揃えたい場合があります。そんな時には、いつもこちらのjsを利用させてもらっています。
コーディングされている方なら知ってると思いますが、これかなり便利です！

では、このheightLine.jsについてまとめてみたいと思います。

タップできる目次

高さを揃えたい時の対処法

コーディングしていると、テキストの量がブロックごとに違う場合などありますが、どんな要素が入っても高さを揃えたいデザインを数多く見かけます。

そんな場合、ぱっと思い浮かぶのが…

といった方法が考えられると思います。
しかし、どれもイレギュラーな場合が想定されるため、今後の管理に不安要素が残ってしまいます。

それは、文字数がどうしてもボックスによって異なってしまう場合や、画像だと更新に手間がかかってしまう、SEO的にもよろしくないなど…やはり高さはどんな要素が表示されていても揃えたい場合があります。

そんな時に便利なのが今回のheightLine.jsです！

では、heightLine.jsの使い方をご紹介します。と言っても使い方は簡単で、下記のjsを保存してヘッダーに読み込みます。※パスは適宜変更してください。
http://blog.webcreativepark.net/sample/js/18/heightLine.js

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

そして、高さを揃えたいボックスのクラスに「heightLine」を追加します。
これだけでボックスを指定して高さを揃えることができます。便利ですねー！

高さを合わせたいグループが複数ある場合は「heightLine-1」といった感じでハイフンに数字を振って異なるクラス名を設置することで対応することも可能です。

さらに、リストなどの場合はクラスに「heightLineParent」というクラス名をulに追加することによって、その下に配置されるli要素の高さを揃えることもできます。

全てのliにクラスを追加することなくulひとつに追加するだけで子要素の高さが揃えることができるため、タグもすっきりとまとめることができますね−！

しかし、このjsを使っていてもどうも高さが揃ってくれない場合があります。。

それは、色々な条件が考えられると思いますが、個人的に思うのが、よく入れ子にしたdiv同士を指定した場合なんかにうまく動作してくれない場合が多く感じます。

そこで、ちょっと調べてみると下記の記事を見つけました。
これも高さが揃わない条件のひとつかと思われます。

こちらの記事を読むと、heightLineで高さが揃わない理由は、box-sizing:border-boxが問題なようです。

box-sizingはレスポンシブデザインを導入する際にも非常に便利なプロパティのひとつで、余白を考慮せずに横幅を指定できるため非常に便利です。
こちらの記事でもご紹介させてもらいました。

しかし、私の場合はbox-sizing:border:boxを下記のように全体に設定して管理していますが、ちゃんと高さが揃う所は揃っていました。

html {box-sizing: border-box;}

なので、高さが揃わない原因は恐らく他にも色々と考えられるのかもしれません。※原因を追及できていないので申し訳ございませんが。。

ということで、heightLine.jsでうまく高さが揃わない場合は、このbox-sizingというcssのプロパティを疑ってみてはいかがでしょうか？

引用した記事にもあるように、高さを揃えたいブロックに対して、box-sizing:content-boxを設定して挙動を試してみてください。

私はたまたまこちらの設定でうまく表示することができたことがありましたので、対処法のひとつとして覚えておくと良いでしょう。