asked 7年 ago
こんにちは。長島と申します。
chapter05の03「画像の挿入」でつまずいています。
ブラウザで確認すると、ロゴとキービジュアルの画像が表示されません。
alt属性も表示されず、画像の場所には四角の中に？が入った記号が表示されています。
・Safariで表示されないのでFirefoxで確認しましたが、何も（画像以外も）表示されません。ツール/ブラウズでChromeが出てこないため、Chromeでは確認できていません。
・「https://validator.w3.org」でチェックしてみましたが、「No errors or warnings to show」という結果でした。
・imagesフォルダは、index.htmlの入っているcafeフォルダ内に入っています。
3回最初から書き直してみましたが、原因が分かりません。
確認すべき点を教えて頂けるとありがたいです。
よろしくお願いいたします。
狩野 祐東 Staff answered 7年 ago
長島さんこんにちは。
・Safariで表示されないのでFirefoxで確認しましたが、何も（画像以外も）表示されません。
バリデーターでエラーが出ないのに、何も表示されないブラウザがあるというのが気になりますね。
作成中のHTMLファイルの文字コードは「UTF-8」になっていますか？ miなら［ドキュメント/テキストエンコーディング］で調べられます。
文字コードが正しい場合は、問題の箇所を割り出すために、「間違いなく正しく書けているところ」まで戻ってみるのがよいと思います。
いったん、いま作業中のHTMLから、chapter05-03で書く部分──2箇所の<img>タグ──を消して、chapter05-02の状態に戻します。その状態で、SafariとFirefoxで表示を確認してみてください。本に載っているスクリーンショットと同じように表示されますか？ リンクをクリックしたらページが開きますか？
もし、chapter05-02までなら正しく表示され、動いているのであれば、<img>タグの書き方のどこかが違うはずです。
もし、chapter05-02の状態も正しく表示されないようであれば、同じ作業（chapter05-02で書く部分を消す）を繰り返し、ひとつずつ節をさかのぼって、正しく表示されるところまで戻ってみてください。そうやって、間違っている場所を探します。
それでもうまくいかない場合はまたご質問ください。
answered 7年 ago
狩野さん
ご回答ありがとうございます。
文字コードはUTF-8になっていました。
あとは教えて頂いたように、正しく書けているところまでさかのぼって確認していきます。
ありがとうございます。
answered 7年 ago
解決しました！
と言っていいのでしょうか・・!?
問題のないところ（画像挿入前）までさかのぼってみたり、素材をダウンロードするところからやり直してみても画像が表示されなかったのですが……
ブラウザメニューのファイル＞ファイルを開く
でcafeフォルダのHTMLファイルを開いてみたところ、画像も表示されるようになりました。（Safari、Firefox共に）
この方法で表示されるのなら問題が無いのかは判断できないのですが、とりあえず先に進めそうです。
狩野さん丁寧なご回答ありがとうございました。
answered 6年 ago
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>KUJIRA cafeへようこそ</title>
</head>
<body>
<h1><a href=”index.html”><img src=”images/logo.png width=”217 height=”89″ alt=”KUJIRA cafe”></a></h1>
<ul>
<li><a href=”index.html”>ホーム</a></li>
<li><a href=”about.html”>店舗案内</a></li>
<li><a href=”access.html”>アクセス</a></li>
<li><a href=”menu.html”>メニュー</a></li>
<li><a href=”contact.html”>お問い合わせ</a></li>
</ul>
<h2>News</h2>
5月30日、『<a href=”http://www.sbcr.jp” target=”_blank”>ここでしか飲めない！おいしいうれしい満喫カフェ</a>』に掲載されました。
4月18日、KUJIRA cafeがオープンしました。ここ九寺楽の町で、皆さんが気軽に立ち寄れる、ゆったりと時間を過ごせる落ち着いた場所にしたいと思っています。
</body>
</html>
狩野 祐東 Staff answered 6年 ago
鴨原さん
ソースコードを見る限り、<img src="images/logo.png" width=... >の、マークを付けた部分に閉じダブルクォートがないようです。もう一度お書きになったソースコードを確認していただけますか。
answered 6年 ago
こんにちわ。
同じところで画像が反映されず困っています。
<!doctype html>
<html>
<head>
<meta charset=”UTF-8″>
<title>KUJIRA cafe へようこそ</title>
</head>
<body>
<h1><a href=”index.html”><img src=”images/logo.png” width=”217″ height=”89″ alt”KUJIRA cafe”></a></h1>
<ul>
<li><a href=”index.html”>ホーム</a></li>
<li><a href=”about.html”>店舗案内</a></li>
<li><a href=”access.html”>アクセス</a></li>
<li><a href=”menu.html”>メニュー</a></li>
<li><a href=”contact.html”>お問い合わせ</a></li>
</ul>
<img src=”images/keyvisual.jpg” width=”900″ height=”362″ alt=””>
<h2>News</h2>
<p>5月30日、<a href=”http://www.sbcr.jp”target=”_blank”>ここでしかあじわえない！おいしい嬉しい満喫カフェ</a>に掲載されました。</p>
<p>4月18日。KUJIRA cafeがオープンしました。ここ九寺楽の町で、皆さんが気楽に立ち寄れる、ゆったりと時間を過ごせる落ち着いた場所にしたいと思っています。</p>
</body>
</html>
どこか間違っていますでしょうか。
教えていただけますか。宜しくお願いします。
answered 6年 ago
狩野先生、ありがとうございます。
alt属性の後の=抜けていたのでいれましたが改善されません。
<!doctype html>
<html>
<head>
<meta charset=”UTF-8″>
<title>KUJIRA cafe へようこそ</title>
</head>
<body>
<div>
<h1><a href=”index.html”><img src=”images/logo.png” width=”217″ height=”89″ alt=”KUJIRA cafe”></a></h1>
<ul>
<li><a href=”index.html”>ホーム</a></li>
<li><a href=”about.html”>店舗案内</a></li>
<li><a href=”access.html”>アクセス</a></li>
<li><a href=”menu.html”>メニュー</a></li>
<li><a href=”contact.html”>お問い合わせ</a></li>
</ul>
<div>
<img src=”images/keyvisual.jpg” width=”900″ height=”362″ alt=””>
</div>
<h2>News</h2>
<p>5月30日、<a href=”http://www.sbcr.jp”target=”_blank”>ここでしかあじわえない！おいしい嬉しい満喫カフェ</a>に掲載されました。</p>
<p>4月18日。KUJIRA cafeがオープンしました。ここ九寺楽の町で、皆さんが気楽に立ち寄れる、ゆったりと時間を過ごせる落ち着いた場所にしたいと思っています。</p>
<div>
<p>©Copyright KUJIRA cafe. ALL rigths reserved.</p>
</div>
</div>
</body>
</html>
何か記入漏れありますか？
宜しくお願いします。
狩野 祐東 Staff answered 6年 ago
ところで、画像は所定の場所にコピーしましたか？ 本書03-01の作業をもう一度見直して、いま編集しているindex.htmlと同じところに「images」フォルダがあること、そのimagesフォルダの中に画像をコピーしていること、を確認してみてください。
answered 6年 ago
狩野せんせい、何度もすみません。
あのあとFinder内の書類の中も全消去して、サンプルダウンロードからやり直したのですが、やはり同じところでつまずいています。
html記入し直したので、新たに間違えているのかもしれません。
<!doctype html>
<html>
<head>
<meta charset=”UTF-8″>
<title>KUJIRA cafeへようこそ</title>
</head>
<body>
<h1><a href=”index.html”><img src=”images/logo.png”width=”217″ height=”89″ alt=”KUJIRA cafe”></a></h1>
<ul>
<li><a href=”index.html”>ホーム</a></li>
<li><a href=”about.htmi”>店舗案内</a></li>
<li><a href=”access.html”>アクセス</a></li>
<li><a href=”menu.html”>メニュー</a></li>
<li><a href=”contact.html”>お問い合わせ</a></li>
</ul>
<img src=”images/keyvisual.jpg” width=”900″ height”362″ alt=””>
<h2>News</h2>
<p>5月30日、『ここでしか飲めない！おいしいうれしい満喫カフェ』に掲載されました。</p>
<p>4月18日、KUJIRA cafeがオープンしました。ここ九寺楽の町で、皆さんが気軽に立ち寄れる、ゆったりと時間を過ごせる落ち着いた場所にしたいと思っています。</p>
</body>
</html>
miで表示されている時、<h1>のところの、img src= width= height= alt=が青ではなく、全て緑色で表示されます。
というよりも、<h1>から</h1>まで全て緑色です。
そのことも関係しているのでしょうか。
また、他のところでも、本では緑色のはずが、グレーで表示されている文字がありますが、これは何を意味しているのでしょうか。
answered 6年 ago
それとなんですが、<u1>のところを<ul>と記載していて直したのですが、safari上でリンクを開こうとすると、safariが強制終了してしまいます。
何度見直したり打ち直してもうまくいきません。
やはり打ち間違いでしょうか。
画像はしっかりとimagesにコピーされており、Finder上ではひらけます。
狩野 祐東 Staff answered 6年 ago
ソースを見る限り、何カ所か間違えています。表示されないなと思ったら、まず、HTMLが正しく書かれているかどうかをチェックすることをおすすめします。次のURLの記事を参考にしてみてください。
なお、2/14にむさこさんが書かれたHTMLをもとに、「”」など、このサイトのセキュリティ保護上、自動的に書き換えられている部分だけを直してテストしてみたところ、画像は問題なく表示されました。というわけで、むさこさんの症状がこちらでは再現できません。
もしかして、「”」やスペースが全角になっていたりする可能性もありますので、それも上の記事を参考に確認してみてください。
HTMLを直しても画像が表示されない場合、ブラウザのキャッシュなどが影響している可能性も考えられます。キャッシュをクリアするか（方法は調べてみてください）、ブラウザやOSを再起動するか、いちどほかのブラウザを使って確認してみるとよいと思います。
answered 6年 ago
ありがとうございます。
実はあの後、サンプル site index.htmlで、出来上がっているサイトを表示してソースコードをmiにコピーして、ブラウザで確認してみると、やはり画像が表示されませんでした。
ブラウザのキャッシュもクリアして確認しましたが、改善されません。
それと違うブラウザで表示するためにfirefoxをインストールしましたが、うまく表示もできません。
OSも最新です。
狩野 祐東 Staff answered 6年 ago
もしかして… ファイルのアクセス権の問題かもしれません。
Finderで、imagesフォルダにある画像の中から、logo.pngかkeyvisual.jpgをクリックして、画面上の［ファイル］メニュー─［情報を見る］を選んでください。
ファイルの情報が表示されますが、一番下に「共有とアクセス権」という項目があります。その項目が、下の画像のとおり上から順に「読み/書き」「読み出しのみ」「読み出しのみ」になっていますか？ なっていなければ、右下のカギをクリックしてから、アクセス権を変更してみてください。
answered 6年 ago
初めから読み書き、読み出しのみ、読み出しのみになっていました。
もう一度消去、アンインストールをしてやり直してみます。
困りました、、、。
狩野 祐東 Staff answered 6年 ago
困りましたね… 2/14のむさこさんのソースにはところどころ誤りがありますが、正しくフォルダを作成し、画像ファイルをコピーすれば、きちんと表示されることはこちらで確認しています。画像ファイルのアクセス権も正しいのであれば、おそらく、imagesフォルダの場所（index.htmlとの位置関係）が間違っているか、ダブルクォート（”）が半角でない、などが原因だと思うのですが…
とりあえず、HTMLをお書きになる前に、もう一度サンプルデータをダウンロード→解凍して、中にあるSiteフォルダ内のindex.htmlがブラウザで正しく開けるかどうかもう一度チェックしてみてください。