CSSで画像が表示されない：ファイルパスの問題？

実現したいこと

cssで指定した画像がページ上に正しく表示されるようにしたい。

発生している問題・分からないこと

cssで画像を相対パスで指定しているのにブラウザ上で表示されない

該当のソースコード

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>WCB cafe - NEWS</title> 
  <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <link rel="icon" href="picture/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
  
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  
  <link rel="stylesheet" href="css/wcb-cafe.css">
</head>

<body>
  <div class="sub-cover cover-news">
    <header class="page-header wrapper">
      <h1 class="align-center">
        <a href="index.html">
          <img class="logo" src="picture/logo.svg" alt="WCBカフェホーム">
        </a>
      </h1>
      <nav>
        <ul class="main-nav font-english">
          <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>

    <h2 class="page-title font-english">News</h2>
  </div>
  
  <footer class="page-footer">
    <h3 class="heading-large font-english">Information</h3>
    <table class="info">
      <tr><th>住所</th><td>東京都港区六本木0-0</td></tr>
      <tr><th>電話番号</th><td>03-0000-0000</td></tr>
      <tr><th>営業時間</th><td>11:00-20:00</td></tr>
      <tr><th>定休日</th><td>月曜日</td></tr>
    </table>
    <div class="copyright">
      <small>&copy; 2010 WCB cafe</small>
    </div>
  </footer>
</body>
</html>

    --------------------------- CSS ------------------------------------
```@charset "UTF-8";

/* 基本設定 */
html {
  font-size: 100%;
}

body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", sans-serif;
  line-height: 1.7;
  color: #432;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

/* 汎用クラス */
.align-center {
  text-align: center;
}

.font-english {
  font-family: 'Philosopher', sans-serif;
  font-weight: normal;
}

.page-title {
  font-size: 3rem;
  text-align: center;
  margin-top: 2rem;
  line-height: 1.4;
}

.page-header {
  padding-top: 0.5rem;
}

.logo {
  width: 210px;
}

.main-nav {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  font-size: 1.5rem;
  list-style: none;
}

.main-nav a {
  color: #432;
}

.main-nav a:hover,
.main-nav a:focus {
  color: #0bd;
}

.cover,
.sub-cover {
  background-size: cover;
  background-position: center bottom;
  height: 800px;
}

/* レイアウト */
.wrapper {
  max-width: 1120px;
  margin: auto;
  padding: 0 1.5rem;
}

/* セクション */
.about {
  max-width: 736px;
  padding: 0 1.5rem;
  margin: 3rem auto 4rem;
}

.about p {
  margin-bottom: 3rem;
}

.page-title,
.heading-large {
  font-size: 3rem;
  text-align: center;
  margin-bottom: 1rem;
}

/* ボタン */
.btn {
  display: inline-block;
  padding: 1rem 2rem;
  font-size: 1.5rem;
  color: #fff;
  background-color: #0bd;
  border-radius: 8px;
  transition: 0.5s;
}

.btn:hover {
  translate: 10px;
}

/* フッター */
.page-footer {
  background-image: url(../picture/footer-s.webp);
  background-size: cover;
  background-position: center;
  padding-top: 12rem;
}

.info {
  width: 100%;
  max-width: 544px;
  margin: auto;
  padding: 0 1.5rem;
  border-spacing: 0;
}

.info th,
.info td {
  border-bottom: 1px solid #c9c2bc;
}

.info th {
  padding: 1rem 0;
  text-align: left;
  font-weight: normal;
}

.info td {
  padding: 1rem 0;
}

.copyright {
  text-align: center;
  padding: 2rem 0;
  background-color: #432;
  color: #fff;
  margin-top: 6rem;
}

/* デスクトップ版 */
@media (min-width: 800px) {
  .page-title {
    font-size: 5rem;
  }

  .heading-large {
    font-size: 4rem;
  }

  .page-header {
    display: flex;
    justify-content: space-between;
    padding-top: 1.5rem;
  }

  .main-nav {
    font-size: 2rem;
  }

  .cover-home {
    background-image: url(../picture/cover-home-l.webp);
  }

  .about {
    margin: 4rem auto 0;
  }

  .page-footer {
    background-image: url(../picture/footer-l.webp);
    padding-top: 12rem;
  }

  .info th {
    padding-left: 2.5rem;
  }
}

/* Newsページ専用 */
.cover-news {
  background-image: url(../news-pictures/cover-news-s.webp);
}

特になし

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

絶対パスにしてみたけどそれでも表示されなかった

補足

特になし

Yorrie

2025/04/19 07:01

情報が少なすぎて何が原因かわからないので、Webページ全体のHTML・CSSのコードをご提示ください。

melian

2025/04/19 07:57 編集

適当にファイルを作成して、news.html で以下の様に指定してみたところ、画像(cover-news-s.webp)が表示されます。 <link rel="stylesheet" href="css/news.css"> <canvas class="cover-news"></canvas> 例えば、linkの指定がないとか、CSSファイルのパスを間違えていたりしないでしょうか？ブラウザのDevToolsでエラーの有無を確認してみて下さい。

ryuki0345

2025/04/19 08:31

全体のコード追加しました。

hiroki-o

2025/04/19 08:35

ページの、どの部分にcover-news-s.webpを表示させたいのですか？

melian

2025/04/19 08:52

ryuki0345

2025/04/19 10:00

コメントありがとうございます。ファイル名をを試したところ問題が解決しました！

行動規範の内容に同意します

回答1件

Windows 11、Edge、Chrome、Firefoxで確認しました。

提示されたファイル配置とCSSで、以下のHTMLで画像表示できています。
つまり、相対パスでOKです。
仮にcover-newsを呼び出しているのが<p>タグだとすると、何らかの文字(例ではtest)が無いと、画像表示されません。
これ以上は、HTML側の提示が無いと調査できません。

<html>
<head>
<link rel="stylesheet" href="css/news.css" type="text/css">
</head>
<body>
<p class="cover-news">test</p>
</body>
</html>

(追記)
後から提示されたソースにはnews.cssの読み込みがありません。

投稿2025/04/19 07:45

編集2025/04/19 08:43

hiroki-o

総合スコア1358

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.31%

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

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

質問する

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

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