画像タグ <img src="画像名">｜HTML辞典｜HTMLタグ・CSS

<img src="画像名"> の 「画像名」 の所に表示したい画像名を入れてください。
ファイル名が 「sozaiya」 で、JPG画像であれば　<img src="sozaiya.jpg">
ファイル名が 「sozaiya」 で、GIF画像であれば　<img src="sozaiya.gif">
「.jpg」 と 「.gif」 は画像の種類（拡張子）です。 「.png」 もたまに見かけます。
主に jpg が写真などに、 giｆ がイラストなど軽い画像に使われます。
対象ファイルを右クリックして 「プロパティ」 の 「種類」 という所を見ると、
ファイルの種類を確認できます。

上で指定している img/onigiri.gif の 「img」 はフォルダ、「onigiri」 はファイル名、「.gif」 は画像の種類（拡張子）です。

• 「align="top"」 画像の上に合わせて文字を表示します。
• 「align="middle"」 画像の真ん中に合わせて文字を表示します。
• 「align="bottom"」 画像の下に合わせて文字を表示します。

• 「align="left"」 画像を左側に移動して、右側に文章を表示。
• 「align="right"」 画像を右側に移動して、左側に文章を表示。

• 「<br clear="left">」 改行タグに記載しました。 align="left" の効果を消します。
• 「<br clear="right">」 改行タグに記載しました。 align="right" の効果を消します。

• 「vspace="数"」 が左右の余白。
• 「hspace="数"」 が上下の余白。

画像の縦横のサイズを指定することができます。

• 「width="数"」 画像の横幅を指定する。 %で指定も可能。
• 「height="数"」 画像の縦幅を指定する。%で指定も可能。

上の１つめの見本では、素材自体の縦横サイズと同じサイズを指定しています。
画像を一番奇麗に表示するには、画像と同じ大きさにするのが一番適切です。
素材サイズは素材ファイルを右クリックして 「プロパティ」→「概要」 などで本来の大きさを見ることができます。サイト上の画像の上で右クリックし 「プロパティ」 で○○×○○ピクセル と確認することもできます。 この元々の画像サイズは画像編集ソフトなどで調整することも可能です。

２つめの見本のように横幅だけ大きく指定すると、縦幅を指定していないときは横幅の比率に合わせて縦幅も変わります。横と縦の両方を指定すると、縦横がその数字通りのサイズになります。

alt="代替文字" を付け加えると、 画像の上にマウスでカーソルを持っていったときに書かれた文字が表示されます。 こうすることによって何を表示しているのかというのを文字で説明できることにもなります。

２つめの結果はわざと画像が表示されないようにしています。 通常画像が見当たらないときや、ネットが混み合ってて中々画像が表示されないときになどに 「画像がありませんよ」 という意味の 「×マーク」 が出ます。 その×マークの所に 「おにぎりくん」 と表示されると思います。 これも 「alt="代替文字"」 の効果です。

もし、自分のサイトに表示する画像が、上の階層のフォルダか下の階層のフォルダにある場合は下記のように指定する必要があります。対象のファイルから移動先のファイルまでの指定をする 「相対値」 と、アドレスをそのまま指定する 「絶対値」 の２通りの方法があります。

• 同じフォルダにある画像を表示する場合
  <img src="ファイル名">
  
• 上のフォルダの場合
  １つ上の階層にあるフォルダに画像がある場合
  <img src="../ファイル名">
  ２つ上の階層にあるページに画像がある場合
  <img srcf="../../ファイル名">
  
• 下のフォルダの場合
  １つ下の○○というフォルダに画像がある場合
  <img src="./○○/ファイル名">
  （<img src="○○/ファイル名"> こう書くこともできます）
  ２つ下の△△というフォルダに画像がある場合
  <img src="./○○/△△/ファイル名">
  
• 違う階層のフォルダへ行く場合
  １つ上のフォルダの下にある△△というフォルダに画像がある場合
  <img src="../△△/ファイル名.html">
  ２つ上のフォルダの下にある△△のさらに下の□□に画像がある場合
  <img src="../../△△/□□/ファイル名">
  

• 絶対値で画像を表示する場合
  アドレスでフォルダからファイルまでを書きます
  <img src="http://hp-sozai.net/ファイル名">
  ○○というフォルダへ行く場合
  <img src="http://hp-sozai.net/○○/ファイル名">
  ○○というフォルダ下の△△というフォルダへ行く場合
  <img src="http://hp-sozai.net/○○/△△/ファイル名.html">
  
• アドレスを省略する場合
  アドレスを省略してフォルダからファイルまでを書きます
  <img src="/○○/ファイル名">
  一番最初を 「/（スラッシュ）」 にすることで、「http://hp-sozai.net」 この部分を省略して書くことができます。