プロが教えるホームページの作り方

プロが教えるホームページの作り方
プロが教えるホームページの作り方		ホーム　｜メール

スポンサードリンク

タグ一覧

役立つ豆知識

リンク

姉妹サイト

スポンサードリンク

初心者のためのホームページの作り方

ホーム＞画像＞画像とテキストとの間隔を指定

■画像とテキストとの間隔を指定

<img src="★" vspace="■" hspace="▲">
★･･････画像ファイル名(URL)
■･･････画像ファイルに対する上下の空白(ピクセル数)
▲･･････画像ファイルに対する左右の空白(ピクセル数)

画像の周囲に対して空白を作りたいときに使用します。
vaspace属性は上下の空白を、
hspace属性は左右の空白をピクセル数で指定します。

記入例。

メモ帳

ファイル(F) 編集(E) 書式(O) 表示(V) ヘルプ(H)

<!DOCTYPE HTML PUBLIC-"//W3C//DTD HTML4.01 Transitional//EN">
<html>
<head>

</head>
<body>

<img src="sample.gif" align="left" vspace="20" hspace="50" alt="サンプル画像"> align属性でleft属性を指定すると指定すると画像は左側に配置され、テキストは右側に回り込みます。こんな感じに画像が表示されテキストは回り込みます。画像の反対側に回り込まなかったテキストは画像の下に送られます。 
 
また画像を使用する際はwidth属性とheight属性は指定するようにしましょう。指定しなくても画像は表示されるのですが、指定するとブラウザが画像の表示スペースを先に確保するので、ページを表示する時間が短くなります。 
 
またwidth属性とheight属性で画像本来のサイズより小さく表示したてもページが表示されるスピードは変わりません。小さくするだけで画像本来のサイズは変わらないからです。 
 
画像を使う場合alt=""は必須です。特に指定する場合がないときでも alt属性は指定するようにしましょう。何もテキストを入れない場合はalt=""と書いておけば大丈夫です。 
<hr>
 

</body>
</html>

表示結果

サンプル画像 align属性でleft属性を指定すると指定すると画像は左側に配置され、テキストは右側に回り込みます。こんな感じに画像が表示されテキストは回り込みます。画像の反対側に回り込まなかったテキストは画像の下に送られます。

また画像を使用する際はwidth属性とheight属性は指定するようにしましょう。指定しなくても画像は表示されるのですが、指定するとブラウザが画像の表示スペースを先に確保するので、ページを表示する時間が短くなります。

またwidth属性とheight属性で画像本来のサイズより小さく表示したてもページが表示されるスピードは変わりません。小さくするだけで画像本来のサイズは変わらないからです。

画像を使う場合alt=""は必須です。特に指定する場合がないときでも alt属性は指定するようにしましょう。何もテキストを入れない場合はalt=""と書いておけば大丈夫です。