CSS3/jQueryのnth-child()を利用したカラムレイアウト

img_nth_demo01.jpg

商品リストなんかを掲載する場合、ボックスを3カラム/4カラムにレイアウトするケースが多々あると思います。今は3商品しか掲載しないけれど、そのうち4、5、6...と増えていってもレイアウトを維持するためには少々工夫する必要があると思います。


img_nth_demo02.jpg

当然のごとくボックス間にはマージンが存在していて、カラムの最後のボックスのマージンが邪魔...とは言えマージンを0にしたクラスを付加するのもメンテナンス性が落ちるため出来れば避けたい。

ul/li要素でマークアップしてpositionを利用する方法やネガティブマージンを利用する方法があると思います。今回はul/li要素を利用せずにシンプルにdivのみを利用した方法を紹介します。マークアップは次の通り。


  • code
  • source
  1. <div class="item-box pkg">

  2. <h2>Items Box</h2>

  3. <div>

  4. <div class="item">

  5. <h3>Item1</h3>

  6. <p><img src="common/img/img_nth_001.jpg" width="200" height="150" alt="" /></p>

  7. <p>ここには商品の説明が入ります。</p>

  8. <p>ここには商品の説明が入ります。</p>

  9. <!-- / .item --></div>

  10. <div class="item">

  11. <h3>Item2</h3>

  12. <p><img src="common/img/img_nth_002.jpg" width="200" height="150" alt="" /></p>

  13. <p>ここには商品の説明が入ります。</p>

  14. <p>ここには商品の説明が入ります。</p>

  15. <!-- / .item --></div>

  16. <div class="item">

  17. <h3>Item3</h3>

  18. <p><img src="common/img/img_nth_003.jpg" width="200" height="150" alt="" /></p>

  19. <p>ここには商品の説明が入ります。<br />

  20. ここには商品の説明が入ります。<br />

  21. ここには商品の説明が入ります。</p>

  22. <!-- / .item --></div>

  23. <!-- / .item-box --></div>

<div class="item-box pkg">
<h2>Items Box</h2>
<div>
<div class="item">
<h3>Item1</h3>
<p><img src="common/img/img_nth_001.jpg" width="200" height="150" alt="" /></p>
<p>ここには商品の説明が入ります。</p>
<p>ここには商品の説明が入ります。</p>
<!-- / .item --></div>
<div class="item">
<h3>Item2</h3>
<p><img src="common/img/img_nth_002.jpg" width="200" height="150" alt="" /></p>
<p>ここには商品の説明が入ります。</p>
<p>ここには商品の説明が入ります。</p>
<!-- / .item --></div>
<div class="item">
<h3>Item3</h3>
<p><img src="common/img/img_nth_003.jpg" width="200" height="150" alt="" /></p>
<p>ここには商品の説明が入ります。<br />
ここには商品の説明が入ります。<br />
ここには商品の説明が入ります。</p>
<!-- / .item --></div>
<!-- / .item-box --></div>

CSSは次のようになります

  • code
  • source
  1. div.item-box { margin: 0 20px 1em; }

  2. div.item-box h2 {

  3. 	border-left: 5px solid #ccc;

  4. 	margin-bottom: 1em;

  5. 	padding-left: 5px;

  6. }

  7. div.item {

  8. 	float: left;

  9. 	width: 220px;

  10. 	margin-right: 20px;

  11. 	margin-bottom: 1em;

  12. 	background-color: #eee;

  13. }

  14. div.item h3 { margin: .5em 10px; }

  15. div.item p {

  16. 	line-height: 1;

  17. 	margin: .5em 10px;

  18. 	text-align: justify;

  19. 	text-justify: inter-ideograph;

  20. }

  21. div.item:nth-child(3n+3){ margin-right: 0; }

  22. div.item-last { margin-right: 0; }

div.item-box { margin: 0 20px 1em; }
div.item-box h2 {
	border-left: 5px solid #ccc;
	margin-bottom: 1em;
	padding-left: 5px;
}
div.item {
	float: left;
	width: 220px;
	margin-right: 20px;
	margin-bottom: 1em;
	background-color: #eee;
}
div.item h3 { margin: .5em 10px; }
div.item p {
	line-height: 1.5;
	margin: .5em 10px;
	text-align: justify;
	text-justify: inter-ideograph;
}
div.item:nth-child(3n+3){ margin-right: 0; }
div.item-last { margin-right: 0; }

CSS3のnth-child()擬似要素を利用して3つめのdivの右マージンを無効にするスタイルを記述しています。

nth-child()擬似要素は()内に数を記述すれば記述した場所にスタイルが有効になり、odd(奇数), even(偶数)などのキーワードも利用出来ます。また、3n+1のように『3つを1つのグループとして、そのグループの1番目にスタイルを有効にする』などと言った使い方が出来る便利な擬似要素です。(今回は3n+3で3カラムの1番最後の要素にスタイルを有効にしています。)

さて、この便利なnth-child()ですが、残念（当然）なことにIE6/7/8で利用出来ません。Firefoxも3.5からサポートしていますが、Firefox2/3では利用出来ません。そこでIE6/7/8, FF2/3にのみjQueryを利用して3カラムの最後の要素に.last-childを付加して対処します。

IE6/7/8はjQuery.supportを利用してブラウザを特定します。Firefox2/3はFirefox 2/3, Safariも判別する1行のスクリプトを利用します。

JavaScriptのコードは次のようになります。

  • code
  • source
  1. <script src="http://www.google.com/jsapi"></script>

  2. <script>google.load("jquery", "1.4");</script>

  3. <script type="text/javascript" src="common/js/jqueryAutoHeight.js"></script>

  4. <script type="text/javascript">

  5. (function($) {

  6. 	FF=/a/[-1]=='a' //FF2,3

  7. 	// only ie6,7,8 FF2,3

  8. 	if((!jQuery.support.opacity)||(FF)){

  9. 		$('div.item:nth-child(3n+3)').addClass('item-last');

  10. 	}

  11. 	$('div.item').autoHeight({column:3,clear:1});

  12. })(jQuery);

  13. </script>

<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1.4");</script>
<script type="text/javascript" src="common/js/jqueryAutoHeight.js"></script>
<script type="text/javascript">
(function($) {
	FF=/a/[-1]=='a' //FF2,3
	// only ie6,7,8 FF2,3
	if((!jQuery.support.opacity)||(FF)){
		$('div.item:nth-child(3n+3)').addClass('item-last');
	}
	$('div.item').autoHeight({column:3,clear:1});
})(jQuery);
</script>

今回はかたつむりくんのWWWで配布されているjQuery Auto Height - 複数のカラムの高さを最大値にそろえるjQueryプラグインも利用して高さをそろえています。

View Demo