Webサイト構造入門とメインセクションのデザイン作成

<main>
  <section class="hero">
    <div class="hero-image">
      <!-- ここにヒーローイメージ -->
    </div>
    <div class="hero-content">
      <h1>キャッチフレーズ</h1>
      <p>ここに企業の強みやサービスの説明を書きます。</p>
    </div>
  </section>
</main>
<section class="news">
  <h2>最新情報</h2>
  <div class="news-item">
    <h3>ニュースタイトル1</h3>
    <p>ニュースの詳細1…</p>
  </div>
  <div class="news-item">
    <h3>ニュースタイトル2</h3>
    <p>ニュースの詳細2…</p>
  </div>
  <!-- 以降、ニュースアイテムを追加 -->
</section>

.hero {
  position: relative;
  height: 500px;
  background-color: #ddd;
}

.hero-image {
  width: 100%;
  height: 100%;
  background-color: #bbb;
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #333;
}

@media (max-width: 600px) {
  .hero {
    height: 300px;
  }
}

.news {
  padding: 20px;
  background-color: #f9f9f9;
}

.news-item {
  margin-bottom: 20px;
}