HTMLについて教えてください。

デスクトップ上にある桜の写真を下記のソースコードで表示しようとしてもなぜか表示出来ません。どうすれば表示出来ますか？

質問者からの補足コメント

• 

  美しい桜という文字だけ表示されて画像が表示されないのですがなぜでしょうか？

  No.3の回答に寄せられた補足コメントです。 補足日時：2020/08/01 16:27

• 

  C:\Users\tomok\Desktop
  と
  C:\Users\tomok\Desktop\HTML-CSS-Webdesign-2\chapter2\c2-07-1
  と書いてありました。
  この場合デスクトップで画像を表示するにはソースコードは何ですか？

  No.4の回答に寄せられた補足コメントです。 補足日時：2020/08/01 17:03

• 

  やはり画像が表示されないのですがなぜでしょうか？

  No.5の回答に寄せられた補足コメントです。 補足日時：2020/08/01 17:40

• 

  やはり画像が表示されないのですがなぜでしょうか？
  パソコンは買ったばかりです。

  No.6の回答に寄せられた補足コメントです。 補足日時：2020/08/01 18:46

• 

  デスクトップに保存していいんですよね？

  No.7の回答に寄せられた補足コメントです。 補足日時：2020/08/01 20:43

• 

  <img src="sakura.jpg">
  
  に戻して、
  
  C:\Users\tomok\Desktop\HTML-CSS-Webdesign-2\chapter2\c2-07-1
  
  直下にsakura.jpgを置けば表示されますがデスクトップに保存すると表示されません。

  No.8の回答に寄せられた補足コメントです。 補足日時：2020/08/01 21:29

• 

  C:\Users\tomok\Desktop\HTML-CSS-Webdesign-2\chapter2
  
  直下に置いて
  
  <img src="sakura.jpg">
  
  を
  
  <img src="../sakura.jpg">
  
  に変えたら表示されません。

  No.9の回答に寄せられた補足コメントです。 補足日時：2020/08/01 22:45

• 

  キャッシュをしても表示されません。

    補足日時：2020/08/02 11:17

• 

  これで合ってますか？

  
  No.11の回答に寄せられた補足コメントです。 補足日時：2020/08/02 14:07

No.8 ベストアンサー 回答者： cametan_42 回答日時： 2020/08/01 21:13

> デスクトップに保存していいんですよね？

<img src="../../../sakura.jpg">

という記述を

<img src="sakura.jpg">

に戻して、

C:\Users\tomok\Desktop\HTML-CSS-Webdesign-2\chapter2\c2-07-1

直下にsakura.jpgを置け、という意味です。

それでもし、やっぱり画像が表示されないのだったら、原因はHTMLの書き方以外ですね。
恐らく、拡張子の表示をキチンとやってない、って事なんじゃないでしょうか。

No.12 回答者： cametan_42 回答日時： 2020/08/02 14:48

> これで合ってますか？

画像が小さくて見えづらいんですが、多分・・・。
オプションの方で

【表示】-> "登録されている拡張子は表示しない"のチェックを外す

はしておいてください(Windowsでプログラミング系の事をやるならどの道必須です)

さて、それでも相対パスが動かないとしたら、写真のアクセス権がおかしい可能性がありますね。

No.11 回答者： cametan_42 回答日時： 2020/08/02 13:05

じゃあ、次の確認です。

拡張子の表示設定はキチンと行われてるでしょうか。

Windows 10 ファイルの拡張子を表示させる方法:
https://www.pc-koubou.jp/magazine/36291

No.10 回答者： cametan_42 回答日時： 2020/08/01 22:54

> C:\Users\tomok\Desktop\HTML-CSS-Webdesign-2\chapter2

>
> 直下に置いて
>
> <img src="sakura.jpg">
>
> を
>
> <img src="../sakura.jpg">
>
> に変えたら表示されません。

なるほど、一回層上げただけで問題が生じるわけですね。ふうむ。これは厄介だな。

ええと、ブラウザはWindows 10デフォルトのMicrosoft Edgeでしょうか。
一回、ブラウザのキャッシュを削除してみますか。
次のページに従って下さい。

Microsoft Edgeのキャッシュを削除する流れを解説:
https://net-torisetsu.jp/microsoft-edge-cache/

それでもう一回試してみて下さい。
(別のブラウザを利用してるなら、"ブラウザ名 キャッシュ 削除" で検索してみてください。)

No.9 回答者： cametan_42 回答日時： 2020/08/01 21:55

> <img src="sakura.jpg">

> に戻して、

> C:\Users\tomok\Desktop\HTML-CSS-Webdesign-2\chapter2\c2-07-1

> 直下にsakura.jpgを置けば表示されます

じゃあ、一応表示はされた、って事ですね。
なら一個一個潰していきましょう。

1. sakura.jpgを次は

C:\Users\tomok\Desktop\HTML-CSS-Webdesign-2\chapter2

直下に置いて

<img src="sakura.jpg">

を

<img src="../sakura.jpg">

に変えたらどうなるか?

2. 1が成功したら、今度はsakura.jpgを

C:\Users\tomok\Desktop\HTML-CSS-Webdesign-2

直下に置いて

<img src="sakura.jpg">

を

<img src="../../sakura.jpg">

に変えたらどうなるか。

一足飛びにデスクトップにsakura.jpgを置くのではなく、フォルダの階層を一個一個上げていって虱潰しに調べてみて下さい。

No.7 回答者： cametan_42 回答日時： 2020/08/01 20:08

> パソコンは買ったばかりです。

そうなるとWIndows 10ですよねぇ。おかしいな、それなら動く筈なんだけど、お手上げっぽい?

考えられる可能性としては

1. sakura.jpgのアクセス権限がおかしな事になってる。

2. sakura.jpgって言ってるけど、写真の名前がsakura.jpgじゃなくって例えばsakura.jpegとか打ち間違えてる。

3. 「買ったばっかり」なんで拡張子表示の設定をしていない。テキストに従ってsakura.jpgと名付けたが実際はsakura.jpg.jpg(とかに)なってる。

そんなトコですかね。
取り敢えず一回、sakura.jpgをhtmlファイルがあるフォルダにコピーして、それなら上手く表示されるかどうか確認した方が良いですね。
あと、3の拡張子設定はこれも一回確認しておいた方が良いです。あまりパソコンに詳しくない場合、ここの設定飛ばして色々やり始めてドツボにハマる、ってのは割に良くありそうなんで。

Windows 10 ファイルの拡張子を表示させる方法:
https://www.pc-koubou.jp/magazine/36291

No.6 回答者： cametan_42 回答日時： 2020/08/01 18:30

> やはり画像が表示されないのですがなぜでしょうか？

ふむ。じゃあ諦めてフルパス記述しちゃえ。

<img src="C:\Users\tomok\Desktop\sakura.jpg">

あるいは

<img src="C:\\Users\\tomok\\Desktop\\sakura.jpg">

かな?
(ひょっとして使ってるWindowsが古い、って可能性も・・・・・・。)

No.5 回答者： cametan_42 回答日時： 2020/08/01 17:21

> C:\Users\tomok\Desktop

> と
> C:\Users\tomok\Desktop\HTML-CSS-Webdesign-2\chapter2\c2-07-1
> と書いてありました。
> この場合デスクトップで画像を表示するにはソースコードは何ですか？

ほらね。全然HTMLファイルがある場所が違うじゃん。
つまり、"sakura.jpg"のある場所はデスクトップ直下だけど、HTMLファイルがある場所は

C:\Users\tomok\Desktop\HTML-CSS-Webdesign-2\chapter2\c2-07-1\何とか.html

でしょ?デスクトップ直下のフォルダのまた下のまた下の・・・って、それじゃ上手く行きませんよ。
「正確に書かないと」分かるモノも分かりません。

つまり、作成したHTMLファイルに対して"sakura.jpg"が存在するデスクトップは「親フォルダの親フォルダの親フォルダ」なんです。
従って、No.3をキチンと理解してたら、

<img src="../../../sakura.jpg">

と書けば良いのがすぐ分かる筈です。

No.4 回答者： cametan_42 回答日時： 2020/08/01 16:42

> 美しい桜という文字だけ表示されて画像が表示されないのですがなぜでしょうか？

じゃあ、貴方のhtmlファイルがどこにあるのか、"sakura.jpg"がどこにあるのか、説明と実態が全く違う、って事ですね。そもそも存在場所を把握していない可能性がある。

Windowsはあまり明るくないですが、貴方が作ったhtmlファイル、及び"sakura.jpg"の両者を右クリックして、【プロパティ】を選んで下さい。ウィンドウが立ち上がる筈ですが、そこの【全般】タブで表示される中に【場所】ってのがあると思います。

C:\...

とか表示されてる筈ですが、それが「絶対パス」です。

a. 諦めて作成したhtmlファイルとsakura.jpgを同じ場所にする。

b. 作成したhtmlファイルの<img src="sakura.jpg" alt="美しい桜">のsakura.jpgを先程のプロパティからコピペしたsakura.jpgの【場所】(絶対パス)に置き換えてしまう。

あるいは、

c. 両者の絶対パスをここに貼っ付けて、相対パスの書き方を勉強する。

a、b、cのどちらやっても良いですよ(少なくともまずは、aで上手く行くかどうか最初は確認するべきだと思う)。
いずれにせよ、

> 画像が表示されないのですがなぜでしょうか

と言われても詳細が不明なので、何とも言いようがありません(多分 #1 氏への返信に書いたhtmlファイルの置き場所なり、sakura.jpgの置き場所が違うだけなんだと思いますが)。

No.3 回答者： cametan_42 回答日時： 2020/08/01 14:37

> 違うところにある時は何て記載すればよろしいでしょうか？

場所によるんですが、#1氏へのコメント

> ディスクトップのファイルの中にあります

を考慮すると・・・デスクトップ上にあるフォルダ直下(そのファイルを開くとすぐ問題のHTMLファイルがある)にあると仮定すれば、

<img src="../sakura.jpg" alt="美しい桜">

ですね。

#1氏も書いてた「相対パス」ですが、これはUNIX系表記法で、Windowsユーザーにはちょっと馴染みが無いかもしれません。
詳しくは専門書なり教科書に譲りますが、パターン的には、いずれにせよ「HTMLファイルが置いてある場所から見て」、どこを探せば良いのか、と言うのが記述のコツです。
例えば

・HTMLファイルと同じ場所にある -> <img src="sakura.jpg" alt="美しい桜">
・HTMLファイルがある場所にフォルダがあって、その中にある -> <img src="フォルダ名/sakura.jpg" alt="美しい桜">
・HTMLファイルがある場所の更に上(親フォルダとかいいますが)にある -> <img src="../sakura.jpg" alt="美しい桜">

なんてのが主要なパターンです。今回は「恐らく」3つ目のケースでしょう。