BOOKS
by Sukeharu Kano / 狩野祐東 著書

画像が反映されません

15件の投稿を表示中 - 1 - 15件目 (全18件中)
  • 投稿者
    投稿
  • #2837 Reply

    長島

    こんにちは。長島と申します。
    chapter05の03「画像の挿入」でつまずいています。
    ブラウザで確認すると、ロゴとキービジュアルの画像が表示されません。
    alt属性も表示されず、画像の場所には四角の中に?が入った記号が表示されています。

    ・Safariで表示されないのでFirefoxで確認しましたが、何も(画像以外も)表示されません。ツール/ブラウズでChromeが出てこないため、Chromeでは確認できていません。

    ・「https://validator.w3.org」でチェックしてみましたが、「No errors or warnings to show」という結果でした。

    ・imagesフォルダは、index.htmlの入っているcafeフォルダ内に入っています。

    3回最初から書き直してみましたが、原因が分かりません。
    確認すべき点を教えて頂けるとありがたいです。
    よろしくお願いいたします。

    #2839 Reply

    狩野 祐東
    キーマスター

    長島さんこんにちは。

    ・Safariで表示されないのでFirefoxで確認しましたが、何も(画像以外も)表示されません。

    バリデーターでエラーが出ないのに、何も表示されないブラウザがあるというのが気になりますね。
    作成中のHTMLファイルの文字コードは「UTF-8」になっていますか? miなら[ドキュメント/テキストエンコーディング]で調べられます。

    文字コードが正しい場合は、問題の箇所を割り出すために、「間違いなく正しく書けているところ」まで戻ってみるのがよいと思います。

    いったん、いま作業中のHTMLから、chapter05-03で書く部分──2箇所の<img>タグ──を消して、chapter05-02の状態に戻します。その状態で、SafariとFirefoxで表示を確認してみてください。本に載っているスクリーンショットと同じように表示されますか? リンクをクリックしたらページが開きますか?

    もし、chapter05-02までなら正しく表示され、動いているのであれば、<img>タグの書き方のどこかが違うはずです。
    もし、chapter05-02の状態も正しく表示されないようであれば、同じ作業(chapter05-02で書く部分を消す)を繰り返し、ひとつずつ節をさかのぼって、正しく表示されるところまで戻ってみてください。そうやって、間違っている場所を探します。

    それでもうまくいかない場合はまたご質問ください。

    #2854 Reply

    長島

    狩野さん

    ご回答ありがとうございます。
    文字コードはUTF-8になっていました。
    あとは教えて頂いたように、正しく書けているところまでさかのぼって確認していきます。
    ありがとうございます。

    #2860 Reply

    長島

    解決しました!
    と言っていいのでしょうか・・!?

    問題のないところ(画像挿入前)までさかのぼってみたり、素材をダウンロードするところからやり直してみても画像が表示されなかったのですが……
    ブラウザメニューのファイル>ファイルを開く
    でcafeフォルダのHTMLファイルを開いてみたところ、画像も表示されるようになりました。(Safari、Firefox共に)

    この方法で表示されるのなら問題が無いのかは判断できないのですが、とりあえず先に進めそうです。
    狩野さん丁寧なご回答ありがとうございました。

    #3294 Reply

    きむきむ

    あのあと解決できたのでしょうか。全く同じ症状で悩んでいます。もし解決されたのであれば方法を教えてください。

    #3317 Reply

    鴫原 静鳥

    <!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&#8221; target=”_blank”>ここでしか飲めない!おいしいうれしい満喫カフェ</a>』に掲載されました。

    4月18日、KUJIRA cafeがオープンしました。ここ九寺楽の町で、皆さんが気軽に立ち寄れる、ゆったりと時間を過ごせる落ち着いた場所にしたいと思っています。

    </body>
    </html>

    #3319 Reply

    狩野 祐東
    キーマスター

    鴨原さん

    ソースコードを見る限り、<img src="images/logo.png" width=... >の、マークを付けた部分に閉じダブルクォートがないようです。もう一度お書きになったソースコードを確認していただけますか。

    #3363 Reply

    むさこ

    こんにちわ。
    同じところで画像が反映されず困っています。

    <!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&gt;
    <p>4月18日。KUJIRA cafeがオープンしました。ここ九寺楽の町で、皆さんが気楽に立ち寄れる、ゆったりと時間を過ごせる落ち着いた場所にしたいと思っています。</p>

    </body>
    </html>

    どこか間違っていますでしょうか。
    教えていただけますか。宜しくお願いします。

    #3365 Reply

    狩野 祐東
    キーマスター

    imgタグのalt属性の後ろに「=」を書き忘れていませんか?

    #3366 Reply

    むさこ

    狩野先生、ありがとうございます。
    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&gt;
    <p>4月18日。KUJIRA cafeがオープンしました。ここ九寺楽の町で、皆さんが気楽に立ち寄れる、ゆったりと時間を過ごせる落ち着いた場所にしたいと思っています。</p>
    <div>
    <p>©Copyright KUJIRA cafe. ALL rigths reserved.</p>
    </div>
    </div>
    </body>
    </html>

    何か記入漏れありますか?
    宜しくお願いします。

    #3367 Reply

    狩野 祐東
    キーマスター

    ところで、画像は所定の場所にコピーしましたか? 本書03-01の作業をもう一度見直して、いま編集しているindex.htmlと同じところに「images」フォルダがあること、そのimagesフォルダの中に画像をコピーしていること、を確認してみてください。

    #3368 Reply

    むさこ

    狩野せんせい、何度もすみません。
    あのあと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>まで全て緑色です。
    そのことも関係しているのでしょうか。
    また、他のところでも、本では緑色のはずが、グレーで表示されている文字がありますが、これは何を意味しているのでしょうか。

    #3369 Reply

    むさこ

    それとなんですが、<u1>のところを<ul>と記載していて直したのですが、safari上でリンクを開こうとすると、safariが強制終了してしまいます。
    何度見直したり打ち直してもうまくいきません。
    やはり打ち間違いでしょうか。

    画像はしっかりとimagesにコピーされており、Finder上ではひらけます。

    #3370 Reply

    狩野 祐東
    キーマスター

    ソースを見る限り、何カ所か間違えています。表示されないなと思ったら、まず、HTMLが正しく書かれているかどうかをチェックすることをおすすめします。次のURLの記事を参考にしてみてください。

    https://book.studio947.net/article/2512/

    なお、2/14にむさこさんが書かれたHTMLをもとに、「”」など、このサイトのセキュリティ保護上、自動的に書き換えられている部分だけを直してテストしてみたところ、画像は問題なく表示されました。というわけで、むさこさんの症状がこちらでは再現できません。

    もしかして、「”」やスペースが全角になっていたりする可能性もありますので、それも上の記事を参考に確認してみてください。

    HTMLを直しても画像が表示されない場合、ブラウザのキャッシュなどが影響している可能性も考えられます。キャッシュをクリアするか(方法は調べてみてください)、ブラウザやOSを再起動するか、いちどほかのブラウザを使って確認してみるとよいと思います。

    #3371 Reply

    むさこ

    ありがとうございます。
    実はあの後、サンプル site index.htmlで、出来上がっているサイトを表示してソースコードをmiにコピーして、ブラウザで確認してみると、やはり画像が表示されませんでした。
    ブラウザのキャッシュもクリアして確認しましたが、改善されません。
    それと違うブラウザで表示するためにfirefoxをインストールしましたが、うまく表示もできません。
    OSも最新です。

15件の投稿を表示中 - 1 - 15件目 (全18件中)
返信先: 画像が反映されません
あなたの情報: