ChatGPTの実力を試してみた HTML、CSS編 | IT工房

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;
  }
}