Q&A
どっかしらの凡ミスだと思いますけど。
デベロッパーツール開いたらnot foundとかでエラー出てません？
(HTMLも閉じタグなかったりするようですので。。。)
店内写真の文字のみ表示されるようになりました。
画像を表示されるにはどうしたらいいのかわからないです。よろしくお願い致します
以下が格納状態↓
ファイル名
index.htmlからmain.jpgで、フォルダはimageです。
以下が全文↓
HTML
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<meta name="author" content="67Green"> 6<meta name="description" content="渋谷区のグリーン専門店"> 7<title>67Green</title> 8</head> 9<body> 10<header> 11<h1>67Green</h1> 12</header> 13<nav> 14<ul> 15<li>TOP</li> 16<li>ITEM</li> 17<li>MAP</li> 18</ul> 19</nav> 20<main> 21<p><img src="image/main.jpg" alt="店内写真" ></p> 22<section> 23<h2>MESSAGE</h2> 24 25<p>67Greenはグリーン専門店です。<br> 26落ち着いた空間で、ゆっくりお過ごしください。</p> 27</main> 28<footer> 29<p>Copyright 2016 67Green.</p> 30</footer> 31</body> 32</html>
not foundになっています。デベロッパーツール見ると、さらに画像のURLがモザイクになっています
>not foundになっています。
これはリンク切れの意なので、パスの指定ミスの可能性ありますね。
>さらに画像のURLがモザイクになっています
どういう現象かわからない。。。????
使ってはいけない文字を使ってたりするんですかね？？
https://teratail.com/questions/344959 で回答したフォルダ構成になっているでしょうか？
ダウンロード
┣index.html
┗imageフォルダ
┗main.jpg
質問依頼でmain.jpgを index.htmlと同じフォルダに移動させ、<img src="main.jpg" >にして確認してみてとお願いしましたが、それがそのままになっていませんか？
これは原因究明のために、移動とhtmlの編集を試してみるようお願いしただけです。
本来は、上記のようなファイルの配置とindex.html<img src="image/main.jpg" >にする必要があります。
imageフォルダにmain.jpgがなくindex.htmlと同じフォルダにある。
もしくはimageフォルダにmain.jpgはあるが、ソースが
<p><img src="main.jpg" alt="店内写真"></p>
のままになっているかのどちらかのような気がします。
また"店内写真" の後ろの引用符が 正しくない引用符のままです。
現時点のindex.htmlに修正してください。
（修正 すみません、上記については引用符の後ろにスペースがあったので誤った全角の゛のように見えただけでした。失礼しました。）
また、入力したindex.htmlを選択した状態にして、上部の<code>と書かれたボタンをクリックしてください。「ここに言語を入力」 のところにhtmlと記述してください。だいぶ見やすくなるはずです。
すみません説明が悪かったです。
「以下が全文↓」の下にあるindex.htmlの中身を以下のようになるよう修正してください。
```HTML
<!DOCTYPE html>
<html>
<head>
略
</body>
</html>
```
行頭に「```HTML」を、末尾に 「```」を追加するだけです。
修正された「ファイル名``html index.html ```からmain.jpgで、フォルダはimageです」の部分がおかしくなっているので「ファイル名html index.html からmain.jpgで、フォルダはimageです」に戻してください。
表示されない画像をネット上でデベロッパーツールにて確認してみると、画像が移動されたとなっていました。
この場合は、ダウンロードしたものの画像が破損しており表示されないのでしょうか？
エクスプローラー上で画像を右クリックして、「プログラムから開く」-[ペイント]で開いてみてください。画像が表示されれば、画像は破損していないと思います。
「画像をネット上でデベロッパーツールにて確認」というのはブラウザに画像をドラッグ＆ドロップして、ブラウザの検証ツールを使用したということですか？
ブラウザは何をお使いでしょうか。
[net::ERR_FILE_NOT_FOUND]ではなく「画像が移動された」と日本語で表示されているのですか？
手元で再現して確認したいので、具体的に何をどう操作してどう表示されるのか正確に教えてください。
繰り返しになりますが、main.jpgはimageフォルダ内にありますか？
エクスプローラー上で画像を右クリックは、そもそもエクスプローラー上では画像が出てこないので出来ませんでした。
ブラウザはGoogle Chromeです。
ERR_FILE_NOT_FOUNDと書かれています、、。
はい、main.jpgはimageフォルダ内入ってます
「画像」としたのがいけなかったですね。
「画像ファイル」と言いたかったのです。
imageフォルダ内にあるmain.jpgを右クリックして という意味でした。
フォルダ名が inage とか間違ってはいないでしょうか。
お手数ですがフォルダ名を確認させてください。
C:ドライブ直下にtestフォルダを作成してください。
ダウンロードフォルダにある「index.html」と[image]フォルダを、testフォルダに コピーしてください。
[スタート]を右クリックして「ファイル名を指定して実行」を選択してください
「ファイル名を指定して実行」ウィンドウの名前に
cmd
と入力して、[OK]を押してください。
コマンドプロンプトが開くので、以下のコマンドを入力してください
cd C:\test
cls
dir /s
以上を入力したら結果が表示されるので
ctrl + a を押してください。文字が選択状態になると思います。
そのままenterしてください。内容がコピーされます。
その内容を、質問文に追加してください。
すみません、やり方がよくわからないです。
失礼 もしかしてWindowsではなくMacですか？
C:ドライブ直下にtestフォルダを作成してください。
ダウンロードフォルダにある「index.html」と[image]フォルダを、testフォルダに コピーしてください。スタートも出てきません
お手数ですがよろしくお願い致します
[スタート]を右クリックして「ファイル名を指定して実行」を選択してください
cドライブ直下がわかりません。
OSはなんでしょうか？macOS？Windows10？
MacBookproです！
macOSです。
何度もすみませんがよろしくお願い致します。
https://pc-karuma.net/mac-finder-copy-file-folder-path/
これを参考にindex.htmlとmain.jpgのパスを教えてください。
またダウンロードフォルダはicloudなどのクラウド内にあるのか、自身のMacBookpro内にあるのかも教えてください。
パスに自身の名前やユーザーIDが含まれる場合はusername や userIDのように置き換えてください。
またパスと同じかもしれませんが、
index.htmlをブラウザに表示した際のブラウザのアドレスに表示されている文字列
画像をブラウザにドラッグドロップした際のブラウザのアドレスに表示されている文字列を教えてください。
上記と同様ユーザーIDなどは適宜置き換えてください。
遅くなってしまいまして申し訳ございません、
main.jpgのパス
/Applications/image/main.jpg
index.htmlのパス
/Applications/hajimeruHTML/67Green/
index.htmlをブラウザに表示した際の文字列
file:///Applications/hajimeruHTML/67Green/index.html
画像のブラウザに表示した際の文字列
file:///Applications/hajimeruHTML/67Green/main.jpeg
よろしくお願い致します。
画像のパスのファイル名はmain.jpgで
ブラウザで確認していただいたパスはmain.jpegで別のファイルのように思われます。
どちらか間違えているのであれば訂正をお願いします。
何度も作業をお願いをして恐縮ですが、以下の作業をお願いします。
以下の1. 2.いずれかの方法でターミナルを起動してください。
1.
DockでLaunchpadのアイコン をクリックして、検索フィールドに「ターミナル」と入力してから、「ターミナル」をクリックします。
2.
Finder で、「/アプリケーション/ユーティリティ」フォルダを開いてから、「ターミナル」をダブルクリックします。
次の一行をコピーしてターミナル上でCommand＋Vで貼り付けて、returnキーを押してください
ls -lR /Applications/hajimeruHTML/67Green/
ls -lR の結果が表示されるので選択してCommand＋Cでコピーして結果を質問内容の最後に貼り付けてください。
結果のなかに「ユーザーID@コンピューター名 ~ %」があればその部分は削除してください
大変失礼致しました。
file:///Applications/image/main.jpg
になります。
ls -lR の結果は、-bash: /Applications/hajimeruHTML/67Green/: is a directoryです
よろしくお願い致します！
申し訳ない、コマンド間違えてました。
同様にターミナルで下記を一行ずつコピー、貼り付けてリターンして、2行目を実行した結果を教えて下さい
cd /Applications/hajimeruHTML/67Green
ls -lR
尚、表示された結果は一行だけでなく全部貼り付けてください
Last login: Tue Jun 22 22:51:12 on ttys000
The default interactive shell is now zsh.
To update your account to use zsh, please run `chsh -s /bin/zsh`.
For more details, please visit https://support.apple.com/kb/HT208050.
MacBook-Pro:~ username$ cd /Applications/hajimeruHTML/67Greenls -lR
-bash: cd: /Applications/hajimeruHTML/67Greenls: No such file or directory
MacBook-Pro:~ username$
こちらになります。
よろしくお願い致します
一行目と二行目がくっついて実行されてしまっているので一行ずつ実行してください
The default interactive shell is now zsh.
To update your account to use zsh, please run `chsh -s /bin/zsh`.
For more details, please visit https://support.apple.com/kb/HT208050.
MacBook-Pro:~ username$ cd /Applications/hajimeruHTML/67Green
MacBook-Pro:67Green username$ ls -lR
total 2896
-rw-r--r--@ 1 username staff 652 6 19 21:49 image
-rw-r--r--@ 1 username staff 1462363 6 18 12:36 imo.jpg.png
-rw-r--r--@ 1 username staff 602 6 22 15:41 index.html
-rw-r--r--@ 1 username staff 788 6 20 15:27 indexのコピー.html
-rw-rw-r--@ 1 username staff 316 5 8 2020 item原稿.txt
drwxr-xr-x 3 username staff 96 6 20 19:18 test
./test:
total 136
-rw-rw-r--@ 1 username staff 65799 5 8 2020 main.jpg
MacBook-Pro:67Green username$
一行目と二行目段落変えて離しました
よろしくお願い致します
imageって名前のファイルは何のファイルですか？
取り敢えずこのimageという名前のファイルを別の名前に変えてください。
変えられなければ、別フォルダに移動してください。
/Applications/hajimeruHTML/67Greenフォルダにimageフォルダを作成してください。
作成したimageフォルダにmain.jpgをコピーしてください。
index.htmlをブラウザで表示し、画像が表示されるか確認してください。
表示されなければ、もう一度
cd /Applications/hajimeruHTML/67Green
ls -lR
を実行して結果を教えて下さい
あなたの回答
tips
プレビュー
