キャプション(題名)付きの画像を縦横に等間隔で並べるHTMLとCSSの書き方

ウェブ上で画像を縦横に並べたいとき、画像単体だけではなく「画像にキャプション(題名)を加えた『画像ボックス』」を縦横に並べたい場合も多々あります。そのような、キャプション(題名)付きの画像を縦横に等間隔で並べる方法を解説してみます。

画像にキャプションを加えるには、従来は単に「画像(img要素)の付近にspan要素などの適当な要素を使ってキャプションを記述する」くらいしか方法がありませんでしたが、HTML5では専用のfigure要素・figcaption要素が使えます。どちらも似たような記述で使えますし、適用するスタイルシートもほぼ同じですが、HTML5の書き方の方が画像とキャプションとを1対1で結びつけられるので望ましいでしょう。以下に、両方の書き方を掲載します。

画像にキャプションを加えるHTMLの書き方

HTML5の書き方を使うにしても、HTML4以前の書き方を使うにしても、画像をimg要素で記述する点は同じです。
HTML5未対応の古いブラウザでの表示を気にするなら後者の方法で書いておく方が無難ですが、古いブラウザを切り捨てて構わないならHTML5の書き方(figure要素とfigcaption要素)を使うと良いでしょう。HTML5の書き方であっても、画像そのものの表示にはimg要素が使われるので、古いブラウザでも画像の表示そのものに問題はありません。

▼HTML5で追加されたfigure要素とfigcaption要素を使って、キャプション付き画像を並べる方法

HTML5では、画像にキャプションを加える目的でfigure要素とfigcaption要素が使えるようになりました。書き方は簡単で、下記のように「画像とキャプションの全体」をfigure要素で囲み、画像はimg要素で記述し、キャプションはfigcaption要素で記述するだけです。

<figure>
   <img src="summerriver.jpg" alt="写真">
   <figcaption>キャプション</figcaption>
</figure>

この方法だと、figcaption要素(3行目)で記述した文字列が、img要素で指定した画像(2行目)に対するキャプションだと明示できまから、後述の方法(HTML4までの方法)よりも望ましいでしょう。

▼単純にimg要素にspan要素を併記する方法で、キャプション付き画像を並べる方法

HTML4以下では特に画像に対するキャプションを指定する記述方法はないので、単にimg要素に続いてキャプションをテキストで書き、全体を何らかの要素で囲んで1セットにするくらいしかありません。例えば下記のようにです。

<p class="imagebox">
   <img src="summerriver.jpg" alt="写真">
   <span class="caption">キャプション</span>
</p>

ここでは、全体をp要素で囲んだ上で、画像(img要素)の直後にspan要素を使ってキャプションを記述しています。後からスタイルシートで装飾を加えるために、適宜class属性を使ってclass名を付加しています。

HTML5とHTML4以下での書き方を並べて紹介しましたが、どちらの記述方法でも記述量はほぼ同じですし、どちらでも以下のスタイルシートで同じように表示ができます。

キャプション付き画像を縦横に並べるCSSの書き方(inline-blockを使う場合)

さて、HTMLソースが書けたらスタイルシートを適用しましょう。
HTMLソースをHTML5で記述したのかHTML4で記述したのかによってセレクタの書き方が異なりますが、CSSそのものの中身は同じです。
複数のブロックを縦横に並べたい際には、1つ1つのブロックを構成する要素を「インラインブロック(inline-block)」にしてしまう方法が楽です。インラインブロックにすると、ブロックレベル要素をインライン要素のように配置できます。

▼キャプション付き画像をHTML5(figure要素・figcaption要素・img要素)で書いた場合のCSS

まず、「キャプション付き画像」全体を囲むfigure要素をインラインブロック化して余白や背景色などの装飾を加えます。img要素の余白を調整するにはimg要素自体を明示的にブロックレベル要素にしておく方が楽です。最後にキャプションを作るfigcaption要素に対しても文字サイズの装飾を加えています。

/* ▼キャプション付き画像全体を囲むボックスの装飾 */
figure {
	display: inline-block;   /* インラインブロック化 */
	margin: 0px 3px 7px 0px; /* 外側に余白を追加(※右に3px・下に7px) */
	background-color: #ccc;  /* 背景色 */
}
/* ▼画像に対する装飾 */
figure img {
	display: block;          /* 余計な余白が出ないようにする */
	margin: 0px 0px 3px 0px; /* 下側にだけ3pxの余白を追加 */
}
/* ▼キャプションに対する装飾 */
figcaption {
	font-size: 0.9em;        /* 文字サイズを90%に */
	text-align: center;      /* 中身をセンタリング */
}

このサンプルでは特にclass名などを付加していませんが、実際に使用する際には適当なclass名を付加する方が使いやすいかも知れません。インラインブロック化する3行目以外は好きなように変更して下さい。

▼キャプション付き画像を単純にimg要素にspan要素を併記する方法で書いた場合のCSS

まず、「キャプション付き画像」全体を囲むp要素(class名はimagebox)をインラインブロック化して余白や背景色などの装飾を加えます。img要素の余白を調整するにはimg要素自体を明示的にブロックレベル要素にしておく方が楽です。最後にキャプションを作っているspan要素(class名はcaption)に対しても文字サイズの装飾を加えています。

/* ▼キャプション付き画像全体を囲むボックスの装飾 */
p.imagebox {
	display: inline-block;   /* インラインブロック化 */
	margin: 0px 3px 7px 0px; /* 外側に余白を追加(※右に3px・下に7px) */
	background-color: #ccc;  /* 背景色 */
}
/* ▼画像に対する装飾 */
p.imagebox img {
	display: block;          /* 余計な余白が出ないようにする */
	margin: 0px 0px 3px 0px; /* 下側にだけ3pxの余白を追加 */
}
/* ▼キャプションに対する装飾 */
p.imagebox span.caption {
	font-size: 0.9em;        /* 文字サイズを90%に */
	text-align: center;      /* 中身をセンタリング */
}

以上のHTMLとCSSを使って表示すると、以下のように見えます。

上記のようにインラインブロック化して並べる方法だと、回り込みの解除などの余計な処理が不要ですし、(インライン要素のように装飾可能なので)右寄せや全体のセンタリングも簡単です。しかし、HTMLソース内でボックス間に空白や改行がある場合は、ボックス間に半角スペースが1つ挿入されるため、横方向には若干の余計な空白が付加されます。「キャプション付き画像」群の間隔をもっときっちり指定したい場合は、後述のfloatプロパティを使う方が良いかも知れません。

キャプション付き画像を縦横に並べるCSSの書き方(floatを使う場合)

先程はdisplayプロパティを使ってインラインブロック化(inline-block)して並べましたが、floatプロパティを使って並べる方法もあります。floatプロパティの方が古くから使えたので、こちらの方がむしろ使用数は多いかも知れません。「最後に回り込みを解除しないとレイアウトが崩れる」という問題点さえクリアすれば簡単に使えます。

例えば、以下のようにHTMLソースを記述して「キャプション付き画像」を列挙している場合、

<div class="imagearea">
	<figure><img src="summerriver.jpg" alt="写真"><figcaption>キャプション1</figcaption></figure>
	<figure><img src="summerriver.jpg" alt="写真"><figcaption>キャプション2</figcaption></figure>
	<figure><img src="summerriver.jpg" alt="写真"><figcaption>キャプション3</figcaption></figure>
	：　　：　　：
</div>

以下のようにCSSソースを記述します。

figure {
	float: left;             /* 左に寄せて後続を右に回り込ませる */
	margin: 0px 7px 7px 0px; /* 外側に余白を加える(右に7px・下に7px) */
	background-color: #ccc;  /* 背景色 */
}
figure img {
	display: block;          /* 余計な余白が出ないようにする */
	margin: 0px 0px 3px 0px; /* 下側にだけ3pxの余白を追加 */
}
figcaption {
	font-size: 0.9em;        /* 文字サイズを90%に */
	text-align: center;      /* 中身をセンタリング */
}
div.imagearea:after {
	content: "";      /* ※Clearfix */
	clear: both;
	display: block;
}

まず、figure要素にfloatプロパティを加えて値に「left」を指定することで、figureプロパティを左寄せで並べています。こうすることで、後続のあらゆる要素が(描画空間がある限り)横方向に並ぶようになります。しかし、この方法だと、「キャプション付き画像」群が終わったあとの要素も右側に回り込んでしまうため、最後に「回り込みの解除」が必須です。それが14行目～18行目の部分です。after疑似要素にClearfixを加えることで、回り込みを解除しています。(回り込みの解除方法は他の手段でも構いません。)

表示例は以下の通りです。

このように、floatを使って並べると末尾に回り込みの解除処理が必須なため、CSSソースの記述量が若干増えます。その代わり、縦横の空白をきっちり調整しやすいメリットがあります。上記では縦横共に7px間隔になっています。等間隔で並べたい場合にはfloatを使う方が楽かも知れません。

というわけで、キャプション(題名)付きの画像を縦横に等間隔で並べる方法でした。

(更新日：2017年07月12日)