イメージ画像について
- html 画像（イメージタグ）編です。正直な話画像がなくてもHTMLは書けます。装飾などには必要不可欠です。
- □ 画像を表示する
＜img src="★"＞
★・・・画像ファイルのURL
指定した場所に、画像を埋め込みます。
また、画像を埋め込む場合にはalt属性も必ず指定しなくてはならないので気を付けましょう。
例
＜p＞
＜img scr="../img/sample.gif"＞
＜/p＞
- □ 画像の代わりのテキストを指定する
＜img src="★"alt="☆"＞
★・・・画像ファイル名（URL）
☆・・・画像ファイルの代わりのテキスト
画像を表示できないブラウザのために、画像の代わりに表示されているテキストを指定するのが「alt属性」です。画像を読み込まないように設定しているブラウザや画像を表示できるブラウザであっても画像を読み込むまでの時間、または画像の読み込みに失敗した場合にもこのテキストが表示されるようになります。
また、HTML4.01ではalt属性を必ず設定することになっています。しかし、画像代用となるテキストなので関係のないテキストや無意味なテキストなどを置かないように気をつけて下さい。
例
＜p＞
＜img src="../img/sample/gif"alt="サンプル画像"＞
＜/p＞
- □ 画像のサイズを指定する
＜img src="★"widht="●"height="○"＞
★・・・画像ファイル名
●・・・幅（ピクセルまたは％）
○・・・高さ（ピクセルまたは％）
画像の表示サイズを指定するときに、width属性、height属性を使用します。
ピクセルでは画像のサイズを直接指定します。パーセント（％）ではウィンドウの大きさに対する割合で指定します。パーセントでは画像のサイズは相対的になるので、ウィンドウのサイズに左右されてしまいます。またwidth属性、height属性をしない場合では画像本来の静で表示されます。
例
＜p＞
＜img src="../img/sample.gif"width="200"height=200"alt=""＞
- □ 画像の枠線を設定する
＜img src="★"border="☆"＞
★・・・画像ファイル名（URL）
☆・・・枠線の太さ（ピクセル）
一般的には画像の周りに枠線はひかれません。なので、画想を枠線で囲む場合にはborder属性を使い、線の太さをピクセルで決めます。
画像にリンクを設定したときに表示される枠線の有無や太さも、このborder属性で変更することが出来ますが、枠線の色の指定はできません。
例
＜p＞
＜img src="../img/sample.gif" border="10" width="200" heigth="200" alt=""＞
＜/p＞
- □ テキストの並び方を指定する
＜img src="★" algin="☆"＞
★・・・画像ファイル名（URL）
☆・・・top,middle,bottom
通常、画像は前後のテキストと一緒にひとつの行に配置されます。algin属性を使うと、その際の画像とテキストの並べ方を指定することもできます。
top 画像の上部と周囲のテキストの上部を揃えます。
middle 画像の中央と周囲のテキストのベースラインを揃えます。
bottom 画像の下部と周囲のテキストのベースサインを揃えます（デフォルト）。
画像をひとつの行に含めるため、当然のことながらその前後のテキストも１行分しか表示されません。１行に収まりきらない文章などは画像の下に送られますが、画像の隣に複数行のテキストを並べたいときはlefy,rightを指定します。
例
＜p＞
＜img src="../img/sample.gif" width="100" height="100" align="top" alt=""＞
topを指定
＜/p＞
＜p＞
＜imag src="../img/sample.gif" width="100" height="100" aligim="middle" alt=""＞
middleを指定
＜/p＞
＜p＞
＜img src="../img/sample,gif" width="100" height="100" align="bottom" alt=""＞
bottomを指定
＜/p＞
topを指定
middleを指定
bottomを指定
- □ 背景に画像を設定する
＜body background="■"〜＜/body＞
ページ背景に使う画像の場合は、＜body＞タグのbackground属性で使用するファイルを指定します。読み込んだ画像は連続してタイルに表示されます。部分的に表示したり途中から設定を変更することは出来ないので気をつけましょう。
背景画像ですから、サイズの大きな重たい画像ファイルを使用するのはなるべく避けたほうがよいでしょう。
- □ 背景画像を固定する
＜body background="●"bgproperties="fixed"＞〜＜/body＞
通常、ブラウザ画面をスクロールすると背景画像も一緒にスクロールします。
ただし、internet Explorer３以降では、bgproperties="fixed"を指定すると、背景画像は固定されてスクロールしなくなってしまいます。
