横並び配列の特定要素の高さをそろえる

2026年3月3日

今も昔も、htmlでbox横並び配列はあります。
例えば、実績や商品の一覧表示をする場合等です。
少しの情報量であれば、横に複数並べたほうが見やすいです。

ですが今回このようなことがありました。
デザイン上ガタガタに見える。

boxとしては、高さがそろっているのですが、box内要素の高さがガタガタになる現象でした。
無論文字数が異なるため、ガタガタになるのである程度仕方のない部分はあります。
ですが、何とかできないかと思いました。

今回の内容

1. 今回の現象はこちら
2. とりあえずそろえてみたバージョン
- 2.1. ソースはこちら。
3. 流動的な場合でもbox内のh3がそろう方法を考えました。
4. やってみたものがこちら
- 4.1. ソースはこちら
- 4.2. 特色
5. 高さそろえは結局手間がかかる

今回の現象はこちら

見出し部分の文字数が異なるため、高さが不ぞろいなのでガタガタになって見えます。

とりあえずそろえてみたバージョン

min-heightを使って高さを揃えました。
ただ、これだと問題があります。

固定記事ならばＯＫですが、ＣＭＳなど流動的に文字数が変わる場合には対応できません。

ソースはこちら。

<!doctype html>
<html>
<head>
<meta charset="shift_jis">
<title>h3の高さをそろえる2</title>
<style type="text/css">
article
{
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
}

article ul
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 40px;
	row-gap: 40px; 
	align-items: stretch; 
	margin: 0px;
	padding: 0px;
}

article ul li
{
	margin: 0px;
	padding: 20px;
	list-style-type: none;
	border: 1px solid #CCC;
}

article ul li h3
{
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	min-height: 6em;
}

</style>
</head>

<body>
<article>
<ul>
<li>
<h3>1行目のタイトル</h3>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</li>

<li>
<h3>２行目のタイトルテキストテキストテキストテキストテキストテキストテキスト</h3>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</li>

<li>
<h3>３行目のタイトルテキストテキストテキスト</h3>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</li>

<li>
<h3>４行目のタイトルテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</h3>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</li>

<li>
<h3>5行目のタイトル</h3>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</li>

</ul>
</article>

</body>
</html>

流動的な場合でもbox内のh3がそろう方法を考えました。

文字数の異なるh3タグの高さが揃えばよいのです。
ＣＳＳだけで何とかならないか考えました。

画像であれば、高さは容易に揃えられます。
ですが、文字となると容易ではありません。

いろいろ考えましたが、流動的に文字数が変化する場合、cssでは対応できないことがわかりました。
cssでは文字数や高さを調べることができないためです。

そこで、動的に高さをそろえることにしました。
少し手間が増えますが、動的に高さをそろえることができます。

やってみたものがこちら

ソースはこちら

<!doctype html>
<html>
<head>
<meta charset="shift_jis">
<title>h3の高さをそろえる3</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(window).on('load resize', function() 
{
	var $h3 = $('article ul li h3');
	$h3.css('height', 'auto');

	var columns = window.getComputedStyle
	(
		document.querySelector('article ul')
	).gridTemplateColumns.split(' ').length;

	$h3.each(function(count) 
	{
		if (count % columns === 0) 
		{
			var group = $h3.slice(count, (count + columns));
			var max = 0;

			group.each(function() 
			{
				max = Math.max(max, $(this).outerHeight());
			});

			group.height(max);
		}
	});
});
</script>
<style type="text/css">
article
{
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
}

article ul
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 40px;
	row-gap: 40px; 
	align-items: stretch; 
	margin: 0px;
	padding: 0px;
}

article ul li
{
	margin: 0px;
	padding: 20px;
	list-style-type: none;
	border: 1px solid #CCC;
}

article ul li h3
{
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
}

</style>
</head>

<body>

<article>
<ul>
<li>
<h3>1行目のタイトル</h3>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</li>

<li>
<h3>２行目のタイトルテキストテキストテキストテキストテキストテキストテキスト</h3>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</li>

<li>
<h3>３行目のタイトルテキストテキストテキスト</h3>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</li>

<li>
<h3>４行目のタイトルテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</h3>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</li>

<li>
<h3>5行目のタイトル</h3>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</li>

</ul>
</article>

</body>
</html>