サイト内検索
...HTML・XHTMLタグ...
画像
画像の回り込み
- 画像の回り込みは、img要素にalign属性を指定します。
- [使い方]
- <img src="../img/sample.jpg" align="right">
- [メモ・・・Ｗ３Ｃの検証サイト・・・]
- HTML 4.01 Strict ・XHTML 1.0 Strictでは推奨されていませんので、
- Validするには、スタイルシートを使用します。
- 左右の配置には、
- flotプロパティを指定します。
- そのあとに続くテキストの上下の位置には、
- vertical-alignプロパティを指定します。
- [サンプル]
- .sample1{flot: left;}
- .sample2{vertical-align: bottom;}
| 属性 | 属性値 | 説明 |
|---|---|---|
| align= | "left" | 画像は左側に
右にテキストが回り込みます。 |
| "right" | 画像は右側に
左にテキストが回り込みます。 |
|
| "top" | 画像の上端に合わせてテキストを表示します。 | |
| "middle" | 画像の長さ（縦）の中央にテキストを表示します。 | |
| "bottom" | 画像の下端に合わせてテキストを表示します。 |
サンプル
alignを指定
[ｂｏｄｙの中]
<img src="../img/sample.jpg" width="110" height="70" align="left">align="left"を指定しています
vertical-align・flotを指定
[ｂｏｄｙの中]
<div style="vertical-align:bottom;"><img src="../img/sample.jpg" style="flot: left;"
width="110" height="70" alt="サンプル" >
flot: left;
vertical-align: bottom;を
指定しています
</div>
[ブラウザ上]
float:left
vertical-align: bottom;を
指定しています
