画像

画像とテキスト・画像に枠線・写真のサイズを変える

webページや表の中の画像に並ぶ文字の位置を指定する！
ここで使用する像の画像のファイル名を "aaa.gif" とします。デフォルトでは、画像の下端に文字が表示されます。
　↓↓↓

ここに文字	何も指定しない <img src="aaa.gif">ここに文字デフォルトでは、画像の下端に文字が表示されます。
ここに文字ここに文字	何も指定しない－画像の両脇に文字ここに文字<img src="aaa.gif">ここに文字

*　*　*　*

左中央に文字右中央に文字	文字を中央に揃える左中央に文字<img src="aaa.gif" align="middle">右中央に文字
左上に文字右上に文字	文字を上に揃える左上に文字<img src="aaa.gif"align="top">右上に文字
左下に文字右下に文字	文字を下に揃える左下に文字<img src="aaa.gif" align="bottom">右下に文字

画像ファイルの代替テキスト情報（画像のかわりに表示される文字列）としてalt属性が使われています。画像の読み込みができなかった場合や画像の上にマウスが乗った時にテキストが表示されます。
画像の上にマウスを乗せてみて下さいテキストが表示されます。
　↓↓↓

alt属性で画像にテキスト

<img src="aaa.gif" alt="これはリスのイラストです">

border属性で画像に枠線を表示させることができます。
　↓↓↓

	border属性 border="0" で枠線は表示されない <img src="aaa.gif" border="0">
	border属性 border="1" で細い枠線が表示される <img src="aaa.gif" border="1">
	border属性 border="2" で太い枠線が表示される <img src="aaa.gif" border="2">

いったいどれくらいまでの太い枠線が表示されるのでしょう？
下図は border="10" です。
　↓↓↓

border属性
border="10" でとても太い枠線が表示される
<img src="aaa.gif" border="10">

style で枠線の色やスタイルを変えることができます。
　↓↓↓

	<img src="aaa.gif" style="border:solid 1px #3333cc">
	<img src="aaa.gif" style="border:dotted 2px #cc3366">

Photoshopなどお絵かきソフトを使わなくてもhtmlで写真の縮小ができます。
　↓↓↓

	この写真のオリジナルサイズはwidth="150" height="150"です <img src="xxx.jpg" width="150" height="150" border="0">
	サイズを変えるだけで縮小表示されます <img src="xxx.jpg" width="120" height="120" border="0">

●当サイトのソースは、IE6.0＋のみ動作確認をしております。それ以外のブラウザ、特にネットスケープでは正しく作動しない場合がございます。ご了承下さい。

★skip ページtop