画像を用意する
まずは、挿入したい画像を用意します。画像の保存場所は前述の作業フォルダ「マイドキュメント\web\img」の中に保存してください。
画像の種類を見極める
一口に画像と言っても、インターネットで扱える種類は数種類あります。ここで確認しておきましょう。
| 種類 |
最大色数 |
圧縮方法 |
特徴 |
| GIF |
256色 |
可逆圧縮 |
画像を透明化できる。最大色数が少ないが、その分容量を抑えられる。多くの色数を必要としないイラストなどに向いており、WEBサイト用として最適で、一番使用されている。 |
| JPEG |
1677万色 |
不可逆圧縮 |
最大色数が多いながら、画像の圧縮率が高い。多くの色数を必要とする写真などに向いている。圧縮率が高いと画像が荒くなるところが欠点。 |
| PNG |
280兆色 |
可逆圧縮 |
鮮明な画像を表示できる反面、容量が大きい。ブラウザによっては対応していないので、WEBサイトには不向き。 |
※詳しくは「WEB画像について - HTMLクイックリファレンス」
以上より、WEBサイトにはGIF、JPEGを使用するようにしましょう。
画像を挿入する
それでは、実際に画像を挿入してみましょう。ここではタグで直接編集する方法を紹介します。
完成例
画像の回り込みは右寄せ。
|
操作手順
デスクトップから[スタート]→[プログラム]→[アクセサリ]→[メモ帳]でメモ帳を起動する。
起動したら、以下の文字を入力するか、コピーして貼付（コピー＆ペースト）をする。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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)に記入した説明文は画像の上にマウスを乗せると表示されます。
|
