MB-Support

パソコン初心者のサポートページ

画像表示タグを覚える前に

 ホームページに画像を掲載するタグを覚える前に、ディレクトリを理解して画像ファイルと HTML ファイルの保管場所を考えましょう。



画像を表示する仕組み

ホームページに画像を掲載する場合は、HTML ソースに画像の保存先を指定します。 例えば下の場合、index.htm (ホームページの母体)に、hplogo.JPG(画像ファイル)を表示させるには、同じフォルダ内に画像があるので "hplogo.JPG" となります。

同じ階層にHTMLと画像が存在する場合

この場合は、ホームページ 1 つと画像ファィル 1 つなのでアドレス指定が簡単です。 しかしホームページ制作が進むと、サイト内は下の様になると思います。

ページが増えると、フォルダ内にファイルが散乱する



ページ数が増えていくと

ページ数が増えていくと、どのページにどの画像が必要なのか、サイトの管理が非常に困難になります。 こうなる前にフォルダで管理する事をおすすめします。 「jpeg」または「img」などの分りやすい名前のフォルダを作成しておきましょう。 作成したら画像は全てこのフォルダに保管します。 (注 最初にやらないとアドレス指定を全て修正する事になります)

ページと画像の保存場所を分ける方法

上の構成の場合、index.htm に hplogo.JPG を 表示させるアドレスは、 "jpeg/hplogo.JPG" となります。



diary.htmに001.jpgを表示させるには

さらにページ数が増える時は、各ページに使用する画像を整理します。 jpeg フォルダの中にページ名のフォルダを作成します。 例えば、index.htm に表示する画像を保存する場所は、jpegフォルダの index フォルダにまとめます。

右の diary.htm に 001.jpg 画像を表示する場合のパスは、"jpeg/diary/d001.jpg" となります。 考え方は簡単で、diary.htm から見た 001.gng は、jpeg フォルダ内の diary フォルダ内にあるからです ( jpeg/diary/ )。 diary.htm に hplogo.jpg を表示させたい場合は、jpeg/index/hplogo.jpg になります。



一つ上のフォルダに戻る場合

love.htmにhplogo.jpgを表示させるには

HTML ページと画像を同じフォルダで管理した場合。

右のファイル構成で、love.htm ページがlove001.jpg 画像を表示させたい場合、同じフォルダ内にあるので "love001.jpg" と指定します。 love.htm ページに hplogo.jpg を表示させる場合は、"../../hplogo.jpg" となります。 "../" を使用すると 1 つ上のフォルダを参照します。右で見ると 1 つ目の "../" で、love.htmがlinkフォルダ内を参照 できます。 hplogo.jpg は、HOME PAGE フォルダの直下にあるので、さらに 1 つ上を参照するために"../"を加えます。

love.htm に、diary.jpg を表示させたい場合は、"../diary/diary.jpg" になります。




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項