ホームページ制作　オフィスオバタ

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

OBATA

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

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

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

今回の現象はこちら

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

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

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>

特色

1行ごとに、h3の高さをそろえるようにしています。
1行3列なので、3つの高さの最大値でh3の高さを指定しています。
これだと2行目、3行目に余分な空白行ができません。

一応レスポンシブに対応しています。

高さそろえは結局手間がかかる

gridやflexのスタイルシートを使用すれば、レイアウト系はJquery等を使用しなくてもそろえられるようになりました。ですが、流動的に変化する高さについては、動的な方法で調整するしかないようです。

今回はJqueryで高さを揃えましたが、プラグイン化はお勧めできません。
スタイルシートの記述に左右されるためです。

なので、コーディングに合わせてJquery等で構築することがベターでした。
htmlで、高さをそろえるとは、一見簡単なようでむつかしいことなのだと知りました。

モバイルバージョンを終了