［　ＭＥＮＵ ＰＡＧＥ　］　　　　　Ｓｔｅｐ　［１〜３］［４］［６］［７］［８］［ホームページのＵＬ方法］
Ｓｔｅｐ ５　　イメージ（画像）の設置
ホームページは文字だけでも、十分に表現可能ですが、やはりイメージを設置したほうが、より表現力が多彩になります。
そこで、このＳｔｅｐではイメージの設置について説明します。
イメージの設置にあたり、過剰なイメージの設置は今の回線事情からなるべく必要最小限にしておくことをおすすめします。
最近、ブロードバンド（高速通信？）が流行りになっていますが、普及率はまだまだのようです。　制作にあたっては「ＩＳＤＮ回線」「アナログ回線」でもストレスを感じさせないページ作りをしたいものです。

ホームページで利用可能なイメージファイルとして（ｇｉｆ）（ｊｐｇ）が一般的です。
［ｇｉｆ］ファイルとは最高２５６色でイメージ表現を可能にします。（イラストなどに最適）
アニメーションや透明など用途はイロイロあります。
［ｊｐｇ］ファイルとは最高１６７７万色でイメージ表現を可能にします。（写真などに最適）
写真でも色数の少ないものは「ｇｉｆ」ファイルの方がよい場合もあります。　画質が同じであればファイルサイズの小さい方を使用ください。

１枚あたりのファイルサイズとして「１０Ｋバイト」以下がベストだと思います。あまりにサイズが大きくなる場合はイメージをスライスすることをおすすめします。
スライスとは？
１枚のイメージファイルを分割することをいいます。
なぜ分割するのか？
「２０Ｋ」１枚のファイルと「７Ｋ」３枚のファイルでは「７Ｋ」３枚の方が読み込みが早いからです。

※スライスについては、お使いのソフトを参照ください。

代表的なイメージ制作ソフト
Ａｄｏｂｅ　Ｐｈｏｔｏｓｈｏｐ６．０ イメージ・文字などの制作編集にすぐれているプロ愛用のソフトです。
標準価格￥９６，１００-
Ａｄｏｂｅ　Ｉｌｌｕｓｔｒａｔｏｒ９．０ イラストレーションソフトでイラスト制作にすぐれているソフトです。Ｐｈｏｔｏｓｔｏｐと併用で多彩な表現力を可能にします。
標準価格￥７９，５００-
Ｍａｃｒｏｍｅｄｉａ　Ｆｉｒｅｗｏｒｋｓ４ Ｗｅｂ制作をベースに開発されたソフトです。イメージ・文字などの制作編集に利用　値段が安い上に高機能　
標準価格￥１６，０００-
Ｍａｃｒｏｍｅｄｉａ　Ｆｒｅｅ　Ｈａｎｄ９ イラストレーションソフトでイラスト制作にすぐれているソフトです。
標準価格￥６８，０００-
フリーソフトですぐれものを調査中です。


それでは簡単なサンプルページを作ってみましょう。

サンプルイメージファイル（ｊｐｇ）
ファイル名 "hana01.jpg"
ファイルサイズ "１１Ｋバイト"
イメージサイズ "348X245ピクセル"
ファイル名 "hana02.jpg"
ファイルサイズ "７Ｋバイト"
イメージサイズ "348X245ピクセル"

サンプルイメージファイル（ｇｉｆ）
ファイル名 "te02.gif"　
ファイルサイズ "1.5Ｋバイト"
画像サイズ "136X136ピクセル"
ファイル名 "te04.gif"　
ファイルサイズ "1.5Ｋバイト"
画像サイズ "136X136ピクセル"

サンプルページ
サンプルページＳｔｅｐ　５


いよいよ春です。
寒い冬も終わり、ようやく暖かい季節がやってきました。
---------------------------------------
---------------------------------------
---------------------------------------
花１アジサイの花です。
----------------
----------------
----------------
左
綺麗でしょ！

　

　

花２この花はなんでしょう？
----------------
----------------
右
実は私もわかりません。

サンプルページのソースコード

<html>
<head>
<title>サンプルページ</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</head>

<body bgcolor="#FFFFFF" text="#000000">
<div align="center"><font size="7" color="#3300FF">サンプルページＳｔｅｐ　５</font></div>
<br>
<font size="4">いよいよ春です。<br>
寒い冬も終わり、ようやく暖かい季節がやってきました。<br>
---------------------------------------<br>
---------------------------------------<br>
---------------------------------------<br>
<img src="hana01.jpg" width="348" height="245" align="left" alt="花１" >アジサイの花です。<br>
----------------<br>
----------------<br>
----------------<br>
<img src="te04.gif" width="136" height="136" alt="左"> <br>
<font color="#FF0000">綺麗でしょ！</font>
<p align="right">　
<p align="right">　
<p align="right"><img src="hana02.jpg" width="348" height="245" align="right" alt="花２">この花はなんでしょう<br>
----------------<br>
----------------<br>
<img src="te02.gif" width="136" height="136" alt="右"><br>
<font color="#0000FF">実は私もわかりません。</font>
</font>
</body>
</html>
ソースの説明
<img src="te04.gif" width="136" height="136">
イメージファイルの設置には<img src="ファイル名"で記述します。
記述の際はイメージサイズも記述してください。　読み込みが早くなります。
align="left"　　　 align="right"
イメージファイルに文章を回り込み、させるために記述します。
※回り込みが必要ない場合は記述は不要です。
align="left"　　イメージは左揃えで文章は右側に表示されます。
align="right"　イメージは右揃えで文章は左側に表示されます。
記述のない場合はイメージの外側に一行文のみ表示となり、改行した場合はイメージの下に表示となります。
<p align="right">
段落分けで、この記述以降の表示部分は右揃えとなります。
通常、揃えの記述がない場合、左揃えとなるため今回の場合、イメージと文章にスペースが生じることになります。
alt="花１"
altとはイメージ上にマウスを置いたときに表示される文です。
また、イメージを表示できないブラウザの場合はイメージの代替として表示されます。
背景にイメージを使う
　
背景イメージのソースコード
<head>
<title>サンプルページ</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</head>
<body bgcolor="#FFFFFF" text="#000000" background="te02.gif">
</body>
</html>
ソースの説明
<body>タグ内に background="ｘｘｘ.gif"と記述するだけです。（ｊｐｇファイルも可）
表示画面に指定したイメージがタイル上に表示されます。

このソースコードを「コピー」＆「ペースト」で実行してみてください。　同じ結果が得られるはずです。
イロイロ試しためしてみましょう。
次のＳｔｅｐはページのリンクについて説明します。
［　Ｓｔｅｐ ６へ　］
Copyright © 2000 asarinet,co.all rights reserved.