Q&A
質問のhtmlは何ページのものでしょうか？
前提・実現したいこと
1冊ですべて身につくhtml&cssとwebデザイン入門講座という著書のchapter4-4で以下
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>WCB Cafe</title> <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ"> <!--css--></head> <body> <header class="page-header"> <h1><a href="index.html"><img class="logo" src"images/logo.svg" alt="WCBカフェホーム"></a></h1> <nav> <ul class="main-nav"> <li><a href="news.html">News</a></li> <li><a href="menu.html">Menu</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> </body> </html><link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> <link href="https://fonts.googleapis.com/css?family=Pilosopher" rel="stylesheet"> <link href="css/style.css" rel="stylesheet">
のように書いて、ロゴ画像の付いたページを作成しようと
しました。index.htmlは以下のようにwcbカフェフォルダ内に入れ、imagesフォルダ内にはlogo.svgが入っています。この状態で表示を
試みたのですが、ページタイトルの「WCBCafe」だけ左上に表示され、ロゴ画像やメニューリストなどが何も表示されませんでした。ちなみにですが、フォルダ内のindex.htmlではなく、デスクトップに表示させたindex.htmlをクリックすると、以下のように、ロゴ画像以外は全て表示されました。
index.htmlをフォルダ内に入れたときに、クリックしても表示されなくなる理由が知りたいです。
御助力の程、何卒、宜しくお願い致します。
発生している問題・エラーメッセージ
該当のソースコード
HTML
試したこと
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
ATOMで書きました。
css/styles.cssの設定はどうなっていますか? 特にpage-header、main-navクラスについて。
to meg_
180ページです。
to KojiDoi
style.cssには何も書いていません。
「ページタイトルだけ表示され」とは、具体的に「どこに」「何が（どう）」表示されたということですか？
to itagaki
書き方が具体的でなく、大変失礼しました。
「WCBCafe」というページのタイトルが、ページの左上のページタイトルに表示されています。
質問は編集できます。
基本は質問本文に記載してください。
あと、画像フォルダ内部も提示してください。
あと、コードは画像ではこちらの手元で確認できません。
テキストで、マークダウンのcodeを利用して提示してください。
> 「WCBCafe」というページのタイトルが、ページの左上のページタイトルに表示されています。
ん－、見たところMicrosoft Edgeで確認しているのですよね。
<title>WCB Cafe</title> に書いたタイトルが「ページの左上」に表示されているのですか？？
Edgeならタイトルが表示されるのはタブですよね？
ページの左上ではなくタブに「WCBCafe」と表示されているということですか？
でもHTMLコードではタイトルはスペースが入った「WCB Cafe」なのでちょっと違いますね。
確認してください。
あと、ページを右クリック→「開発者ツールで調査する」でDevToolsを開き、その「ソース」タブで、左のツリー表示にindex.htmlがあるはずですので、そこにマウスを当ててみてください。ツールチップにファイルのパスが表示されます。それが合っているかどうかも確認してみてください。もしかして別のファイルを開いているのでは。ページのソースもそこで確認できます。
回答1件
0
ベストアンサー
質問に掲載されているhtmlと書籍（一冊ですべて身につくHTML&CSSとWEBデザイン入門講座）のp.180に掲載されているhtmlが異なっていますので、書籍に掲載されているhtml（正確にはサポートページからダウンロードしたhtml）とimagesフォルダとそのフォルダ内に配置したlogo.svgで検証したところ、書籍の表示結果通りの結果を得ることが出来ました。
一応質問に掲載されているhtmlも目コピで試してみましたが問題なく表示されました。下記がその結果です。
【追記】
質問のhtmlの不備は下記です。
html
1<h1><a href="index.html"><img class="logo" src"images/logo.svg" alt="WCBカフェホーム"></a></h1>
src"images/logo.svg"をsrc="images/logo.svg"にしましょう。
投稿2021/09/26 11:53
編集2021/09/26 13:10総合スコア10762
あなたの回答
tips
プレビュー
