ホームページ制作には「整理整頓」コーディングが必要になります。
具体的には、画像の高さが不ぞろいの場合、後に続くテキストの開始位置もバラバラになります。
画像の縮尺が不ぞろいなのは仕方ないにしても、テキストの開始位置は揃えたい。
どうすればよいか試行錯誤して揃えることができましたので、忘備録として記録いたします。
何も考えずに不ぞろい画像でコーディングするとこのような感じになります。
まずは現象です。
こちらの例をご覧ください。
画像の高さがそろっていない場合、商品名、テキストの開始位置もずれます。
これをキチンと揃えると見栄えが良くなります。
CSSだけで何とかならないかと思いましたが、無理だったのでJqueryで考えました。
私は、可能な限りCSSで解決したいと考えます。
今回の事例も、固定コーディングであればCSSだけで可能でしたが、カートなど画像サイズが動的に変化する仕組みの場合はCSSだけでは無理でした。
なぜならばCSSは「事前設定の原則」があるためです。
カートなど後から画像サイズ変化する動的なサイトには対応できませんでした。
そこで、動的に後から自動でCSSを変化できるJqueryで対処することにしました。
それがこちらです。
テキスト開始位置を揃えたサンプル
テキストの開始位置がきれいに整いました。
Jqueryでそろえたのですが、どうやって揃えたかを以下に開設いたします。
Jqeryでの開始位置の揃え方
HTMLソース
まずはHTMLソースを以下に記載します。
<!doctype html>
<html>
<head>
<meta charset="shift_jis">
<title>不揃い画像の高さをそろえる</title>
<style type="text/css">
dl
{
display: table;
table-layout: fixed;
width: 1230px;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
dt
{
display: table-cell;
width: 300px;
margin: 0px;
vertical-align: top;
border: 1px solid #000;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 0px;
}
dt h3
{
margin: 0px;
padding: 10px;
}
dt p
{
margin: 0px;
padding: 10px;
}
dt a
{
display: block;
background-color: #F90;
font-weight: bold;
color: #000;
text-decoration: none;
width: 90%;
text-align: center;
margin-right: auto;
margin-left: auto;
}
dt a:hover
{
background-color: #F60;
}
dd
{
display: table-cell;
margin: 0px;
padding: 0px;
}
dd:nth-child(8n)
{
display: table-row;
height: 10px;
}
</style>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script>
$(function()
{
var img_height = 0;
$.each($("dl dt img"),function()
{
if($(this).height() > img_height)
{
img_height = $(this).height();
}
});
$(".photo").css("height", img_height+"px");
});
</script>
</head>
<body>
<dl>
<dt>
<div class="photo"><img src="01.jpg" width="300" height="200"></div>
<h3>商品名</h3>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<a href="">詳細ボタン</a>
</dt><dd></dd>
<dt>
<div class="photo"><img src="02.jpg" width="300" height="300"></div>
<h3>商品名</h3>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<a href="">詳細ボタン</a>
</dt><dd></dd>
<dt>
<div class="photo"><img src="03.jpg" width="300" height="400"></div>
<h3>商品名</h3>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<a href="">詳細ボタン</a>
</dt><dd></dd>
<dt>
<div class="photo"><img src="04.jpg" width="300" height="500"></div>
<h3>商品名</h3>
<p>テキストテキストテキストテキストテキストテキストテキスト</p>
<a href="">詳細ボタン</a>
</dt><dd></dd>
<dt>
<div class="photo"><img src="04.jpg" width="300" height="500"></div>
<h3>商品名</h3>
<p>テキストテキストテキストテキストテキストテキストテキスト</p>
<a href="">詳細ボタン</a>
</dt><dd></dd>
<dt>
<div class="photo"><img src="02.jpg" width="300" height="300"></div>
<h3>商品名</h3>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<a href="">詳細ボタン</a>
</dt><dd></dd>
<dt>
<div class="photo"><img src="01.jpg" width="300" height="200"></div>
<h3>商品名</h3>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<a href="">詳細ボタン</a>
</dt><dd></dd>
<dt>
<div class="photo"><img src="03.jpg" width="300" height="400"></div>
<h3>商品名</h3>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<a href="">詳細ボタン</a>
</dt><dd></dd>
</dl>
</body>
</html>
長ったらしいですが、重要なのは78行目の<script>から93行目の</script>までです。
この部分でテキストの開始位置を揃えています。
Jquery部分の解説
Jquery部分のソースを以下に記載します。
<script>
$(function()
{
// 画像の高さを初期化
var img_height = 0;
// 配列の画像分ループ
$.each($("dl dt img"),function()
{
// 保存している画像の高さより大きい画像か？
if($(this).height() > img_height)
{
// 画像の高さを保存
img_height = $(this).height();
}
});
// 画像枠の高さを最大画像サイズに設定する
$(".photo").css("height", img_height+"px");
});
</script>やっていることは、対象画像の高さを全て調べ、最大値をCSSで設定しています。
$.each 文はループ文で、dl dt の中にある画像があるだけループします。
$.each文については、こちらで解説しています。
やっていることは単純な画像の背比べです。
ループ処理の概念が分かれば、簡単な内容です。
ことのついでに「詳細ボタン」の位置もそろえたい
こちらの例では、テキスト位置はそろっていますが、テキストの文字数が異なるため「詳細ボタン」の位置がずれてしまっています。
せっかくならば、ボタンの位置もそろえられれば、さらに見栄えが良くなります。
ということでそろえてみました。
やり方はCSSのみとJquery2通りあります。
詳細ボタン位置が一番下の場合は、CSSだけで揃えることができます。
CSSのabsoluteを使って、下配置するだけです。
ただ今回はせっかくなのでJqueryのみでそろえてみました。
それがこちらです。
詳細ボタンの位置もそろったので、より見栄えが良くなりました。
以下にやり方を解説いたします。
Jqueryでやる場合は、テキストの縦サイズをそろえればOKです。
画像の高さをJqueryで調べたように、テキストの高さをJqeuryで調べればOKです。
以下にソースを記載します。
<script>
$(function()
{
var img_height = 0;
var p_height = 0;
// 画像の高さを求める
$.each($("dl dt img"),function()
{
if($(this).height() > img_height)
{
img_height = $(this).height();
}
});
$(".photo").css("height", img_height+"px");
// テキストの高さを求める
$.each($("dl dt p"),function()
{
if($(this).height() > p_height)
{
p_height = $(this).height();
}
});
$("p").css("height", p_height+"px");
});
</script>同じことを2回繰り返しています。
テキストの高さを調べ、最大値をCSSでテキストの高さに設定しています。
高さの最大値を設定しているので、見切れることはありません。
この部分を応用すれば、大抵の高さ揃えに使えます。
Jqueryは便利ですが過信は禁物
昨今のHTMLはJquery無しでは構築できないぐらい、密接なものになっています。
しかしながら、Jqueryを多用しすぎると思わぬ不具合につながることもあります。
CSSだけで解決できるならば、それに越したことはありません。
あくまでも、最後の手段としてのJqueryであると私は考えています。
また本記事がお役に立てば幸いです。