画像に対する表示位置の設定
画像に文章を回り込ませる方法
文章を製作していると、写真などの画像を示し、その右側、あるいは左側に説明を書きたいということが
しばしばあります。
このような場合は、float属性を指定します。
画像に回り込ませる文字列の画像との位置関係は、padding属性で指定します。
<div style="width:100%;;>
<img style="float:left;" src="images/png/logo_s.png" width="150" Height="60" alt="nanden_logo">
<p style="float:left;padding: 10px 30px;">
nanden.netのロゴです。<br>
初心者のためのレクチャーを意味するため、青葉の画像を使用しています。
</p>
</div>
実際の表示は下記の様になります。
nanden.netのロゴです。
初心者のためのレクチャーを意味するため、青葉の画像を使用しています。
文字の右に画像を回り込ませる場合は下記の様になります。
<div style="width:100%;">
<p style="float:left;padding: 10px 30px;">
nanden.netのロゴです。<br>
初心者のためのレクチャーを意味するため、青葉の画像を使用しています。
</p>
<img style="float:left;" src="images/png/logo_s.png" width="150" Height="60" alt="nanden_logo">
</div>
nanden.netのロゴです。
初心者のためのレクチャーを意味するため、青葉の画像を使用しています。
画像の下に文字を回り込ませる場合は下記の様になります。
nanden.netのロゴです。
初心者のためのレクチャーを意味するため、青葉の画像を使用しています。