トリビュートページ - トリビュートページを作成する

Japanese 日本語 HTML-CSS
1

状況を説明しましょう:

指定通りに入力しているのですが、テストに失敗してしまいます。
失敗となる原因を教えてください。

失敗:img 要素の display の値は block に設定されている必要があります。
失敗:#image の max-width の値は 100% に設定されている必要があります。
失敗:#image は親要素内の中央に配置する必要があります。

現状のコード

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title id="title">Mr. Kato Junichi</title>
  </head>
  <body>
    <main id="main">
      <h1>Mr. Kato Junichi</h1>
      <p>配信モンスター加藤純一</p>
      <figure id="img-div">
        <img
          id="image"
          src="https://www.famitsu.com/images/000/336/615/y_65e838d14db99.webp"
          alt="katojunichi_profile"
        />
        <div id="img-caption">ファミ通の取材に答える加藤純一</div>
      </figure>
      <section id="tribute-info">
        <ul>
          <li>配信を始める。</li>
          <li>ニコニコ動画でNo1配信者になる。</li>
          <li>youtubeを始める。</li>
          <li>動画視聴ランキングTOP10に入る。</li>
          <li>登録者数が５０万人突破。</li>
          <li>Twitchで配信を始める。</li>
          <li>チャンネル登録者数が100万人突破</li>
          <li>今年15周年を迎える。</li>
        </ul>
        <p>まだまだこれからも加藤純一の伝説は続く。</p>
      </section>
      <div>
        加藤純一の：
        <a
          id="tribute-link"
          href="https://x.com/unkochan1234567"
          target="_blank"
          >X</a
        >
      </div>
    </main>
  </body>
</html>


/* file: styles.css */
img {
  display: block;
}

#image {
  height:auto;
  max-width: 100%;
}

ブラウザ情報:

ユーザーエージェント: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

チャレンジの情報:

トリビュートページ - トリビュートページを作成する

2

The CSS file is named styles.css, not style.css

Correct the name in your link element.

3

thanks you. resolve this problem.

1 Like