ChatGPTの実力を試してみた　HTML、CSS編

ChatGPTは、言語生成タスクにおいて優れていると評価されています。
特に、文書生成、対話生成、サマリー生成などの業界での利用が想定されています。
また、トレーニングデータが大規模であり、多様なトピックに関する知識を有することが特徴です。
単純に会話だけではなく、エクセルの関数を教えてくれたり、希望するプログラミングを提案したりすることもできます。

早速、HTMLとCSSのコーディングを提案してもらいました。

質問
ヒーローセクションのHTML
回答

<div class="hero-section">
  <h1 class="hero-section-title">Welcome to Our Website</h1>
  <p class="hero-section-description">Discover the world of endless possibilities.</p>
  <a href="#" class="hero-section-button">Explore More</a>
</div>

質問
ヒーローセクションのHTMLとCSS
回答

<div class="hero-section">
  <h1 class="hero-section-title">Welcome to Our Website</h1>
  <p class="hero-section-description">Discover the world of endless possibilities.</p>
  <a href="#" class="hero-section-button">Explore More</a>
</div>

.hero-section {
  background-color: #34495e;
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.hero-section-title {
  color: #fff;
  font-size: 36px;
  margin-bottom: 20px;
}

.hero-section-description {
  color: #fff;
  font-size: 18px;
  margin-bottom: 40px;
}

.hero-section-button {
  background-color: #fff;
  color: #34495e;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 18px;
}

質問
ヒーローセクションのHTMLとCSSをモバイル対応にしたい
回答

<div class="hero-section">
  <h1 class="hero-section-title">Welcome to Our Website</h1>
  <p class="hero-section-description">Discover the world of endless possibilities.</p>
  <a href="#" class="hero-section-button">Explore More</a>
</div>

.hero-section {
  background-color: #34495e;
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.hero-section-title {
  color: #fff;
  font-size: 36px;
  margin-bottom: 20px;
}

.hero-section-description {
  color: #fff;
  font-size: 18px;
  margin-bottom: 40px;
}

.hero-section-button {
  background-color: #fff;
  color: #34495e;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 18px;
}

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

  .hero-section-title {
    font-size: 24px;
  }

  .hero-section-description {
    font-size: 14px;
  }
}

完成したページ

もちろんプログラミングも教えてくれるし、GitやUnixコマンドに困ったときもさらりと応えてくれる。

ただし、近場の鰻屋で良いところを教えてと質問すると適当な名前の実在しない名前の店名が返ってきた。
例えば「うなぎの井戸」など。