Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

HTML

htmlの画像の階層について詳しく説明(知らないと画像表示で困ります)

投稿日:

Pocket

html 画像 階層

 

うも、チャーさんです。

 

あなたはhtmlファイルで画像を表示したいのに、

できない。と悩んでいませんか?

 

実は画像ファイルが表示できない場合、

htmlの画像の階層という概念を知れば、

簡単に問題解決できます。

 

 

この記事では階層とは何か?

階層ごとにどのように記述すれば、

画像を表示できるのか?

 

それについて書いていますので、

あなたが階層がらみで画像が表示できない場合、

この記事を読めば画像を表示できます。

 

 

ということで、画像表示問題で、

階層について知りたい場合、

このままスクロールして読んでみてください。

 

スポンサードサーチ

htmlの画像表示に関わる階層について

 

まず結論から話します。

 

冒頭とかぶる部分があるのですが、

htmlで画像を表示したいのに、

表示できないって時は階層を疑いましょう。

 

 

理由は階層が違うとhtmlで画像を表示するために、

<img src=”画像ファイル名”>とhtmlファイルに記述しても、

画像が表示されないからです。

 

なのでhtmlで画像を表示するには、

階層の理解が必要です。

 

階層とは

 

htmlの画像表示には階層というものが関わってます。

 

そして、階層というのは画像ファイルが、

htmlファイルからみて、どこにあるか?

というもののことです。

 

 

例えば下の画像のように、

同じフォルダ内にhtmlファイルと、

画像ファイルがあるとします。

 

この場合、同一階層にあると言います。

 

 

また別の例で、

上の画像にあった、1.pngという画像ファイルを、

imageFileというフォルダに入れました。

 

 

この場合、htmlファイルから見て、

画像ファイルは同じ階層にはいなくなったわけです。

 

で、フォルダの中にフォルダがあるわけですから、

htmlファイルのある階層よりも画像ファイルは、

より下の階層にある、という見方がされます。

 

 

そのためこの2枚目の画像の場合は、

同一階層ではなく、下の階層と呼ばれるわけです。

 

で、反対にフォルダの外に画像ファイルがあり、

デスクトップ上などに画像ファイルがあると、

htmlファイルから見て上の階層にあると言えます。

 

 

そのため上の階層と言います。

ということで同一階層、上の階層、下の階層

というのがあるわけですね。

 

階層が変わると画像はそのままでは表示されない

 

で冒頭でも話しましたが、

htmlで画像を表示する場合、

この階層が関わってきます。

 

どう関わるか一例を話します。

 

 

例えば画像ファイルがhtmlファイルよりも、

下の階層にある場合、htmlファイルに、

画像ファイル名だけを書いても画像は表示されません。

 

例えば、

今この記事で説明してる画像ファイル名は、

1.pngです。

 

ということで、画像を表示するために、

<img src=”ファイル名”>を書いてみましょう。

 

実行してみましたが、

表示されませんね。

 

これはなぜなら、今の僕のパソコンでは、

画像ファイルが下の階層にあるからです。

 

そのため、ただ単に画像ファイル名だけを記述しても、

表示されないわけです。

 

 

ですが、記述を変えて実行すると、、

 

 

このようにちゃんと表示されましたね。

 

こんな風に、htmlの画像では階層というのが、

表示に関わっており、これを知らないと、

「あれ?ちゃんと書いたのになんで表示されないんだ汗」

 

となりますので、知っておきましょう。

 

スポンサードサーチ

htmlの画像を表示させる記述を階層ごとに紹介

 

さてここからは、

階層ごとにどう記述すればhtmlで画像が、

表示されるのか?

 

それを説明します。

 

同一階層

 

まず同一階層の場合、

このようにhtmlファイルと画像ファイルが、

同じ階層にある場合。

 

 

この場合は、普通に画像ファイル名だけを書けば、

以下のように画像は表示されます。

 

 

正直これが一番簡単ですね。

 

下の階層

 

で次に、下の階層にある場合。

 

 

この場合は、

<img src=”フォルダ名/画像ファイル名”>

と書きましょう。

 

なので、この記事で出してる例の場合、

<img src=”imageFile/1.png”>

と書けば画像が表示されます。

 

 

表示されてますね。

こんな風に下の階層の場合は、

フォルダ名/を加えて書けばいいのです。

 

ちなみに、下の階層のさらに下の階層に、

画像フォルダがある場合もあります。

 

 

その場合は、それに合わせてフォルダ名を

書きましょう。

<img src=”フォルダ名/フォルダ名/画像ファイル名”>

 

このような形です。

フォルダが増えた分だけ、

フォルダ名を追加すればOKです。

 

上の階層

 

そして最後に上の階層の場合です。

 

以下の画像のように、

htmlファイルはデスクトップにあるフォルダにあるのに、

画像ファイルはデスクトップ上にあります。

 

 

つまりこの場合は、画像ファイルは、

上の階層にあります。

 

そしてこの場合は、

../と書きましょう。

ドットドットスラッシュです。

 

 

この../が1つ上を意味しております。

なので、テンプレ的には、

<img src=”../画像ファイル名”>になるわけです。

 

で、今回の記事の例で行くと、

1つ上の階層にあるので、

<img src=”../1.png”>になるわけですね。

 

そう記述して実行すると、

 

 

このようにちゃんと表示されましたね。

 

また先ほどの下の下と同じように、

画像ファイルがhtmlファイルからみて、

上の上の階層にある場合。

 

同じように階層を上がるごとに、

../を増やしましょう。

 

スポンサードサーチ

htmlで階層が違う画像の表示をする手順

 

では、どうやって自分でやるか少し補足説明します。

 

1画像を用意

まずは表示するための画像を用意しましょう。

 

2imgタグを書く

そして次にhtmlファイルを書き、

<img src=””>とbodyタグ内に記述しましょう。

 

3画像ファイルの階層をチェック

そして次に画像ファイルがhtmlファイルからみて、

どこにあるのか確認しましょう。

 

4記述をする

そして画像ファイルの階層に合わせて、

img src=””のダブルクオーテーションの中の、

記述を書きましょう。

 

5ブラウザでチェック

そしてそれができたら、

実際にhtmlファイルを実行して、

ブラウザでチェックしましょう。

 

そしてそれであなたの目でみてチェックして、

ちゃんと表示されてればOKです。

 

スポンサードサーチ

まとめ

 

htmlの画像の階層とは何か?

ですが、

 

htmlファイルでの画像の表示に関わる、

大事な概念です。

 

そして階層とは、htmlファイルからみて、

画像ファイルがどこに置いてあるか?

というものです。

 

 

そして画像ファイルの置かれてる階層によって、

htmlファイルで画像を表示するための記述は、

変わってくるので、注意しましょう。

 

それでは、この記事はここで終了ですが、

この記事の内容を参考にあなた自身で、

画像の表示を階層を色々変えて、やってみてください。

 

 

プログラミングは実際にあなた自身でコードを書いて、

実行して、動きをみたときに上達していくので、

自身で実践してみてください。

 

それでは読んでもらってありがとうございました。

 

チャーさん

 

 

-HTML

スポンサードサーチ

関連記事

no image

見出しに横線をつける方法「webページ制作に便利」

どうも、チャーさんです。   あなたは見出しの横に、横線を表示させたい。 そう思っていませんか?   この記事では、見出しに横線をつける方法を、 書いています。(以下のようなのがで …

no image

htmlのspanとは?使い道を紹介します。「意外に便利」

  どうも、チャーさんです。   あなたはspanタグとは何だ? spanタグって何に使えばいいの? と思っていませんか。   この記事では、spanタグとは、 そしてs …

no image

htmlのリンクの下線を消す方法「1行書けば消せますよ」

どうも、チャーさんです。   あなたはhtmlのリンクの下線を消す方法を、 探していませんか?   この記事では、リンクの下線を消す方法を 書いています。   &nbsp …

no image

インライン要素にmarginの上下が効かない時の解決方法「簡単です」

  どうもチャーさんです。   あなたはインライン要素にmarginの上下を、 効かせたいのに効かなくて困ってませんか?   この記事では、そんな状態の解決方法を、 書い …

no image

javascriptをhtml内で使う方法「完全初心者向け」

どうもチャーさん(@chaa___san)です。   あなたはjavascriptをhtmlで使えないのか? と疑問に思っていませんか?   結論からいうと使えます。   …

no image

webページにトップへ戻る機能をつける簡単な方法「2行書けばできます」

どうも、チャーさんです。   あなたはwebページにトップへ戻る機能を、 つけたいと思っていませんか?   この記事ではトップへ戻るを作る方法を、 紹介してます。   & …

no image

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

no image

プログラミングのdivをわかりやすく説明します。divにcssを適用する方法も

  どうも、チャーさん(@chaa___san) です。   あなたはdivとはなんだ? と思っていませんか。   この記事ではdivとは何か、 そしてどういう風に使えば …

no image

liタグを横並びにする方法。この方法なら15秒でできますよ。

どうも、チャーさんです。   あなたがliタグを横並びにしたい、 そう思っていませんか?     この記事では、liタグを横並びにする方法を、 書いています。 &nbsp …

no image

htmlでリンクを画像につける方法「速攻でできます」

どうも、チャーさんです。   あなたは、htmlでリンクを画像につける方法を、 探していますか?   この記事では、画像にリンクをつける方法を 話しています。   &nb …

no image

コーダーの仕事内容をわかりやすく紹介します。

どうもチャーさんです。   あなたはコーダーの仕事内容って、 どんなだろう? と思っていませんか。   またコーダーって具体的にどんなことをやってるんだろう? と疑問に思っていませ …

no image

webページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

no image

htmlで改行をする方法(3秒で習得できます)

  どうも、チャーさんです。   あなたはhtmlを勉強していて、どうすれば 改行できるのか?と悩んでいませんか。   また色々タグを覚えて、プログラミングを上達させたい …

no image

liタグのメニューにアイコンを表示させる方法(コード例つき)

どうもチャーさんです。   あなたはliタグで作ったメニューに、 アイコンを表示させたいと思っていませんか?   この記事では、liタグのメニューに アイコンを表示させる方法を書い …

no image

コーダーがphotoshopを使えた方がいいのかについて書きます。

どうも、チャーさんです。   あなたはコーダーはphotoshopを、 学んだ方がいいのか?   仕事獲得のためには、コーダーも、 photoshopを使えた方がいいのか? と疑問 …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。