パソコン　レスキュー隊

ホームページの初歩の初歩

PCレスキュー隊目次

HPの初歩の初歩目次　

　画像がでないトラブル
　HTMLファイルと画像ファイルの位置関係

画像がでないトラブル

１.HTMLファイルと画像ファイルが同じ位置関係にある場合のトラブル

２.画像ファイルがimagesフォルダに入れてある場合のトラブル

３.HTMLファイル、画像ファイルとも別のフォルダに入れてある場合のトラブル

4 .HTMLファイル、画像ファイルがまったく別のサイトにある場合のトラブル

　画像がでないトラブル

　
　「HPを見る」ということは「ブラウザがHTMLを読みこんでいる」ということです。HTMLファイルには画像が糊付けされているわけではありません。HTMLファイルに書かれたタグの命令に沿って、別にある画像ファイルを読み込んで表示しているだけです。タグには画像のファイル名と保存されている場所（URL）が書かれています。

　そのため、HTMLファイルと画像ファイルの保存場所の関係が重要になってきます。

　HP作成ソフトを使って画像を貼り付けると、自動的にタグを作成してくれますが、たまにソフトがまちがうこともあるようです。その場合、たいがいタグが下のようになっています。

<IMG SRC="C：MyDocument￥○○gif">

　これだと、画像ファイルを自分のPCのCドライブのMyDocumentの中の○○gifと指定しているため、自分のPCでは普通に見えます。そのため気が付きにくいのですが、このままこのHTMLファイルをアップロードすると、そのHPを見にきた人のブラウザは「Cドライブの中のMyDocumentの中の○○gif」を表示しろ、という意味に解釈してしまいます。しかし、その人のPCには○○gifファイルはありませんので、画像の部分が×印になってしまいます。このようなときはHTMLソースを開いて手動で直接HTMLを編集したほうが早い場合もあります。
　このようなエラーは、HP作成ソフトを使っていてインターネットからダウンロードした画像やアイコンをHPに貼り付ける場合が多いようです。

失敗を防ぐには・・・・・・・
まず最初に、必要な画像ファイルを、すでに使っている画像ファイルを保存してある場所（フォルダ）に保存（コピーまたは移動）してから、その画像の貼り付けを行うようにすると、いいようです。

修正したHTMLファイルを上書き保存し、画像ファイルといっしょに再度アップロードしましょう。

　HTMLファイルと画像ファイルの位置関係を次に説明します。PCの中のHPデータの保存場所を「私のHP」フォルダ、サーバでのHPファイルの保存場所（ディレクトリ）を「iamsenmu」とします。

１.HTMLファイルと画像ファイルが同じ位置関係にある場合

　
「index.html」で画像を表示するタグは下のようにファイル名だけでOKです。

<IMG SRC="gazou.gif">

これをサーバでのHPファイルの保存場所の「iamsenmu」ディレクトリにアップロードすると下のような位置関係になります。「私のHP」フォルダが「iamsenmu」ディレクトリになっただけで、中身はまったく同じです。アップロードする場合は原則的にこのようにする必要があります。

２.画像ファイルがimagesフォルダに入れてある場合

　
「index.html」で画像を表示するタグは下のように
「フォルダ名」＋「/（スラッシュ）」＋ファイル名を書く必要があります。

<IMG SRC="images/gazou.gif">

「index.html」と「imagesフォルダ」が同じ位置関係（階層）になっています。

これをサーバでのHPファイルの保存場所の「iamsenmu」ディレクトリにアップロードすると下のような位置関係になります。「私のHP」フォルダが「iamsenmu」ディレクトリになっただけで、中身はまったく同じ、「index.html」と「imagesフォルダ」が同じ位置関係（階層）です。アップロードする場合は原則的にこのようにする必要があります。

３.HTMLファイル、画像ファイルとも別のフォルダに入れてある場合

　
HTMLファイルはｐｃsyohoフォルダ、画像フォルダはimagesフォルダに入れてある状態で「index.html」で画像を表示するタグは下のように
「../」＋「フォルダ名」＋「/」＋ファイル名と書く必要があります。
「../」は「ひとつ上の階層（この例の場合は私のHPフォルダ）」と言う意味です。
<IMG SRC="../images/gazou.gif">

ひとつ上の階層（私のHPフォルダ）から見ると、「pcsyohoフォルダ」と「imagesフォルダ」が同じ位置関係（階層）になっています。
 

これをサーバでのHPファイルの保存場所の「iamsenmu」ディレクトリにアップロードするときは「私のHP」フォルダが「iamsenmu」ディレクトリになっただけで、中身はまったく同じになるように「ｐｃsyohoフォルダ」と「imagesフォルダ」をつくって、その中にそれぞれ「index.html」、「gazou.gif」をアップロードする必要があります。
 

4 .HTMLファイル、画像ファイルがまったく別のサイトにある場合

　
タグの使える掲示板や日記帳に画像を貼ったりする場合は、まったく別のサイトにある画像を表示することになります。その場合のタグはフルパスで書かなければいけません。

他のHTMLファイルと同じ場所に画像ファイルがある場合は、例えば・・・・・
<IMG SRC="http://iamsenmu.easter.ne.jp/gazou.gif">

imagesフォルダに画像ファイルが入れてある場合は、例えば・・・・・
<IMG SRC="http://iamsenmu.easter.ne.jp/images/gazou.gif">

となります。

質問は掲示板へ

HPのトラブルはURLを書いてください