段組での画像の貼り付け
メインの部分に段組を作成したときのイメージの貼り付けは次のようになります。
このようにイメージを左に配置し、テキストを右側に回りこませます。
そしてここで回り込みを解除します。
このようにイメージを右に配置し、テキストを左側に回りこませます。
そしてここで回り込みを解除します。
キャプション付きイメージの貼り付け
イメージの説明このようにキャプション付きイメージを右に配置し、テキストを左側に回りこませます。
そしてここで回り込みを解除します。
イメージの説明このようにキャプション付きイメージを左に配置し、テキストを右側に回りこませます。
そしてここで回り込みを解除します。
これらのHTMLは以下のとおりです。難しい記述はないでしょう。
<div class="clearfix">
<div class="main_left_box1">
<p><img src="image/image4.jpg" alt="イメージ" width="110" height="110" class="l" />このようにイメージを左に配置し、テキストを右側に回りこませます。</p>
<p class="cl">そしてここで回り込みを解除します。</p>
</div>
<div class="main_right_box1">
<p><img src="image/image5.jpg" alt="イメージ" width="110" height="110" class="r" />このようにイメージを右に配置し、テキストを左側に回りこませます。<br class="cl" />
そしてここで回り込みを解除します。</p>
</div>
</div>
<div class="clearfix">
<div class="main_left_box2">
<p><span class="r-img"><img src="image/image6.jpg" alt="イメージ" width="110" height="110" /><br />
イメージの説明</span>このようにキャプション付きイメージを右に配置し、テキストを左側に回りこませます。</p>
<p class="cl">そしてここで回り込みを解除します。</p>
</div>
<div class="main_right_box2">
<p><span class="l-img"><img src="image/image7.jpg" alt="イメージ" width="110" height="110" /><br />
イメージの説明</span>このようにキャプション付きイメージを左に配置し、テキストを右側に回りこませます。</p>
<p class="cl">そしてここで回り込みを解除します。</p>
</div>
</div>
めいっぱいのイメージ
上のように各段組でめいっぱいのイメージを入れるときは、
「main_left_box1」と「main_right_box1」のとき、そのイメージの幅は293ピクセルとなり、「main_left_box2」と「main_right_box2」のとき、そのイメージの幅は295ピクセルとなります。