ChatGPTに部分的なコーディングを依頼する方法

こちらの記事ではChatGPTを活用したコーディングを紹介します。

前回、簡単にボタンを作ってもらう方法を紹介しました。

今回は少し拡張して、複数の短冊型のコンテナをきれいに配列する方法を紹介します。

前回の記事はこちら→

↓設定すると便利なメモリー機能の設定でさらにコーディングを快適に行いましょう↓

関連記事：ChatGPTメモリー機能オススメ3選設定と解説→

ChatGPTを使ったコンテナの配列依頼
最新スマホ紹介
最新スマホ紹介
最新スマホ紹介
最新スマホ紹介

ChatGPTを使ったコンテナの配列依頼

まず、こちらの話題を作るにあたりまして、事前に一つコンテナを用意しました。

最新スマホ紹介

話題のスマホの画像です

ご覧の様に、太いタイトル相当の文字と画像、そして通常サイズの文字がセットになったコンテナです。

こういったコンテナは3つ4つ横に並べると、値段表として扱うことができたり、他の比較にも使えたりと用途が幅広いです。

しかし、如何せん作成が難しいので、色々と調整が必要になります。

そこで、ChatGPTと対話形式で進めながら調整をしていこうという試みです。

まず、上記のコードを提示してChatGPTに修正依頼をかけます。

USER

下記コードから作られているコンテナを横に3つ均等に並べられるように修正してください。
また、クラス名をbox2としてください

#html
<div class="box0">
<h2>最新スマホ紹介</h2>
<img src="https://dc-okinawa.com/ailands/wp-content/uploads/2024/03/sample_phone.jpg" alt="画像" class="image">
<p>話題のスマホの画像です</p>
</div>

#CSS

.box0 {
border: 1px solid #ccc;
padding: 10px;
width: 200px;
text-align: center;
}

.box0 img {
width: 100%;
height: auto;
margin-bottom: 10px;
}

今の単体の短冊では何にも使うことができないので、とりあえず横に三つ並べてみたいという依頼にしました。

すると新しいCSSとHTMLを書き出してくれます。

ChatGPT3.5

.container2 {
  display: flex;
  justify-content: space-between;
}

.box2 {
  border: 1px solid #ccc;
  padding: 10px;
  width: calc(33.33% - 20px); /* 3つの要素を均等に配置するために幅を調整 */
  text-align: center;
}

.box2 img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

ChatGPT3.5

<div class="container2">
<div class="box2">
<h2>最新スマホ紹介</h2>
<img src="https://dc-okinawa.com/ailands/wp-content/uploads/2024/03/sample_phone.jpg" alt="画像">
<p>話題のスマホの画像です</p>
</div>
<div class="box2">
<h2>最新スマホ紹介</h2>
<img src="https://dc-okinawa.com/ailands/wp-content/uploads/2024/03/sample_phone.jpg" alt="画像">
<p>話題のスマホの画像です</p>
</div> <div class="box2">
<h2>最新スマホ紹介</h2>
<img src="https://dc-okinawa.com/ailands/wp-content/uploads/2024/03/sample_phone.jpg" alt="画像">
<p>話題のスマホの画像です</p>
</div>
</div>

一回実装してみます。