Webサイトを構築する上で、ボックスをフロートして横一列に並べるレイアウトにデザインすることはよくあることだと思います。その際に、見栄えや使い勝手のことを考えてボックスの高さを揃えておいた方が望ましい場合もあるでしょう。
多くのブログは、「記事部分」と「サイドバー部分」に分けられた2カラム、3カラム形式のレイアウトでデザインされています。このブログも「記事部分」と「サイドバー部分」からなる2カラム形式のレイアウトになっています。先日サイドバー部分に「ボーダー」と「背景色」を設定することにしたのですが、記事部分よりもサイドバー部分の方がが短いため、ボックスの高さを揃える必要が出てきました。
「高さ 揃える」などで検索すると、実装方法について書かれたページがたくさん出てきます。
- ●「heightLine.js」というJavaScriptライブラリを使った実装方法
- ⇒ ブロックレベル要素の高さを揃えるheightLine.js[to-R]
- ●「Equalbox.js」というjQueryプラグインを使った実装方法
- ⇒ [JS]異なる高さのdiv要素の高さを揃えるだけのシンプルなスクリプト -Equalbox | コリス
- ● CSSのみでの実装方法
- ⇒ floatしたdivの高さを揃える « (X)HTML+CSS Tips « XHTML+CSS Webサイト制作Tips « ScuderiaWeb
上記の方法を使うと、複数のボックスの高さを簡単に揃えることができるようになります。ただ今回は「記事部分」と「サイドバー部分」の2つのボックスの高さを揃えるだけなので、jQueryだけで実装することにしました。
実装方法について、以下のサンプルを使ってまとめておきたいと思います。ついでにボックス内の要素の位置を揃える方法についても併せて紹介しておきます。
サンプル
2つのボックスをフロートして並べています。ボックスの中にはそれぞれ見出しを伴った文章が2つずつ入っていますが、文章の長さがバラバラなため、何もしていない「施策前」の状態だと見出しの位置やボックスの高さが揃っていません。
施策前
何もしていない状態だと、見出しの位置もボックスの高さもバラバラで、決して見栄えが良いとは言えません。
施策後（ボックスの高さ、見出しの位置を揃えた状態）
見出しの位置もボックスの高さもきっちり揃い、大変見栄えも良くなります。
実装方法
実装方法については、まずボックスの高さを確定させるために、見出しの位置から揃えていきます。
見出しの位置を揃える
まずjQueryの.offset()メソッドを使って、見出しと文章を含む要素の上側の位置情報を取得します。
$("セレクター名").offset().top;左右2カ所の位置情報を取得したら、どちらが上で、どちらが下の位置にあるか比べ、上にある方のpositionをjQueryの.css()メソッドを使って下にある方の位置に合わせるようにします。移動させる値は、大きい方の値から小さい方の値を差いた値となります。
$("セレクター名").css({"position":"relative" , "top":差の値});ボックスの高さを揃える
見出しの位置を揃えたら、次にボックスの高さを揃えます。まずjQueryの.height()メソッドを使って、ボックスの高さの情報を取得します。
$("セレクター名").height();左右2カ所の高さを取得したら、2つのボックスの高さを比べ、小さい方のボックスの高さ（height）をjQueryの.css()メソッドを使って大きいほうのボックスの高さに合わせるようにします。
$("セレクター名").css("height" , 小さい方のボックスの高さの値)まとめると
以上をまとめると、JavaScriptとHTMLのソースコードは以下のようになります。
JavaScript （jQuery）
<script>
$(document).ready(function() {
// ===見出しの位置を揃える===
// 左右2つの見出しの上側の位置情報を取得
var textLeft = $(".text-left").offset().top;
var textRight = $(".text-right").offset().top;
// 右側が下にある場合
if (textLeft < textRight) {
// 右側の位置の値-左側の位置の値
var textPosition = textRight - textLeft;
// 左側の見出しの位置を、右側の見出しの位置に合わせる
$(".text-lert").css({"position": "relative", "top": textPosition});
// 左側が下にある場合
} else {
// 左側の位置の値-右側の位置の値
var textPosition = textLeft - textRight;
// 右側の見出しの位置を、左側の見出しの位置に合わせる
$(".text-right").css({"position": "relative", "top": textPosition});
}
// ===ボックスの高さを揃える===
// 左右2つのボックスの高さを取得
var boxLeft = $(".box-left").height();
var boxRight = $(".box-right").height();
// 右側のボックスの高さの方が大きい場合
if (boxLeft < boxRight) {
// 左側のボックスの高さを右側のボックスの高さに合わせる
$(".box-left").css("height" , boxRight);
// 左側のボックスの高さの方が大きい場合
} else {
// 右側のボックスの高さを左側のボックスの高さに合わせる
$(".box-right").css("height" , boxLeft);
}
});
</script>HTML
<section>
<!-- .box-leftここから -->
<div class="box-left">
<div>
<h1>見出し</h1>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
<!-- .text-leftここから -->
<div class="text-left">
<h2>見出し</h2>
<p>テキストテキストテキストテキスト</p>
</div>
<!-- .text-leftここまで -->
</div>
<!-- .box-leftここまで -->
<!-- .box-rightここから -->
<div class="box-right">
<div>
<h1>見出し</h1>
<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
<!-- .text-rightここから -->
<div class="text-right">
<h2>見出し</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
<!-- .text-rightここまで -->
</div>
<!-- .box-rightここまで -->
</section>要素の位置を揃えたり、要素（ボックス）の高さを揃える方法はいろいろあると思いますが、今回は私の行ったシンプルな方法を紹介してみました。要素の高さが揃っていると、やはり見栄えはいいものです。いろんなところで使えるのではないでしょうか。
コメント