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

HomeHTML辞典画像タグ <img src="画像名">
サイト内検索

画像タグ <img src="画像名">

画像を表示する
タグ <img src="画像名">
見本 <img src="img/onigiri.gif">
結果
解説

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

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

XHTMLで記述する際には <img src="画像名" /> このように最後にスラッシュを記述します。
画像に枠をつける
タグ <img src="画像名" border="数">
見本 <img src="img/onigiri.gif" border="1">
結果
見本 <img src="img/onigiri.gif" border="5">
結果
解説 <img src="画像名"> に border="数"を付け加え、「」 の所に線の太さを数字で指定すると画像の周りに指定した太さの線がつきます。画像でリンクしたときは、この線の部分がリンク色と同じ色になります。
画像を使ってリンクする
タグ <a href="リンク先"><img src="画像名"></a>
見本 <a href="http://www.yahoo.co.jp/"><img src="img/onigiri.gif"></a>
結果
解説 リンクタグで画像タグを囲むことによって画像がリンクになります。クリックするとリンク先のアドレス、又は指定ファイルに飛びます。リンクの細かいことは、「リンク用タグ」 を見てください。
画像でリンクをすると画像全体に枠がつくのですが、これは上に書いてある borderborder="0" と書くことで消すことができます。この線の色を変えたい場合は リンク色の変更 を指定する必要があります。
画像の横の文字位置
タグ <img src="画像名" align="位置の指定">ここに文字
見本 <img src="img/onigiri.gif" align="top">無料HPテンプレートの素材屋
結果 無料HPテンプレートの素材屋
見本 <img src="img/onigiri.gif" align="middle">無料HPテンプレートの素材屋
結果 無料HPテンプレートの素材屋
見本 <img src="img/onigiri.gif" align="bottom">無料HPテンプレートの素材屋
結果 無料HPテンプレートの素材屋
解説 <img src="画像名" align="top"> これの 「top」 の部分で画像の横に文字が来ると上付きになります。 「middle」 に変更すると、上の見本の用に画像の真ん中になります。 「bottom」 は下付きです。 画像の横には1行分しか書けません。1行以上になると画像の下から始まります。
  • align="top"」 画像の上に合わせて文字を表示します。
  • align="middle"」 画像の真ん中に合わせて文字を表示します。
  • align="bottom"」 画像の下に合わせて文字を表示します。
画像の横に文章を書く
タグ <img src="画像名" align="left">ここに文字
見本 <img src="img/onigiri.gif" align="left">
無料ホームページテンプレートの素材屋にお越し頂きありがとうございます。当サイトでは、無料素材やHTML・CSS解説ページなど豊富なコンテンツを用意しております。無料ホームページテンプレートの素材屋にお越し頂きありがとうございます。当サイトでは、無料素材やHTML・CSS解説ページなど豊富なコンテンツを用意しております。無料ホームページテンプレートの素材屋にお越し頂きありがとうございます。当サイトでは、無料素材やHTML・CSS解説ページなど豊富なコンテンツを用意しております。
結果 無料ホームページテンプレートの素材屋にお越し頂きありがとうございます。当サイトでは、無料素材やHTML・CSS解説ページなど豊富なコンテンツを用意しております。無料ホームページテンプレートの素材屋にお越し頂きありがとうございます。当サイトでは、無料素材やHTML・CSS解説ページなど豊富なコンテンツを用意しております。無料ホームページテンプレートの素材屋にお越し頂きありがとうございます。当サイトでは、無料素材やHTML・CSS解説ページなど豊富なコンテンツを用意しております。
見本 <img src="img/onigiri.gif" align="right">
無料ホームページテンプレートの素材屋にお越し頂きありがとうございます。当サイトでは、無料素材やHTML・CSS解説ページなど豊富なコンテンツを用意しております。無料ホームページテンプレートの素材屋にお越し頂きありがとうございます。当サイトでは、無料素材やHTML・CSS解説ページなど豊富なコンテンツを用意しております。無料ホームページテンプレートの素材屋にお越し頂きありがとうございます。当サイトでは、無料素材やHTML・CSS解説ページなど豊富なコンテンツを用意しております。
結果 無料ホームページテンプレートの素材屋にお越し頂きありがとうございます。当サイトでは、無料素材やHTML・CSS解説ページなど豊富なコンテンツを用意しております。無料ホームページテンプレートの素材屋にお越し頂きありがとうございます。当サイトでは、無料素材やHTML・CSS解説ページなど豊富なコンテンツを用意しております。無料ホームページテンプレートの素材屋にお越し頂きありがとうございます。当サイトでは、無料素材やHTML・CSS解説ページなど豊富なコンテンツを用意しております。
見本 <img src="img/onigiri.gif" align="left">
無料ホームページテンプレートの素材屋にお越し頂きありがとうございます。当サイトでは、無料素材やHTML・CSS解説ページなど豊富なコンテンツを用意しております。
<br clear="left">
無料ホームページテンプレートの素材屋にお越し頂きありがとうございます。当サイトでは、無料素材やHTML・CSS解説ページなど豊富なコンテンツを用意しております。無料ホームページテンプレートの素材屋にお越し頂きありがとうございます。当サイトでは、無料素材やHTML・CSS解説ページなど豊富なコンテンツを用意しております。
結果
無料ホームページテンプレートの素材屋にお越し頂きありがとうございます。当サイトでは、無料素材やHTML・CSS解説ページなど豊富なコンテンツを用意しております。
無料ホームページテンプレートの素材屋にお越し頂きありがとうございます。当サイトでは、無料素材やHTML・CSS解説ページなど豊富なコンテンツを用意しております。無料ホームページテンプレートの素材屋にお越し頂きありがとうございます。当サイトでは、無料素材やHTML・CSS解説ページなど豊富なコンテンツを用意しております。
解説 画像を左右のどちらかに移動させて、その横に文章を書けます。
  • align="left"」 画像を左側に移動して、右側に文章を表示。
  • align="right"」 画像を右側に移動して、左側に文章を表示。
画像を左か右に回り込ませることで、文章を横に表示させれるようになります。
回り込みの影響で表示がおかしくなるときは、下のように解除用のタグを記載しましょう。
  • <br clear="left">」 改行タグに記載しました。 align="left" の効果を消します。
  • <br clear="right">」 改行タグに記載しました。 align="right" の効果を消します。
画像と文章の間のスペースを増やす
タグ <img src="名" align="left" hspace="数" vspace="数">
見本 <img src="img/onigiri.gif" align="left" hspace="20">
画像と文章の間の隙間を指定することができます。上下か左右かを数字で指定して、数字の分だけ余白をとることができます。画像と文章の間の隙間を指定することができます。上下か左右かを数字で指定して、数字の分だけ余白をとることができます。画像と文章の間の隙間を指定することができます。上下か左右かを数字で指定して、数字の分だけ余白をとることができます。画像と文章の間の隙間を指定することができます。上下か左右かを数字で指定して、数字の分だけ余白をとることができます。
結果 画像と文章の間の隙間を指定することができます。上下か左右かを数字で指定して、数字の分だけ余白をとることができます。画像と文章の間の隙間を指定することができます。上下か左右かを数字で指定して、数字の分だけ余白をとることができます。画像と文章の間の隙間を指定することができます。上下か左右かを数字で指定して、数字の分だけ余白をとることができます。画像と文章の間の隙間を指定することができます。上下か左右かを数字で指定して、数字の分だけ余白をとることができます。
見本 <img src="img/onigiri.gif" align="left" vspace="20">
画像と文章の間の隙間を指定することができます。上下か左右かを数字で指定して、数字の分だけ余白をとることができます。画像と文章の間の隙間を指定することができます。上下か左右かを数字で指定して、数字の分だけ余白をとることができます。画像と文章の間の隙間を指定することができます。上下か左右かを数字で指定して、数字の分だけ余白をとることができます。画像と文章の間の隙間を指定することができます。上下か左右かを数字で指定して、数字の分だけ余白をとることができます。
結果 画像と文章の間の隙間を指定することができます。上下か左右かを数字で指定して、数字の分だけ余白をとることができます。画像と文章の間の隙間を指定することができます。上下か左右かを数字で指定して、数字の分だけ余白をとることができます。画像と文章の間の隙間を指定することができます。上下か左右かを数字で指定して、数字の分だけ余白をとることができます。画像と文章の間の隙間を指定することができます。上下か左右かを数字で指定して、数字の分だけ余白をとることができます。
見本 <img src="img/onigiri.gif" align="left" hspace="20" vspace="20">
画像と文章の間の隙間を指定することができます。上下か左右かを数字で指定して、数字の分だけ余白をとることができます。画像と文章の間の隙間を指定することができます。上下か左右かを数字で指定して、数字の分だけ余白をとることができます。画像と文章の間の隙間を指定することができます。上下か左右かを数字で指定して、数字の分だけ余白をとることができます。画像と文章の間の隙間を指定することができます。上下か左右かを数字で指定して、数字の分だけ余白をとることができます。
結果 画像と文章の間の隙間を指定することができます。上下か左右かを数字で指定して、数字の分だけ余白をとることができます。画像と文章の間の隙間を指定することができます。上下か左右かを数字で指定して、数字の分だけ余白をとることができます。画像と文章の間の隙間を指定することができます。上下か左右かを数字で指定して、数字の分だけ余白をとることができます。画像と文章の間の隙間を指定することができます。上下か左右かを数字で指定して、数字の分だけ余白をとることができます。
解説 画像と文章の間に上下左右の余白を数で指定できます。
  • vspace="数"」 が左右の余白。
  • hspace="数"」 が上下の余白。
両方すれば上下左右にスペースを空けれます。
画像の縦と横の長さを変更する
タグ <img src="画像名" width="数" height="数">
見本 <img src="img/onigiri.gif" width="76" height="109">
結果
見本 <img src="img/onigiri.gif" width="150">
結果
見本 <img src="img/onigiri.gif" height="60">
結果
見本 <img src="img/onigiri.gif" width="300" height="100">
結果
見本 <img src="img/onigiri.gif" width="40%">
結果
解説

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

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

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

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

このサイズの指定は絶対しなくてならないものではありませんが、指定しておくことで画像の位置や存在を把握しやすくなります。縦横の幅を指定していないときは画像自体の大きさで表示されます
% パーセントで指定すると、広がれる範囲の何%とかで判断して大きさが決まります。
画像の代替文字
タグ <img src="画像名" alt="代替文字">
見本 <img src="img/onigiri.gif" width="76" height="109" alt="おにぎりくん">
結果 おにぎりくん
結果 おにぎりくん
解説

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

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

※ この代替文字は検索の対象になりますので、できるだけ指定しておきましょう!
サイト内の画像をフォルダで分けている場合
解説

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

■相対値で違うフォルダ内の画像を指定する場合
  • 同じフォルダにある画像を表示する場合
    <img src="ファイル名">
  • 上のフォルダの場合
    1つ上の階層にあるフォルダに画像がある場合
    <img src="../ファイル名">
    2つ上の階層にあるページに画像がある場合
    <img srcf="../../ファイル名">
  • 下のフォルダの場合
    1つ下の○○というフォルダに画像がある場合
    <img src="./○○/ファイル名">
    <img src="○○/ファイル名"> こう書くこともできます)
    2つ下の△△というフォルダに画像がある場合
    <img src="./○○/△△/ファイル名">
  • 違う階層のフォルダへ行く場合
    1つ上のフォルダの下にある△△というフォルダに画像がある場合
    <img src="../△△/ファイル名.html">
    2つ上のフォルダの下にある△△のさらに下の□□に画像がある場合
    <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」 この部分を省略して書くことができます。
※ 「ファイル名」 の部分には .gif や .jpg といった拡張子を書くことをお忘れなく。
※ 他サイトのアドレスで、そのサイトにある画像を上のように指定し、
  自分のサイトに他サイトの画像を表示させると、「直リンク」 になります。
  基本的なマナーとして 「直リンク」 は禁止されていますので、お気を付け下さい。


練習用書き込みフォーム(サンプル表示)


素材の森 素材NAVI 素材R 素材・壁紙 イラスト素材 素材・作成 素材ランキング 無料素材リンク 素材ファン
無料HP素材、ホームページテンプレート、HTMLタグ・CSS、質問・用語の検索 サイト内検索
素材ランキング 素材NAVI 素材の森 素材サーチ フリー素材 素材・画像 素材・壁紙 素材R Webランキング