小規模Webサイト向け CMS 「すぐ使えるCGI」のサポート情報

サイズの違う画像を幅か高さで揃えて並べるCSS

最終更新日: 2016-07-26
大きさの違う画像のサイズを揃える

CMSでホームページを更新すると、最初にデザインを考えた時とは違うサイズや形の画像をアップロードする事や、縦長の画像と横長の画像が混在している事があります。

このような場合に、表示サイズを「高さ」または「幅」で揃えるためのCSSを紹介します。

高さを揃える

画像の高さを揃えて並べる
例えば、複数の画像を横に並べる時に全て高さを揃えると、形が違うものがあってもきれいに表示できます。

幅を揃える

画像の幅を揃えて並べる
一方、画像を縦方向に並べる場合は、画像の幅を揃えるときれいに表示できます。

類似の方法

このサポートページではサイズや形(縦長、横長)の違う画像の縦横比は変更せずに(=縦長画像は縦長に、横長画像は横長に)表示する方法をご紹介します。

画像の形に関わらず同じスペースに表示したい(例:常に正方形で表示したい)場合は、下記ページをご覧下さい。

縦横比の違う画像を同じサイズに揃える方法

「すぐ使えるCGI」への応用

このページでは CSS の設定の考え方だけをご紹介します。「すぐ使えるCGI」のテンプレートに設定する場合は、生成されたページが同様の表示になるように調整して下さい。

画像の高さを揃えて並べる方法

考え方

高さが同じ画像の inline-block

画像(<img>)を <a>(※1)で囲い、「display: inline-block;」を指定した上で高さだけを指定します(CSS サンプル中の青字部分)。幅は画像をゆがめないようにブラウザが自動計算して表示してくれます。

複数の画像を並べる場合、画像は左から右へ、上の行から下の行へと詰めて表示されますので、画像を囲った <a> の右と下にマージンを取ります(CSS サンプル中の赤字部分)。

HTML

<a class="thumbnail" href="image1.jpg" target="_blank"><img src="s_image1.jpg" alt=""></a>
<a class="thumbnail" href="image2.jpg" target="_blank"><img src="s_image2.jpg" alt=""></a>
<a class="thumbnail" href="image3.jpg" target="_blank"><img src="s_image3.jpg" alt=""></a>
<a class="thumbnail" href="image4.jpg" target="_blank"><img src="s_image4.jpg" alt=""></a>
 :


※1 上記コードでは、「サムネイルから拡大画像にリンクする」という想定で画像を <a> タグで囲っています。このような必要が無ければ <a> の代わりに <div> で囲って下さい。

CSS

.thumbnail {
	display: inline-block; /* ここがポイント */
	height: 80px;
	margin-right: 15px;
	margin-bottom: 15px;
}
.thumbnail img {
	height: 100%;
}

両端揃えができない制限

左右をきっちり揃えることができない
画像が多く2段以上になった場合、1段目に収まりきらなかった画像は2段目に送られますが、マージンも含めて1段に収まるかが計算されるため、領域の左端から右端まできっちりと画像を詰め込む事はできません。

画像の幅を揃えて並べる方法

考え方

画像のためのカラム幅を決定

幅を指定した領域を設定し(CSS、HTML サンプル中の青字部分)、その中に <a>(※1)で囲った <img> を幅 100% で配置します。高さは画像をゆがめないようにブラウザが自動計算して表示してくれます。

複数の画像を並べる場合、上から下へ詰めて表示されますので、画像の下にマージンを取ります(CSS サンプル中の赤字部分)。

HTML

<div style="image_col">
	<a class="thumbnail" href="image1.jpg" target="_blank"><img src="s_image1.jpg" alt=""></a>
	<a class="thumbnail" href="image2.jpg" target="_blank"><img src="s_image2.jpg" alt=""></a>
	<a class="thumbnail" href="image3.jpg" target="_blank"><img src="s_image3.jpg" alt=""></a>
	<a class="thumbnail" href="image4.jpg" target="_blank"><img src="s_image4.jpg" alt=""></a>
	 :
</div>

※1 上記コードでは、「サムネイルから拡大画像にリンクする」という想定で画像を <a> タグで囲っています。このような必要が無ければ <a> の代わりに <div> で囲って下さい。

CSS

.image_col {
	width: 25%;
}
.thumbnail {
	width: 100%;
	margin-bottom: 15px;
}
.thumbnail img {
	width: 100%;
}

関連リンク

さらに詳しく