超初心者でも簡単！あなたもできるHP作成！− Make easily  
||　トップページ　||　HTML　||　Style Sheet　||　リファレンス　||　Web素材　||　Contact Us　||　サイトマップ　||　初めての方　||　
reference
リファレンスの見方 スタイルシートの書き方 ヘッダ情報 ページ全体 見出し 文字（テキスト） リスト テーブル 画像・イメージ リンク レイアウト フォーム フレーム リファレンス一覧


画像を表示する 画像にリンクをはる リンクの線を消す
画像に枠をつける 代替テキストをつける 画像のサイズを指定する
文字の表示位置を指定する 文字の表示位置を解除する 画像の周囲に余白を入れる
画像が表示されない 画像を隙間なく並べる イメージツールバーを使用しない

画像（イメージ）

このリファレンスの見方については「リファレンスの見方」をお読みください。

画像を表示する

ネコ
【HTMLタグ】

<img src="cat.gif">

画像を表示させるには <img src="ファイル名.拡張子">　と書きます。
画像をフォルダに入れている場合は　<img src="フォルダ名/ファイル名.拡張子">　と書きます。
ファイル名は必ず「"」（ダブルクォーテーション）で囲んでください。
▲このページのトップに戻るTop

画像にリンクをはる

ネコ
【HTMLタグ】

<a href="index.html"><img src="cat.gif"></a>

画像にリンクをはるには、
<a href="リンク先のファイル名.拡張子"><img src="画像ファイル名.拡張子"></a>
とこのように画像タグをはさみます。
▲このページのトップに戻るTop

リンクの線を消す

ネコ
【HTMLタグ】

<a href="index.html"><img src="cat.gif" border="0"></a>

画像にリンクをはると、自動的にリンクの線が表示されます。
この線を消したい場合は画像のタグに　 「border="0"」　をつけてリンクの線を消します。
▲このページのトップに戻るTop

画像に枠をつける

ネコ
【HTMLタグ】

<img src="cat.gif" border="6">

数字が大きいほど線が太くなります。
▲このページのトップに戻るTop

代替テキストをつける

ネコの画像
【HTMLタグ】

<img src="cat.gif" border="0" alt="ネコの画像">

代替テキストとは、上のように画像がうまく表示できなかったりした場合に、そこに何があるのかわかるように表示させるテキストをあらかじめ用意しておくテキストのことです。
▲このページのトップに戻るTop

画像のサイズを指定する

ネコ
【HTMLタグ】

<img src="cat.gif" alt="ネコの画像" width="79" height="85">

画像にサイズを指定した方が、指定しない場合に比べて表示速度が速くなるようです。
それに、ページを読み込むときにレイアウトがくずれないので読み込み途中でも読みやすくなります。
画像にはサイズを指定するようにしましょう。

画像のサイズがわからない場合は、
　1.画像の上で右クリック
　2.一番下の「プロパティ」をクリック
すると「規模」の部分に　79×85　ピクセルのようにサイズが表示されます。

▲このページのトップに戻るTop

文字の表示位置を指定する

画像に並ぶ文字の表示位置を指定します。
指定がない場合は、画像の右側に文字が並びます。

画像のサイズ指定はタグが長くなるので省略しています。

【表示位置を指定しない場合の表示】

ネコかわいいクリスマスのプレゼント

【HTMLタグ】表示位置を指定しない場合

<img src="cat.gif" alt="ネコの画像">かわいいクリスマスのプレゼント

【左を指定した場合】画像が文字の左側に配置されます。

ネコかわいいクリスマスのプレゼント

【HTMLタグ】

<img src="cat.gif" alt="ネコの画像" align="left">かわいいクリスマスのプレゼント

【スタイルシート インライン】

<img src="cat.gif" alt="ネコの画像" style="float: left;">かわいいクリスマスのプレゼント

【スタイルシートヘッダ、外部ファイル】

.img {
float: left;
}

<img src="cat.gif" alt="ネコの画像" class="img" >かわいいクリスマスのプレゼント
【右を指定した場合】画像が文字の右側に配置されます。

ネコかわいいクリスマスのプレゼント

【HTMLタグ】

<img src="cat.gif" alt="ネコの画像" align="right">かわいいクリスマスのプレゼント

【スタイルシート インライン】

<img src="cat.gif" alt="ネコの画像" style="float: right;">かわいいクリスマスのプレゼント

【スタイルシートヘッダ、外部ファイル】

.img {
float: right;
}

<img src="cat.gif" alt="ネコの画像" class="img" >かわいいクリスマスのプレゼント
【上を指定した場合】画像の右上に文字が配置されます。

ネコかわいいクリスマスのプレゼント

【HTMLタグ】

<img src="cat.gif" alt="ネコの画像" align="top">かわいいクリスマスのプレゼント

【スタイルシート インライン】

<img src="cat.gif" alt="ネコの画像" style="vertical-align: top;">かわいいクリスマスのプレゼント

【スタイルシートヘッダ、外部ファイル】

.img {
vertical-align: top;
}

<img src="cat.gif" alt="ネコの画像" class="img" >かわいいクリスマスのプレゼント
【真中を指定した場合】文字が画像の真中に配置されます。

ネコかわいいクリスマスのプレゼント

【HTMLタグ】

<img src="cat.gif" alt="ネコの画像" align="middle">かわいいクリスマスのプレゼント

【スタイルシート インライン】

<img src="cat.gif" alt="ネコの画像" style="vertical-align: middle;">かわいいクリスマスのプレゼント

【スタイルシートヘッダ、外部ファイル】

.img {
vertical-align: middle;
}

<img src="cat.gif" alt="ネコの画像" class="img" >かわいいクリスマスのプレゼント
【下を指定した場合】文字が画像の右下に配置されます。

ネコかわいいクリスマスのプレゼント

【HTMLタグ】

<img src="cat.gif" alt="ネコの画像" align="bottom">かわいいクリスマスのプレゼント

【スタイルシート インライン】

<img src="cat.gif" alt="ネコの画像" style="vertical-align: bottom;">かわいいクリスマスのプレゼント

【スタイルシートヘッダ、外部ファイル】

.img {
vertical-align: bottom;
}

<img src="cat.gif" alt="ネコの画像" class="img" >かわいいクリスマスのプレゼント
▲このページのトップに戻るTop

文字の表示位置を解除する

文字の回り込みを解除したい場合に使います。
【左の回り込みを解除する】

ネコかわいいクリスマスのプレゼント
これが欲しかったの！

【HTMLタグ】

<img src="cat.gif" alt="ネコの画像" align="left">かわいいクリスマスのプレゼント<br clear="left">これが欲しかったの！

【スタイルシート インライン】

<img src="cat.gif" alt="ネコの画像" align="left">かわいいクリスマスのプレゼント<br style="clear: left;">これが欲しかったの！

【スタイルシートヘッダ、外部ファイル】

.clear {
clear: left;
}

<img src="cat.gif" alt="ネコの画像"><br class="clear"> かわいいクリスマスのプレゼント
【右の回り込みを解除する】

ネコかわいいクリスマスのプレゼント
これが欲しかったの！

【HTMLタグ】

<img src="img/cat.gif" alt="ネコの画像" align="right">かわいいクリスマスのプレゼント<br clear="right">
これが欲しかったの！

【スタイルシート インライン】

<img src="cat.gif" alt="ネコの画像" align="left">かわいいクリスマスのプレゼント<br style="clear: right;">これが欲しかったの！

【スタイルシートヘッダ、外部ファイル】

.clear {
clear: right;
}

<img src="cat.gif" alt="ネコの画像"><br class="clear"> かわいいクリスマスのプレゼント
【全ての回り込みを解除する】

ネコかわいいクリスマスのプレゼント
これが欲しかったの！

【HTMLタグ】

<img src="img/cat.gif" alt="ネコの画像" align="left">かわいいクリスマスのプレゼント<br clear="all">
これが欲しかったの！

【スタイルシート インライン】

<img src="cat.gif" alt="ネコの画像" align="left">かわいいクリスマスのプレゼント<br style="clear: both;">これが欲しかったの！

【スタイルシートヘッダ、外部ファイル】

.clear {
clear: both;
}

<img src="cat.gif" alt="ネコの画像"><br class="clear"> かわいいクリスマスのプレゼント
▲このページのトップに戻るTop

画像の周囲に余白を入れる

画像の周りに余白を入れたい場合に使います。
タグが長くなるので画像のサイズは略しています。
上下に余白を入れる

ネコかわいいクリスマスのプレゼント

【HTMLタグ】

<img src="img/cat.gif" alt="ネコの画像" hspace="20">かわいいクリスマスのプレゼント

左右に余白を入れる

ネコかわいいクリスマスのプレゼント

【HTMLタグ】

<img src="img/cat.gif" alt="ネコの画像" vspace="20">かわいいクリスマスのプレゼント

上下左右に余白を入れる

ネコかわいいクリスマスのプレゼント

【HTMLタグ】

<img src="img/cat.gif" alt="ネコの画像" hspace="20" vspace="20">かわいいクリスマスのプレゼント

【スタイルシート インライン】上下左右に20pxの余白を入れる

<img src="cat.gif" alt="ネコの画像" style="margin: 20px;">かわいいクリスマスのプレゼント

【スタイルシートヘッダ、外部ファイル】上下左右に20pxの余白を入れる

.img {
margin: 20px;
}

<img src="cat.gif" alt="ネコの画像" class="img">かわいいクリスマスのプレゼント
スタイルシートを使うと上下左右別々に余白を指定することができます。
【スタイルシート インライン】上下20px、左右に30pxの余白を入れる

<img src="cat.gif" alt="ネコの画像" style="margin: 20px 30px;">かわいいクリスマスのプレゼント

【スタイルシートヘッダ、外部ファイル】上下20px、左右に30pxの余白を入れる

.img {
margin: 20px 30px;
}

<img src="cat.gif" alt="ネコの画像" class="img">かわいいクリスマスのプレゼント
【スタイルシート インライン】上20px、左右30px、下20pxの余白を入れる

<img src="cat.gif" alt="ネコの画像" style="margin: 20px 30px 20px;">かわいいクリスマスのプレゼント

【スタイルシートヘッダ、外部ファイル】上下20px、左右に30pxの余白を入れる

.img {
margin: 20px 30px 20px;
}

<img src="cat.gif" alt="ネコの画像" width="79" height="85" class="img">かわいいクリスマスのプレゼント
【スタイルシート インライン】上20px、右10px、下30px、左20pxの余白を入れる

<img src="cat.gif" alt="ネコの画像" style="margin: 20px 10px 30px 20px;">かわいいクリスマスのプレゼント

【スタイルシートヘッダ、外部ファイル】上20px、右10px、下30px、左20pxの余白を入れる

.img {
margin: 20px 10px 30px 20px;
}

<img src="cat.gif" alt="ネコの画像" width="79" height="85" class="img">かわいいクリスマスのプレゼント
それぞれ、別々に指定する場合

margin-top: 20px; 　　　　←上
margin-right: 10px; 　　　　←右
margin-bottom: 30px; 　　　　←下
margin-left: 20px; 　　　　←左

▲このページのトップに戻るTop

画像が表示されない

ネコの画像
このように画像が表示されない場合があります。
その場合、次のことを確認してみましょう。
  • 画像までのパス（img/cat.gifや../img/cat.gif）が間違っていないかどうか。
  • ファイル名が大文字が小文字、小文字が大文字になっていないか。
  • 画像ファイルをサーバーにアップしているか。
  • 画像ファイルが壊れていないか。
  • 無料サーバから画像を呼び出していないか。
    (無料サーバは画像だけを読み出すことができないところが多い）

画像を隙間なく並べる

このように画像をすきまなく並べるには画像タグにスペースや改行を入れないように注意しましょう。
<img src="red.gif"><img src="yellow.gif"><img src="bule.gif">
イメージタグ単位（<img src="ファイル名.拡張子">）で改行をすると　 のように隙間が空いてしまいます。

どうしても改行する必要がある場合は、
<img src="red.gif"><img
src="yellow.gif"><img
src="bule.gif">
のように、imgとsrcの間で改行するようにしましょう。

イメージツールバーを表示しない

Internet Explorer 6.0 以降のブラウザで200×200 以上の画像にマウスを乗せると保存や印刷などがボタンがついたツールバーが表示されます。
これを表示しないようにするには、次の方法があります。
【ページ全体に設定する場合】

ページの<head>〜 </head> 内に
<meta http-equiv="imagetoolbar" content="no">
を書いておきます。

【画像ごとに設定する場合】

<img src="ファイル名.拡張子" galleryimg="no">
と書きます。

▲このページのトップに戻るTop