キャプション付のイメージの貼り付け

イメージを貼り付けるときキャプション(イメージの説明)をつける場合もあるでしょう。そんな時は…

左にキャプション付イメージ

イメージ
イメージの説明
ここはキャプション付の画像を左に貼り付け、テキストは右側に回りこみます。

ここで回り込みを解除します。

このHTMLは

<p><span class="l-img"><img src="image/image1.jpg" alt="イメージ" width="200" height="150" /><br />
イメージの説明</span>ここはキャプション付の画像を左に貼り付け、テキストは右側に回りこみます。</p>
<p class="cl">ここで回り込みを解除します。</p>

右にキャプション付イメージ

イメージ
イメージの説明
ここはキャプション付の画像を右に貼り付け、テキストは左側に回りこみます。
ここで回り込みが解除

このHTMLは

<p><span class="r-img"><img src="image/image2.jpg" alt="イメージ" width="200" height="150" /><br />
イメージの説明</span>ここはキャプション付の画像を右に貼り付け、テキストは左側に回りこみます。<br class="cl"/>
ここで回り込みが解除</p>

中央にキャプション付イメージ

ここはキャプション付の画像を中央に貼り付け、テキストの回り込みはありません。イメージ
イメージの説明

当然回り込みの解除もありません。

このHTMLは

<p>ここはキャプション付の画像を中央に貼り付け、テキストの回り込みはありません。<span class="c-img"><img src="image/image3.jpg" alt="イメージ" width="250" height="188" /><br />
イメージの説明</span>
当然回り込みの解除もありません。</p>