画像を挿入する [タグ編]

画像を用意する

まずは、挿入したい画像を用意します。画像の保存場所は前述の作業フォルダ「マイドキュメント¥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)に記入した説明文は画像の上にマウスを乗せると表示されます。

画像の仕組みをもっと知りたい

画像の仕組み (紹介サイトへ)

  • 画像のデジタル化 – 情報化機器と情報社会
画像を背景に使用するには?

背景画像を指定する

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSSを優しく学ぶには

created by Rinker
¥2,178 (2020/10/04 17:18:34時点 Amazon調べ-詳細)

WordPressで簡単にブログを書いてみたい方

最新情報をチェックしよう!