キャプション付のイメージの貼り付け
イメージを貼り付けるときキャプション(イメージの説明)をつける場合もあるでしょう。そんな時は…
左にキャプション付イメージ
イメージの説明ここはキャプション付の画像を左に貼り付け、テキストは右側に回りこみます。
ここで回り込みを解除します。
この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>