画像を用意する
まずは、挿入したい画像を用意します。画像の保存場所は前述の作業フォルダ「マイドキュメント¥web¥img」の中に保存してください。
画像の種類を見極める
一口に画像と言っても、インターネットで扱える種類は数種類あります。ここで確認しておきましょう。
| 種類 | 最大色数 | 圧縮方法 | 特徴 |
|---|---|---|---|
| GIF | 256色 | 可逆圧縮 | 画像を透明化できる。最大色数が少ないが、その分容量を抑えられる。
多くの色数を必要としないイラストなどに向いており、WEBサイト用として最適で、一番使用されている。 |
| JPEG | 1677万色 | 不可逆圧縮 | 最大色数が多いながら、画像の圧縮率が高い。
多くの色数を必要とする写真などに向いている。 圧縮率が高いと画像が荒くなるところが欠点。 |
| PNG | 280兆色 | 可逆圧縮 | 鮮明な画像を表示できる反面、容量が大きい。
ブラウザによっては対応していないので、WEBサイトには不向き。 |
※詳しくは「WEB画像について – HTMLクイックリファレンス」
以上より、WEBサイトにはGIF、JPEGを使用するようにしましょう。
画像を挿入する
それでは、実際に画像を挿入してみましょう。ここではタグで直接編集する方法を紹介します。
完成例
画像の回り込みは右寄せ。操作手順
デスクトップから[スタート]→[プログラム]→[アクセサリ]→[メモ帳]でメモ帳を起動する。
起動したら、以下の文字を入力するか、コピーして貼付（コピー＆ペースト）をする。
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=Shift_JIS”>
<meta http-equiv=“Content-Style-Type” content=“text/css”>
<title>画像を挿入しよう</title>
</head>
<body><!–画像の挿入タグ例–>
<img src=”./logo.gif” width=”140″ height=”53″ border=”1″ hspace=”5″ vspace=”5″ align=”right” alt=”トップロゴ”>画像の回り込みは右寄せ。
<!–ここまで–></body>
</html>
記述手順
黒字で表示している部分が、今回の画像の挿入を表すタグです。
<img>というタグに注目してください。タグは基本的に最後に</…>で閉じる必要がありますが、IMGタグは閉じません。
また、「src=””」の中は画像の場所を指定します。用意した画像へのリンクを相対パスまたは絶対パスで指定します。
さらに、画像の説明のための属性は「alt=””」で指定します。これは必ず記入するようにしてください。
※各属性について詳しくは
→リンクタグ：HTMLタグ辞典を参照してください。
※画像へのリンクの記述方法について詳しくは
→画像にリンクをつける：HTMLタグ辞典を参照してください。
「位置揃え（align）」の指定を変えると、画像に対する文字の表示位置が変わります。
さらに、枠を表示したくない場合は、「border=”0″」とします。
なお、代替テキスト(alt)に記入した説明文は画像の上にマウスを乗せると表示されます。
画像の仕組み （紹介サイトへ）
- 画像のデジタル化 – 情報化機器と情報社会
