質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

645閲覧

imgを使っての画像表示について

tosamaru

総合スコア9

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2020/01/12 11:20

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
(例)PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

イメージ説明

エラーメッセージ

現在htmlを勉強しているパソコン超初心者なのですが、imgタグを使っての画像表示でわからない点があり質問しました。

画像にあります、猫の画像を表示させたいのですが、作成する際にこの画像のフォルダー名をimageとし、ファイル名をneko.jpgとしました。

エディタはATOMを使っていて、ATOMはデスクトップというフォルダーに入っています。なので、ATOMが入っているデスクトップフォルダーに猫の画像を入れた際はneko.jpgと打てば画像が表示されました。

ですが、この画像のように、imageと新たにフォルダーを作りそこにneko.jpgの画像を入れてある場合、どのようにコードを打てば画像が表示されるのでしょうか?
image /neko.jpgと打っても表示されず、フォルダーとファイルの関係性や階層などがよく分かりません。

どなたか教えて頂けないでしょうか?

該当のソースコード

ソースコード

試したこと

../image/neko.jpgなど打ったのですが、関係性が把握できていなく表示されないままです。
ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

現在htmlを勉強しているパソコン超初心者なのですが、

現在はローカル環境でHTMLファイルを作成していると思いますが、最終的にWEB公開するのを目指しているのだと思います。

HTMLファイルはそれだけで成立するのではなく、他にCSSファイルや画像ファイルなど複数のファイルが関連して成立します。それぞれのファイルをあちこちに分散して置いておくと管理が難しくなります。
また、WEB公開するときもあちこちからファイルを集めてきてサーバーにアップロードするのは面倒ですしトラブルの元です。関連ファイルの場所を移動させるとHTMLも修正する必要が出てきます。

デスクトップにHTMLファイルを置くのではなく、デスクトップかドキュメントにフォルダーを作成して、そこにHTMLファイルと関連ファイルをまとめておくようにします。(ATOMと同じフォルダーに置いておく必要はありません。ATOMは単なるエディターですので)
画像ファイルはimageフォルダーにまとめておきたいなら、上記で作成したフォルダー内にimageフォルダーを置きます。

デスクトップよりドキュメントフォルダーに置くことをお勧めします。デスクトップにはショートカットと一時的なファイルのみ置くようにすべきですので。

ドキュメントフォルダーに、例えば、「HtmlFile」というフォルダーを作成して、そこにHTMLファイルを置きます。さらに「HtmlFile」フォルダー内に「image」フォルダーを作成してそこに画像ファイルを置きます。

こうしておけば、HTMLファイル内に image/neko.jpg と記述すれば画像は表示されます。このようにHTMLファイルの位置を起点にしてかく書き方を相対パスといいます。

また、将来WEB公開するとき、「HtmlFile」フォルダー内のファイルとフォルダーを一括してアップロードすれいいので楽です。また、上記のように相対パスで書いておけばそれを修正する必要はありません。

投稿2020/01/12 14:48

編集2020/01/12 15:22
hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tosamaru

2020/01/12 16:36

非常にわかりやすい解説ありがとうございます!!なんとなくですが、フォルダーとファイルの関係性が分かってきました。フォルダーを作ってまとめることで理解しやすく表示も容易なのですね。 さっそく作ってみて画像の表示の構造をしっかり理解したいとおもいます。 こんな簡単なはずのことすら理解できないことが悔しくてたまりません。力になっていただき本当にありがとうございます。理解できるまで何度もやってみます!
guest

0

実際のコード全体ご提示いただかないと何とも言えませんけど、
ATOMはあくまでツールです。

関係するのはimgタグが打たれたhtmlファイルが存在する場所から見た位置です。
そのhtmlがどのディレクトリに保存されているかで決まります(あくまで相対パスの場合)。

投稿2020/01/12 12:57

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tosamaru

2020/01/12 13:18

回答ありがとうございます。初心者なので本当に説明がつかず申し訳ないです。 htmlファイルが入っているのが画像でいうとデスクトップというフォルダーに入っていました。 なので、猫の画像もデスクトップに入れたところimage/neko.jpgかneko.jpgで表示されたのですが、画像のようにimageフォルダーを別に作りそこに画像が入っている場合、デスクトップフォルダーに入っているhtmlファイルから見て、「どの位置」なのかがわかりません。汗
m.ts10806

2020/01/12 13:26 編集

「ダウンロード」フォルダ 「デスクトップ」フォルダ(あまりデスクトップをフォルダということはありませんけど) の「絶対パス」がどこかがわかっていればそこで決まります。 Windowsの種類にもよるかもしれませんが大抵、 デスクトップは C:\Users\{ユーザー名}\Desktop でダウンロードは C:\Users\{ユーザー名}\Downloads です。 簡単に確認できるのはエクスプローラーのアドレスバーで「cmd」と打つとコマンドプロンプトが現在いるエクスプローラの位置で開くので、そこで確認することです。 ここから提示された情報を元に、 [Desktop]にHTMLがあって[Downloads]→[images]に画像があるので 辿るとしたら、 ../Downloads/images/{画像名} ですかね。 正しいパス名を得ること、「階層を上がる」「階層を下がる」感覚を身につけることが大事だと思います。
tosamaru

2020/01/12 16:42

丁寧に解説いただき、本当にありがとうございます! 色々、いじっていたらおっしゃられているようなファイルパスなどが出てきました。 まだ、よくわかっていないのですが色々試して「階層を上がる」「階層を下がる」の感覚を身に着けたいと思います。 本当に下手な質問をして、申し訳ございません。 パソコン自体の構造が全く分かっていないので悔しいですが1から学んでいきたいと思っています。 本当にありがとうございます。
m.ts10806

2020/01/12 22:10

質問することは特に悪いと思いませんし、うまく言おうとする必要はないと思います。 文章力云々より「解決する気があるか」「回答を理解する気があるか(自分の身にしようとしているか)」のほうが見られます。 「HTML」という観点だけだとあまりパソコンの構造まで知る必要はないかなと。 あくまで「どこにファイルがあって、どう繋げるか」だけです。 慣れでなんとかなる部分と思います。 わからない言葉があったらそれを調べて、そこにわからない言葉が出てまた調べて…の繰り返しで、あとはたくさんコードを組んで身に付けていきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問