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

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

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

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

909閲覧

画像が表示されません

mjduo

総合スコア1

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2021/06/19 13:57

編集2021/06/20 00:33

書籍の通りに入力しましたが、画像が何度調べてファイルやフォルダを操作したりしても表示されません。

写真がつけられず、申し訳ないですが、同フォルダ内の別ファイルになり、ダウンロードに格納してあります。

何を試しても何も表示されず、、困ってます。
よろしくお願い致します

上記の"店内写真”の表記を正しく直したら、店内写真の文字のみ表示されるようになりました。
画像を表示されるにはどうしたらいいのかわからないです。よろしくお願い致します

以下が格納状態↓
ファイル名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>

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

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

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

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

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

glyzinieh

2021/06/19 14:07

ファイル構成を教えてください
mjduo

2021/06/19 14:10

写真がつけられず、申し訳ないですが、同フォルダ内の別ファイルになり、ダウンロードに格納してあります。 ファイル名index.htmlからmain.jpgで、フォルダはimageです。
Crimson_Tide

2021/06/19 14:18 編集

フォルダ構成とファイル構成を質問に追記お願いします。 また、htmlのコードは表示されると困る文字列があれば置き換えて、できるだけ全部掲載してください。 画像が表示されない場合 「店内写真」 と表示されるはずですが、表示されていますか? <追加> ファイルやフォルダ操作とは具体的に何をしたかもお願いします。 まだ試していなければ、main.jpgをhtmlと同じフォルダに置いて、 <p><img src="main.jpg" alt="店内写真”></p>として表示されるか確認してみてください。
glyzinieh

2021/06/19 14:18

ダウンロード ┗〇〇  ┣index.html  ┗image   ┗main.jpg で合っていますか?
mjduo

2021/06/19 14:23

ダウンロード ┗image  ┣index.html  ┗main.jpg になります! よろしくお願い致します。
glyzinieh

2021/06/19 14:32

Crimson_Tide様の通り、main.jpgをindex.htmlと同じフォルダに置いて、<p><img src="main.jpg" alt="店内写真”></p>として表示されるか確認してみてください。
mjduo

2021/06/19 15:03

同じフォルダに写した上で、"main.jpg"に変えて更新しましたが、店内写真とも何も現れませんでした。
Crimson_Tide

2021/06/19 15:22

やはりindex.htmlの内容をすべて掲載していただけないでしょうか
mjduo

2021/06/19 15:42

かしこまりました! 以下全文です。よろしくお願い致します <!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>
mjduo

2021/06/19 15:45

ダウンロード ┣index.html ┗image ┗main.jpg でも試しましたが、表示されません。 よろしくお願い致します
glyzinieh

2021/06/19 15:54

ここにソースを全て載せられても確認し難いので、質問本文に追記してください。
guest

回答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

今後の再発防止策として、以下を実施してはどうでしょうか
1."を入力する際は必ず半角で入力する
2.メモ帳など簡易なエディタを使用しているのであれば、HTMLのコードミスがわかるエディタを使う
「HTML エディタ おすすめ」あたりで検索してみてください。
以下はVisual Studio Codeというエディタですが、
正しく"が使われていれば、変更後に示したように正しく色分けがされます。
変更前は"が正しく閉じられていないため、「店内写真」以降がオレンジ色の文字になっています。
これにより何かがおかしいと気づくことができます。

変更前
変更前

変更後
変更後

3.類似文字が判別しやすいフォントを使う
以下の図に記載のある英数字4文字はunicodeという文字を表すコードで、()内が実際の文字を表しています。
参考:Unicode C0制御文字と基本ラテン文字 - CyberLibrarian
0022が本来半角で"を入力したもの、201Dが今回入力されていたもの、その他"と似たようなものを集めました。フォントによっては 0022 201Dの判別がつきにくいです。

メイリオ(Windows10フォント) ,Century
MS ゴシック(メモ帳デフォルト)、白源

以下もフォントサンプル
店内写真の直後の"は今回入力されていた 201Dの”です 直後の"が0022です。
文字幅や見た目がフォントによってだいぶ違うのがわかるかと思います。
フォントサンプル

どれがおすすめとは言えませんが、私は白源というプログラム用フォントを使っています。

投稿2021/06/19 14:37

編集2021/06/19 20:06
Crimson_Tide

総合スコア509

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問