トップページ > 初心者向けホームページ作成講座 > 画像を表示させる/画像の場所を指定する
画像を表示させる/画像の場所を指定する
spacer
画像の場所を指定して画像を表示
画像を表示させるには<IMG>タグを使います。終了タグは必要ありません。<IMG src="表示させる画像ファイルと画像パス">
では、画像の表示方法を説明します。
「homepage」フォルダには、HTMLファイル「index.html」と
画像ファイル「image01.jpg」が入っています。
index.htmlの内容
動物園で撮った写真です
← ここに画像を表示させたい以下のように記述します。
<HTML>
<HEAD>
<TITLE>画像の表示</TITLE>
</HEAD>
<BODY>
<H4>動物園で撮った写真です</H4>
<IMG src="image01.jpg">
</BODY>
</HTML>
<HEAD>
<TITLE>画像の表示</TITLE>
</HEAD>
<BODY>
<H4>動物園で撮った写真です</H4>
<IMG src="image01.jpg">
</BODY>
</HTML>
ブラウザでプレビュー
動物園で撮った写真です
「index.html」に記述された<IMG src="image01.jpg">が、同じフォルダ内（homepage）にある
「image01.jpg」を読み込み、画像を表示させています。
画像の名前や場所を間違っていると
が表示されたり、ブラウザによっては何も表示されない場合もあります。
また、ファイル名は必ず半角英数字にしてください。
全角文字のファイル名では、サーバーにアップしたときに
トラブルが発生します。
spacer
フォルダ（ディレクトリ）構造
画像やリンクの指定などで必ず覚えておきたいのは、ファイルの場所を指定する方法と、フォルダ（ディレクトリ）による階層構造です。
パソコンのハードディスクやフロッピーディスクにあるフォルダは階層方式になっていて、
フォルダにアクセスした場合、下の階層に移動したことになり、
逆に「上へ」
などで戻ったときは、上の階層に移動します。エクスプローラーで表示したディレクトリ構造
同一フォルダ内にHTMLファイルと画像がある場合、画像ファイル名だけで表示されますが
フォルダの中にある画像や、それより上の階層にあるファイルを指定する場合
ファイルの場所を指定する必要があります。
HTMLでは、ファイルが置いてあるディレクトリをパス（ファイルの場所）で指定して
画像表示やリンクを行っています。
次の講座では、ファイルの場所とファイルを指定する方法を説明します。
spacer
フォルダ内にある画像を表示させる
画像ファイルimage01.jpgは「images」フォルダに入っています。
フォルダの中にある画像を「index.html」に表示させる場合、以下のように記述します。
index.html(homepageディレクトリ)
<HTML>
<HEAD>
<TITLE>画像の表示</TITLE>
</HEAD>
<BODY>
<H4>動物園で撮った写真です</H4>
<IMG src="images/image01.jpg">
</BODY>
</HTML>
images/ は「imagesフォルダの中にある…」という意味です。<HEAD>
<TITLE>画像の表示</TITLE>
</HEAD>
<BODY>
<H4>動物園で撮った写真です</H4>
<IMG src="images/image01.jpg">
</BODY>
</HTML>
imagesの後に「/」をつけることにより、「images」フォルダを参照
できるように なり、フォルダの中にある「image01.jpg」を表示できます。
簡単に説明すると・・
images/image1.jpg
↓
「imagesフォルダの中にあるimage1.jpgを読み込んで」という意味になります。
「images」フォルダの中に、「photo」フォルダが入っていて、その「photo」フォルダの中に
入っている画像「image01.jpg」を表示させる場合は以下のように記述します。
<IMG src="images/photo/image01.jpg">
「imagesフォルダの中にあるphotoフォルダの中からimage01.jpgを読み込んで」という意味です。現在のフォルダ（ここではhomepageフォルダにあるindex.html）から
ファイルの場所を記述する方法を「相対パス」と呼びます。
相対パスの例
src="images/image01.jpg"
src="images/photo/image01.jpg"
src="image01.jpg"
src="../image01.jpg"
href="index.html"
href="diary/080125.html"
href="../index.html"
spacer
フォルダの上階層にある画像の表示
diaryフォルダに置いてある「2007_06.html」から、上の階層「homepage」にある
「image01.jpg」を表示させるには、以下のように記述します。
2007_06.html(diaryディレクトリ)
<HTML>
<HEAD>
<TITLE>上階層の画像の表示</TITLE>
</HEAD>
<BODY>
<H4>動物園で撮った写真です</H4>
<IMG src="../image01.jpg">
</BODY>
</HTML>
../は「一つ上の階層に…」という意味です。<HEAD>
<TITLE>上階層の画像の表示</TITLE>
</HEAD>
<BODY>
<H4>動物園で撮った写真です</H4>
<IMG src="../image01.jpg">
</BODY>
</HTML>
「diary」階層の上にある「homepage」階層から、「image01.jpg」 を読み込み「2007_06.html」で画像を表示させます。
../image01.jpg
↓
「ひとつ上の階層にあるimage01.jpgを読み込んで」となります。
２つ上の階層を指定するには../をもう一つ追加します
３つ以上の階層も同様に../を追加していきます。
<IMG src="../../image01.jpg">
↓
「２つ上の階層にあるimage01.jpgを読み込んで」
<IMG src="../../../../image01.jpg">
↓
「４つ上の階層にあるimage01.jpgを読み込んで」
↓
「２つ上の階層にあるimage01.jpgを読み込んで」
<IMG src="../../../../image01.jpg">
↓
「４つ上の階層にあるimage01.jpgを読み込んで」
spacer
階層を上下に行き来して画像の場所を指定
diaryフォルダの2007_06.htmlから、imagesフォルダの
image01.jpgを参照するには、以下のように記述します。
diary/2007_06.html
<HTML>
<HEAD>
<TITLE>階層を上下に行き来して画像の場所を指定</TITLE>
</HEAD>
<BODY>
<H4>動物園で撮った写真です</H4>
<IMG src="../images/image01.jpg">
</BODY>
</HTML>
../で一度上の階層に上がりimages/で画像が入っているフォルダ「images」から<HEAD>
<TITLE>階層を上下に行き来して画像の場所を指定</TITLE>
</HEAD>
<BODY>
<H4>動物園で撮った写真です</H4>
<IMG src="../images/image01.jpg">
</BODY>
</HTML>
画像を読み込んでいます。
../images/image01.jpg
↓
「１つ上に上がったところにあるimagesというフォルダの中からimage01.jpgを読み込んで」となります。
spacer
絶対パスによる指定
絶対パス（フルパス）とは、ディレクトリ階層の最も上の部分（ルートディレクトリ）またはホームページのアドレスからの場所指定です。
「めもタグ」のアドレスで言えば「http://memotag.sytes.net/」が最も上の部分となり
画像読み込みやリンクする時も「http://memotag.sytes.net/」からの場所指定となります。
以下が絶対パスの例です。
アドレスとファイルの場所がセットになっており、アドレスは省略はできません。 http://memotag.sytes.net/images/image01.jpg
http://memotag.sytes.net/index.html
http://memotag.sytes.net/hpmake/11-img.html
相対パスは、自分のページ内のファイルの場所を指定するのに対し
絶対パスは、他人のページ内のファイルの場所を指定するために使用します。
主にメーカーの公式サイト等にリンクを張る時や
他サイトのバナー(ホームページ宣伝用画像みたいなもの)を読み込む時
そして掲示板のアドレスやカウンターのプログラムの呼び出しに利用されます。
たまにアドレスからでなく、/(スラッシュ)から始まる絶対パスがありますが
これは掲示板やカウンタ等のプログラムで使用するためのものですので
ここでの説明は割愛します。
以下は絶対パスによる画像の指定例です。
<HTML>
<HEAD>
<TITLE>絶対パスによる画像指定</TITLE>
</HEAD>
<BODY>
<H4>動物園で撮った写真です</H4>
<IMG src="http://memotag.sytes.net/images/image01.jpg">
</BODY>
</HTML>
自分のページ内のリンクや画像を全て絶対パスで指定するのは<HEAD>
<TITLE>絶対パスによる画像指定</TITLE>
</HEAD>
<BODY>
<H4>動物園で撮った写真です</H4>
<IMG src="http://memotag.sytes.net/images/image01.jpg">
</BODY>
</HTML>
無駄な上に、ページを移転したときにアドレスを全て修正しなくては
ならなくなるので、他サイトやレンタル掲示板等に使用するくらいに
留めておきましょう。
他人のページにある画像を無断で自分のページに表示させることは
無断転載に当たる上に、他人のページのサーバーに負担が掛かるので決して行わないでください。
どうしても掲載したい場合は、そのページの人にメールで許可を取ってもらい
自分のページに掲載したい画像ファイルをFTP転送して、表示させるようにしてください。
前の講座：罫線を引く/リストを作成する | 次の講座：画像にオプションを付ける/画像の種類 | トップページ | ページの一番上へ▲