トップページ＞タグを打ってみよう！＞画像フォルダの階層を指定する
画像フォルダの階層を指定する
ホームページに画像をいれるのは、コンピュータが画像を捜せるように、指定を書くことです。
このページでは、画像の指定方法を説明しています。
画像の階層と指定方法
このようなアイコンが出て、画像が表示されない！ことがあります。画像が増えてきて、フォルダを新たに作ったりしたときなどに、起こりやすいですが、画像の位置がわかれば、心配はいりません。
HTML文書から見て、画像は、同階層、上の階層、下の階層のいずれかにあります。
例１は my homepage というフォルダを開いたところです。my homepage フォルダのなかに test .html と gazouA .jpg が入っている状態です。両者は同じ階層、同一階層にあるのです。
同一階層の場合の指定方法
例１
gazouA.jpgはtest.html(HTML文書) と同じフォルダ内にあります。test.htmlから見て、gazouAは同じ階層にあります。
この場合は gazouA .jpg のように画像名を書くだけでよいのです。
HTMLは、<img src="gazouA .jpg"> と書きます。
下の階層にある場合の指定方法
では、gazouA が下の階層にある場合はどうなるでしょうか？
下の階層にある場合は、画像がフォルダに入っている状態です。ですから、画像名の前に画像の入っているフォルダ名を書き加えます。
１つ下の階層の場合
例２は gazouA が１つ下の階層にある場合です。
gazouA の前に gazouA の入っているフォルダ名を書き加えます。
例２では、gazouA .jpg は imageフォルダの中にはいっています。test.html(HTML文書) から見て、gazouA は１つ下の階層に位置しています。
この場合は image/gazouA .jpg のように、間に / (スラッシュ)をいれ、フォルダ名 / 画像名と書きます。imageフォルダの（にある）gazouA と読めばわかりやすいと思います。
HTMLの指定は、<img src="image/gazouA .jpg"> となります。
２つ下の階層の場合
２つ下の階層にある場合には、画像はフォルダに入って、さらに、フォルダに入っている状態です。ですから、画像名の前に画像の入っているフォルダ名、さらにそのフォルダが入っているフォルダ名というふうに書き加えていきます。
例３
例３では、gazouA.jpg は image フォルダの中にあるようですが、フォルダを開いてみると、さらに imageA フォルダがあり、imageA フォルダの中に gazouA.jpg が入っている状態です。
test.htmlから見て、２つ下の階層になります。
この場合は image/imageA/gazouA .jpg のように フォルダ名/フォルダ名/画像名と順に書いていきます。
HTMLの指定は、
<img src="image/imageA/gazouA .jpg"> となります。
上の階層に画像がある場合
上の階層に画像が置かれている場合は、指定の書き方が少し異なります。１つ上の階層を表すには、../(ピリオド２つにスラッシュ)を使います。
画像名の前に ../ を書き加えて、../ 画像名、のように指定します。
１つ上の階層の場合
例４
例４では、test.html(HTML文書) は test フォルダの中にあります。
gazouAは、test.html から見て、１つ上の階層に位置しています。
１つ階層があがるごとに、../ （ピリオド２つにスラッシュ）を書きますから、
例４の場合は、../gazouA .jpg と書けばよいのです。
２つ上の階層の場合は../../ 画像名
３つ上の階層は../../../ 画像名というぐあいに、階層が１つあがるたびに../ （ピリオド２つにスラッシュ）を加えていけばよいことになります。
画像指定の書き方のまとめ
同一階層なら< img src="画像名" >
１つ下の階層なら< img src="フォルダ名/画像名" >
２つ下の階層なら< img src="フォルダ名/フォルダ名/画像名" >
１つ上の階層なら
< img src="../gazou .jpg">
階層が上がるごとに../ を増やしていきます。
階層は難しい？
画像の位置は初めは難しそうに感じます。が、同階層以外は、上の階層か、下の階層かで、規則通りに指定すればよいのですから、自分のサイトの構造を紙に書いてみると、理解しやすいと思います。リンクと階層もご覧ください。
タグの読み方と意味
img src はimage source イメージ ソースの略語です。正確にはimg要素とsrc属性といいます。
img要素は画像を表示させる指令をを出し、src属性は画像のある場所（画像の住所）を指示する役割をもっている、と考えればいいでしょう。
イメージ ソースとは、画像の源。（音源という言葉がありますが）。画像は画像専用のフォルダに入れておくのですが、画像を呼び出すときは、画像のある場所を指定すると呼び出すことができます。つまりフォルダ名と画像名を指定するのです。
全角半角、大文字小文字は？
HTMLを書くときは必ず半角英数字を使いますが、日本語は全角です。全角半角切り替えキーをひんぱんに使うことになります。
「<」 と 「>」は半角で、「""」（ダブルクォーテーション）も半角のものを使います。紛らわしいので要注意です。
フォルダ名の先頭は必ずアルファベットに、後は数字も使え、補助的に-ハイフンと、_アンダーバーが使えます。
ホームページが完成したら、ホームページスペースを借りて、サーバーにアップロードします。サーバーは大文字、小文字を区別するらしいので、混在していると、不具合が生じるそうです。大文字、小文字は混在させないのが安全です。小文字だけを使えば間違いがありません。
画像の形式
ウェブページでおもに使う画像には２種類の形式があり、jpg形式とgif形式があります。
jpgはジェイペグ、gifはジフと読みます。
写真など色数の多いものはjpg、ボタンの画像や簡単なイラストなど色数の少ないものはgif形式が適しています。
用語：jpg / img 要素 / src 属性/ブラウザ/サーバー/アップロード
画像をいれるフォルダ前のページ | 次のページHTMLエディタを利用する