回答編集履歴

5

誤字微修正

2021/06/19 20:06

投稿

Crimson_Tide
Crimson_Tide

スコア509

test CHANGED
@@ -28,9 +28,11 @@
28
28
 
29
29
  <img src="image/main.jpg" alt="店内写真”>
30
30
 
31
- alt="店内写真” の後ろの引用符(クォーテーションマーク)~~ダブルコーテーション~~が半角引用符ではなく、別の文字に~~全角に~~なっていました。
31
+ alt="店内写真” の後ろの引用符(クォーテーションマーク)~~ダブルコーテーション~~が半角引用符ではなく、別の記号に~~全角に~~なっていました。
32
32
 
33
- 他の箇所の半角の引用符は正しいものなので、「店内写真」入力後に全角のまま"を入力し、"に類似のに変換したのではないかと推察します。
33
+ 他の箇所の半角の引用符は正しいものなので、「店内写真」入力後に全角のまま"を入力し、"に類似した別記号に変換したのではないかと推察します。
34
+
35
+
34
36
 
35
37
  **対策**
36
38
 

4

追記1の微修正と追記2(再発防止策)を追記

2021/06/19 20:06

投稿

Crimson_Tide
Crimson_Tide

スコア509

test CHANGED
@@ -24,8 +24,78 @@
24
24
 
25
25
  ---
26
26
 
27
+ **原因**
28
+
27
29
  <img src="image/main.jpg" alt="店内写真”>
28
30
 
29
- alt="店内写真” の後ろのダブルコーテーションが全角になっていました。
31
+ alt="店内写真” の後ろの引用符(クォーテーションマーク)~~ダブルコーテーション~~半角引用符ではなく、別の文字に~~全角に~~なっていました。
30
32
 
33
+ 他の箇所の半角の引用符は正しいものなので、「店内写真」入力後に全角のまま"を入力し、"に類似ものに変換したのではないかと推察します。
34
+
35
+ **対策**
36
+
37
+ 「店内写真」の直後の「”」を半角の引用符(クォーテーションマーク)~~ダブルコーテーション~~にすれば画像が表示されると思います。
38
+
39
+
40
+
41
+ 追記2
42
+
43
+ ---
44
+
45
+ 今後の再発防止策として、以下を実施してはどうでしょうか
46
+
47
+ **1."を入力する際は必ず半角で入力する**
48
+
49
+ **2.メモ帳など簡易なエディタを使用しているのであれば、HTMLのコードミスがわかるエディタを使う**
50
+
51
+ 「HTML エディタ おすすめ」あたりで検索してみてください。
52
+
53
+ 以下はVisual Studio Codeというエディタですが、
54
+
55
+ 正しく"が使われていれば、変更後に示したように正しく色分けがされます。
56
+
57
+ 変更前は"が正しく閉じられていないため、「店内写真」以降がオレンジ色の文字になっています。
58
+
59
+ これにより何かがおかしいと気づくことができます。
60
+
61
+
62
+
63
+ 変更前
64
+
65
+ ![変更前](34a7b954e4f0965a62d5f4de17bb067a.png)
66
+
67
+
68
+
69
+ 変更後
70
+
71
+ ![変更後](92d6e938433e24e68145640b820e98f3.png)
72
+
73
+
74
+
75
+ **3.類似文字が判別しやすいフォントを使う**
76
+
77
+ 以下の図に記載のある英数字4文字はunicodeという文字を表すコードで、()内が実際の文字を表しています。
78
+
79
+ 参考:[Unicode C0制御文字と基本ラテン文字 - CyberLibrarian](http://www.asahi-net.or.jp/~ax2s-kmtn/ref/unicode/u0000.html#u0022)
80
+
81
+ 0022が本来半角で"を入力したもの、201Dが今回入力されていたもの、その他"と似たようなものを集めました。フォントによっては 0022 201Dの判別がつきにくいです。
82
+
83
+
84
+
85
+ ![メイリオ(Windows10フォント) ,Century](15d508f3d0aef9ab739c32c14f9081e3.png)
86
+
87
+ ![MS ゴシック(メモ帳デフォルト)、白源](5400aae568669ed7640f30b7b0e8c37d.png)
88
+
89
+
90
+
91
+ 以下もフォントサンプル
92
+
93
+ 店内写真の直後の"は今回入力されていた 201Dの”です 直後の"が0022です。
94
+
31
- 半角のダブルコーテーションにすればると思います。
95
+ 文字幅や見た目がフォよってだぶ違うのがわかと思います。
96
+
97
+ ![フォントサンプル](8fe5e94aa420469148dc55302cc12ea6.png)
98
+
99
+
100
+
101
+ どれがおすすめとは言えませんが、私は白源というプログラム用フォントを使っています。

3

回答追記

2021/06/19 20:03

投稿

Crimson_Tide
Crimson_Tide

スコア509

test CHANGED
@@ -17,3 +17,15 @@
17
17
  > ┗image
18
18
 
19
19
  > ┗main.jpg
20
+
21
+
22
+
23
+ 追記
24
+
25
+ ---
26
+
27
+ <img src="image/main.jpg" alt="店内写真”>
28
+
29
+ alt="店内写真” の後ろのダブルコーテーションが全角になっていました。
30
+
31
+ 半角のダブルコーテーションにすればいけると思います。

2

冒頭2行の文面を修正

2021/06/19 16:28

投稿

Crimson_Tide
Crimson_Tide

スコア509

test CHANGED
@@ -1,4 +1,6 @@
1
- ソースが質問から消えてしまいましたが、ファルダ構成が原因のようですね
1
+ ソースが質問から消えてしまいましたが、それはさておき
2
+
3
+ glyzinieh様とのやりとりを拝見したところ、ファルダ構成が原因と思われます。
2
4
 
3
5
  <img src="image/main.jpg">という記述は htmlのフォルダを基準に、直下のimageフォルダにあるmain.jpgを表します。
4
6
 

1

誤字修正

2021/06/19 14:53

投稿

Crimson_Tide
Crimson_Tide

スコア509

test CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
 
6
6
 
7
- 同じフォルダに移動して試してみて、と追記依頼をして混乱させてしまっているかもしれませんが、index.htmlをダウンロード直下に移して上記の構成にすれば解決するかと思います
7
+ 同じフォルダに移動して試してみて、と追記依頼をして混乱させてしまっているかもしれませんが、index.htmlをダウンロード直下に移して下記(※上記となっていたで修正)の構成にすれば解決するかと思います
8
8
 
9
9
 
10
10