画像位置について

画像位置について、あまり使わない機能を紹介します。

AP Divを描画

[挿入]パネル-[レイアウト]カテゴリー-[AP Divを描画]を選択し、デザインビュー上でドラッグします。青い枠が表示されます。その中に画像を張り付けると、文字の上に画像を置く事ができたりします。ただ、すべてのブラウザで同じ表示ができるかというとわからないので、業務で使う人は良くテストしたうえで使いましょう。

画像を横に並べる

画像が大きいと、はみ出すので注意しましょう。
・HTML

<div class=”Container”>
<div class=”BoxA”><img src=”gazou1.jpg” /></div>
<div class=”BoxA”><img src=”gazou2.jpg” /></div>
<div class=”BoxA”><img src=”gazou3.jpg” /></div>
</div>

・CSS

.Container
{
width:600px;
}
.BoxA
{
float:left;
width:180px;
margin:5px;
}

clear:both;を続く要素に指定するのも忘れずにしましょう。

テーブルを使う方法もあります。

<table width=”600″ border=”0″ cellspacing=”5″ cellpadding=”0″>
<tr>
<td><img src=”gazou1.jpg” /></td>
<td><img src=”gazou2.jpg” /></td>
<td><img src=”gazou3.jpg” /></td>
</tr>
</table>

AP Divを描画

画像を横に並べる

関連記事