×閉じる
src さて、ここでは例文を交えて詳しくsrcについて解説していきますよ。

始めに説明しますが、srcは画像の場所を指定する属性ですが、imgとセットで使わなければなりません。
imgだけでは画像を表示できませんし、逆もまた然り。
画像を表示させるには<img src="">というタグを使わなければならない、ということです。

では、まずこちらを見ていただきましょうか。
左がサイト全体の図、右がindex.htmlで画像を表示する為のソースとなります。


[Sample1] [index.html]
homepage
├index.html
├photo01.jpg
└photo02.jpg


srcこのように、同じフォルダ内の画像を指定する場合は、画像の名前と拡張子（.jpgや.gifなど）を""の中に書けば表示されます。

その際、画像の名前はすべて半角英数字にして下さい。
大文字と小文字は区別されますので気を付けて。

では、今度は画像が別の位置に保存している場合の例を挙げましょう。


[Sample2] [index.html]
homepage
├index.html
└image
　　├photo01.jpg
　　└photo02.jpg


src 上の図の場合、imageというフォルダがindex.htmlと同じ階層にあり、その中に画像が入っています。つまり、画像が下の階層にある、ということです。

そのような場合、画像の名前と拡張子の前に、フォルダ名と/（半角のスラッシュ）を記入します。

さらにそのフォルダの中のフォルダに画像が保存されている場合は、フォルダ名/を繰り返せば良いですよ。
フォルダ名も必ず半角英数字で。大文字と小文字も区別します。


[Sample3] [index.html]
homepage
├photo01.jpg
├photo02.jpg
└html
　　└index.html


src 上の図の場合は、index.htmlが保存されているhtmlというフォルダと同じ階層に画像があります。つまり、画像が上の階層にある、ということです。

そのような場合、画像の名前と拡張子の前に、../（半角のピリオド２つと半角のスラッシュ）を記入します。

さらにそのフォルダの上に画像が保存されているフォルダがある場合は、../を繰り返します。
こちらは上記２つの例と比べると、あまり使わないかと思いますがね。


[Sample4] [index.html]
homepage
├photo01.jpg
└diary
　　├photo02.jpg
　　└html
　　　　├index.html
　　　　├photo03.jpg
　　　　└image
　　　　　　├photo04.jpg
　　　　　　└background
　　　　　　　　　└photo05.jpg


srcここまでのまとめが上の図です。
かなり複雑な構造ですが、細かくフォルダ分けをすると目的のデータを探しやすいという利点もあります。

上の階層の画像を貼るなら「../」、下の階層の画像を貼るなら「フォルダ名（半角英数）/」ということを覚えれば、どこにあっても表示できるでしょう。
上のルールは、他の属性でも使うことがあります。よく覚えておいて下さい。

画像があるページは華やかなもの。
<img src="">を活かして、あなただけのホームページを作って下さい。

×閉じる