|
ホーム ＞ 画像 ＞ 画像にテキストの回り込みを指定。
■画像にテキストの回り込みを指定。
<img src="★" align="■">
★･･････画像のファイル名(URL)
■･･････left,right
align属性でleftかrightを指定すると、
画像を片側に配置しその画像の反対側に
複数行のテキストを回り込みさせることができます。
画像の反対側に入り込まなかったテキストは
画像の下に配置されます。
left
┗画像を左側に配置し、テキストはその右側に回り込む。
right
┗画像を右側に配置し、テキストはその左側に回り込む。
記入例。
 メモ帳 |
|
ファイル(F) 編集(E) 書式(O) 表示(V) ヘルプ(H) |
<!DOCTYPE HTML PUBLIC-"//W3C//DTD HTML4.01 Transitional//EN">
<html>
<head>
</head>
<body>
<img src="sample.gif"
alt="サンプル画像">
align属性を指定しない場合、初期値のalign=bottomが適用されます。
テキストは画像に回り込まず１行のみが画像と同じ行になります。
あとのテキストは画像の下に送られます。
<br>
<hr>
<br>
<img src="sample.gif"
align="left" alt="サンプル画像">
align属性でleft属性を指定すると指定すると画像は左側に配置され、
テキストは右側に回り込みます。こんな感じに画像が表示されテキストは回り込みます。
画像の反対側に回り込まなかったテキストは画像の下に送られます。<br>
<br>
また画像を使用する際はwidth属性とheight属性は指定するようにしましょう。
指定しなくても画像は表示されるのですが、
指定するとブラウザが画像の表示スペースを先に確保するので、
ページを表示する時間が短くなります。<br>
<br>
またwidth属性とheight属性で画像本来のサイズより小さく表示したても
ページが表示されるスピードは変わりません。小さくするだけで
画像本来のサイズは変わらないからです。<br>
<br>
画像を使う場合alt=""は必須です。特に指定する場合がないときでも
alt属性は指定するようにしましょう。
何もテキストを入れない場合はalt=""と書いておけば大丈夫です。
<br>
<hr>
<br>
</body>
</html>
|
表示結果
 |
|
 |
|
 align属性を指定しない場合、初期値のalign=bottomが適用されます。テキストは画像に回り込まず１行のみが画像と同じ行になります。あとのテキストは画像の下に送られます。
align属性でleft属性を指定すると指定すると画像は左側に配置され、テキストは右側に回り込みます。こんな感じに画像が表示されテキストは回り込みます。画像の反対側に回り込まなかったテキストは画像の下に送られます。
また画像を使用する際はwidth属性とheight属性は指定するようにしましょう。指定しなくても画像は表示されるのですが、指定するとブラウザが画像の表示スペースを先に確保するので、ページを表示する時間が短くなります。
またwidth属性とheight属性で画像本来のサイズより小さく表示したてもページが表示されるスピードは変わりません。小さくするだけで画像本来のサイズは変わらないからです。
画像を使う場合alt=""は必須です。特に指定する場合がないときでも alt属性は指定するようにしましょう。何もテキストを入れない場合はalt=""と書いておけば大丈夫です。
|
 |
 |
 |
 |
|
スポンサードリンク
ホーム
