Q&A
ファイル構成を教えてください
書籍の通りに入力しましたが、画像が何度調べてファイルやフォルダを操作したりしても表示されません。
写真がつけられず、申し訳ないですが、同フォルダ内の別ファイルになり、ダウンロードに格納してあります。
何を試しても何も表示されず、、困ってます。
よろしくお願い致します
上記の"店内写真”の表記を正しく直したら、店内写真の文字のみ表示されるようになりました。
画像を表示されるにはどうしたらいいのかわからないです。よろしくお願い致します
以下が格納状態↓
ファイル名index.htmlからmain.jpgで、フォルダはimageです。
以下が全文↓
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="67Green"> <meta name="description" content="渋谷区のグリーン専門店"> <title>67Green</title> </head> <body> <header> <h1>67Green</h1> </header> <nav> <ul> <li>TOP</li> <li>ITEM</li> <li>MAP</li> </ul> </nav> <main> <p><img src="image/main.jpg" alt="店内写真”></p> <section> <h2>MESSAGE</h2> <p>67Greenはグリーン専門店です。<br> 落ち着いた空間で、ゆっくりお過ごしください。</p> </main> <footer> <p>Copyright 2016 67Green.</p> </footer> </body> </html>
写真がつけられず、申し訳ないですが、同フォルダ内の別ファイルになり、ダウンロードに格納してあります。
ファイル名index.htmlからmain.jpgで、フォルダはimageです。
フォルダ構成とファイル構成を質問に追記お願いします。
また、htmlのコードは表示されると困る文字列があれば置き換えて、できるだけ全部掲載してください。
画像が表示されない場合 「店内写真」 と表示されるはずですが、表示されていますか？
<追加>
ファイルやフォルダ操作とは具体的に何をしたかもお願いします。
まだ試していなければ、main.jpgをhtmlと同じフォルダに置いて、
<p><img src="main.jpg" alt="店内写真”></p>として表示されるか確認してみてください。
ダウンロード
┗〇〇
┣index.html
┗image
┗main.jpg
で合っていますか？
ダウンロード
┗image
┣index.html
┗main.jpg
になります！
よろしくお願い致します。
Crimson_Tide様の通り、main.jpgをindex.htmlと同じフォルダに置いて、<p><img src="main.jpg" alt="店内写真”></p>として表示されるか確認してみてください。
同じフォルダに写した上で、"main.jpg"に変えて更新しましたが、店内写真とも何も現れませんでした。
やはりindex.htmlの内容をすべて掲載していただけないでしょうか
かしこまりました！
以下全文です。よろしくお願い致します
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="67Green">
<meta name="description" content="渋谷区のグリーン専門店">
<title>67Green</title>
</head>
<body>
<header>
<h1>67Green</h1>
</header>
<nav>
<ul>
<li>TOP</li>
<li>ITEM</li>
<li>MAP</li>
</ul>
</nav>
<main>
<p><img src="image/main.jpg" alt="店内写真”></p>
<section>
<h2>MESSAGE</h2>
<p>67Greenはグリーン専門店です。<br>
落ち着いた空間で、ゆっくりお過ごしください。</p>
</main>
<footer>
<p>Copyright 2016 67Green.</p>
</footer>
</body>
</html>
ダウンロード
┣index.html
┗image
┗main.jpg
でも試しましたが、表示されません。
よろしくお願い致します
ここにソースを全て載せられても確認し難いので、質問本文に追記してください。
回答1件
0
ベストアンサー
ソースが質問から消えてしまいましたが、それはさておき。
glyzinieh様とのやりとりを拝見したところ、ファルダ構成が原因と思われます。
<img src="image/main.jpg">という記述は htmlのフォルダを基準に、直下のimageフォルダにあるmain.jpgを表します。
同じフォルダに移動して試してみて、と追記依頼をして混乱させてしまっているかもしれませんが、index.htmlをダウンロード直下に移して下記(※上記となっていたので修正)の構成にすれば解決するかと思います
ダウンロード
┣index.html
┗image
┗main.jpg
追記
原因
<img src="image/main.jpg" alt="店内写真”>
alt="店内写真” の後ろの引用符(クォーテーションマーク)ダブルコーテーションが半角引用符ではなく、別の記号に全角になっていました。
他の箇所の半角の引用符は正しいものなので、「店内写真」入力後に全角のまま"を入力し、"に類似した別の記号に変換したのではないかと推察します。
対策
「店内写真」の直後の「”」を半角の引用符(クォーテーションマーク)ダブルコーテーションにすれば画像が表示されると思います。
追記2
今後の再発防止策として、以下を実施してはどうでしょうか
１．"を入力する際は必ず半角で入力する
２．メモ帳など簡易なエディタを使用しているのであれば、HTMLのコードミスがわかるエディタを使う
「HTML エディタ おすすめ」あたりで検索してみてください。
以下はVisual Studio Codeというエディタですが、
正しく"が使われていれば、変更後に示したように正しく色分けがされます。
変更前は"が正しく閉じられていないため、「店内写真」以降がオレンジ色の文字になっています。
これにより何かがおかしいと気づくことができます。
変更前
変更後
3.類似文字が判別しやすいフォントを使う
以下の図に記載のある英数字4文字はunicodeという文字を表すコードで、()内が実際の文字を表しています。
参考：Unicode C0制御文字と基本ラテン文字 - CyberLibrarian
0022が本来半角で"を入力したもの、201Dが今回入力されていたもの、その他"と似たようなものを集めました。フォントによっては 0022 201Dの判別がつきにくいです。
以下もフォントサンプル
店内写真の直後の"は今回入力されていた 201Dの”です 直後の"が0022です。
文字幅や見た目がフォントによってだいぶ違うのがわかるかと思います。
どれがおすすめとは言えませんが、私は白源というプログラム用フォントを使っています。
投稿2021/06/19 14:37
編集2021/06/19 20:06総合スコア509
あなたの回答
tips
プレビュー
