こんばんは、ちょーじたんです。
今回は前回の続きで、20種類の動物をグループ分けしてもらったものを
表にしてもらうところからやっていきますね。
今回の記事は前回の記事を読んでからでないと
わかりにくいと思いますので、まだ前回の記事を読んでいない方は
そちらから読んでみてくださいね。
前回の記事はこちら
ChatGPTに20種類の動物を挙げてもらい、そこから子供に何を教える？
20種類の動物をグループ分けしたものを表にする
20種類の動物をグループ分けしたものを
表にしてもらいたいので、ChatGPTに
「グループ分けしたものをテーブル形式で表示してもらえますか？」
とお願いしました。
すると、ChatGPTは、
「はい、以下はグループ分けした動物をテーブル形式で表示したものです：
※ここから下は画像にしました。スクロールしたときの画像のコピーのやり方が
わからなかったので、2つの画像を貼り付けております
」
と回答してくれました。
このテーブルには、それぞれのグループに属する動物が一覧になっております。
横には3つのグループがあり、縦にはそれぞれのグループに属する動物が表示されておりますね。
表にしてもらったものをブログに貼り付けるためにプログラムを作ってもらう
表にしてもらったものをブログに貼り付けたいので、
そのプログラムを作成してもらいますね。
ということで、ChatGPTに、
「テーブル方式で表示したものをブログの記事に貼り付けたいので、
そのプログラムを作ってもらえますか？」
とお願いしました。
すると、ChatGPTは
「はい、以下はHTML形式でテーブルを作成するプログラムの例です。
このプログラムをコピーして、ブログ記事に貼り付けることができます。
<table>
<tr>
<th>哺乳類</th>
<th>鳥類</th>
<th>水生動物</th>
</tr>
<tr>
<td>ゾウ</td>
<td>クジャク</td>
<td>シャチ</td>
</tr>
<tr>
<td>チーター</td>
<td>フラミンゴ</td>
<td>サメ</td>
</tr>
<tr>
<td>パンダ</td>
<td>ペンギン</td>
<td>クロコダイル</td>
</tr>
<tr>
<td>クマ</td>
<td>ハチドリ</td>
<td></td>
</tr>
<tr>
<td>カメレオン</td>
<td></td>
<td></td>
</tr>
<tr>
<td>ゴリラ</td>
<td></td>
<td></td>
</tr>
<tr>
<td>キリン</td>
<td></td>
<td></td>
</tr>
<tr>
<td>カンガルー</td>
<td></td>
<td></td>
</tr>
<tr>
<td>モルモット</td>
<td></td>
<td></td>
</tr>
<tr>
<td>リス</td>
<td></td>
<td></td>
</tr>
<tr>
<td>ハムスター</td>
<td></td>
<td></td>
</tr>
<tr>
<td>ウサギ</td>
<td></td>
<td></td>
</tr>
<tr>
<td>コアラ</td>
<td></td>
<td></td>
</tr>
</table>
このプログラムをブログ記事のHTMLコードとして貼り付けると、
先ほど示したテーブルが表示されます。
テーブルのスタイルなどをカスタマイズしたい場合は、
CSSを使用することができます。」
という感じでhtmlを書いてくれました。
※こちらがこの記事に貼り付けたものです
| 哺乳類 | 鳥類 | 水生動物 |
|---|---|---|
| ゾウ | クジャク | シャチ |
| チーター | フラミンゴ | サメ |
| パンダ | ペンギン | クロコダイル |
| クマ | ハチドリ | |
| カメレオン | ||
| ゴリラ | ||
| キリン | ||
| カンガルー | ||
| モルモット | ||
| リス | ||
| ハムスター | ||
| ウサギ | ||
| コアラ |
私はこれくらいのhtmlはHPを作成した経験があるので、
知っておりますが、別に知らなくても、これを貼れば
ブログに表を掲載することができます。
今回は単純なプログラムでしたが、これってすごくないですか？
もちろん、html自体は勉強しなくても、ある程度は
知っておいた方が知らないよりはいいはずなので、
htmlのタグを紹介しているサイトを1つご紹介しておきますね。
ちょーじたん（調べる時間を短縮）と言うペンネームなので（笑）
こちらです
HTML要素一覧
上記のことでわからないタグがあれば、
それこそChatGPTに質問すれば、回答してもらえますので、
是非、ChatGPTをそういった使い方をしてみてくださいね。
グループの種類のところの色を変える うまくできませんでした
とりあえず、上記のhtmlをブログに貼り付けますね。
私の場合には、ワードプレスのCocoonというテーマ
（無料で使えます）を使っているので、
その場合の貼り付け方をお伝えしますね。
その中でグループの種類のところの色を変えたいので、
ChatGPTに
「上記のプログラムについて、哺乳類、鳥類、水生動物の
ところの色を薄い緑にしたいです。
これを付け加えたHTMLコードを教えてもらえますか？」
とお願いしました。
すると、ChatGPTは、
「はい、以下は「哺乳類」、「鳥類」、「水生動物」のセルの背景色を
薄い緑色に変更したHTMLコードです。
<table>
<tr>
<th style=”background-color: lightgreen”>哺乳類</th>
<th style=”background-color: lightgreen”>鳥類</th>
<th style=”background-color: lightgreen”>水生動物</th>
</tr>
<tr>
<td>ゾウ</td>
<td>クジャク</td>
<td>シャチ</td>
</tr>
<tr>
<td>チーター</td>
<td>フラミンゴ</td>
<td>サメ</td>
</tr>
<tr>
<td>パンダ</td>
<td>ペンギン</td>
<td>クロコダイル</td>
</tr>
<tr>
<td>クマ</td>
<td>ハチドリ</td>
<td></td>
</tr>
<tr>
<td>カメレオン</td>
<td></td>
<td></td>
</tr>
<tr>
<td>ゴリラ</td>
<td></td>
<td></td>
</tr>
<tr>
<td>キリン</td>
<td></td>
<td></td>
</tr>
<tr>
<td>カンガルー</td>
<td></td>
<td></td>
</tr>
<tr>
<td>モルモット</td>
<td></td>
<td></td>
</tr>
<tr>
<td>リス</td>
<td></td>
<td></td>
</tr>
<tr>
<td>ハムスター</td>
<td></td>
<td></td>
</tr>
<tr>
<td>ウサギ</td>
<td></td>
<td></td>
</tr>
<tr>
<td>コアラ</td>
<td></td>
<td></td>
</tr>
</table>
各セルには、style属性を使用してbackground-colorプロパティに値lightgreenを指定しました。
これにより、それぞれのセルの背景色が薄い緑色に変更されます。」
と回答してくれました。
それでは、上記のhtmlをブログに貼り付けますね。
| 哺乳類 | 鳥類 | 水生動物 |
|---|---|---|
| ゾウ | クジャク | シャチ |
| チーター | フラミンゴ | サメ |
| パンダ | ペンギン | クロコダイル |
| クマ | ハチドリ | |
| カメレオン | ||
| ゴリラ | ||
| キリン | ||
| カンガルー | ||
| モルモット | ||
| リス | ||
| ハムスター | ||
| ウサギ | ||
| コアラ |
グループの種類のところがちゃんと薄緑色になっていると思いきや、
全然変わっておりませんね（苦笑）
私はWebデザイナーではないので、今のところはわかりません。
CSSのところを何か変更する必要がある感じがしますが、
敢えて失敗作として、このまま残すことにします。
グループのところの色は変更できませんでしたが、
テーブルを貼り付けることはできましたので、
とりあえず良しとしておいてくださいね。
※たぶんこのまましばらく放置すると思います・・・
色を変えることは本来はCSSでできますので、
html同様に、CSSのタグ一覧のサイトを1つ紹介しておきますね。
こちらです
CSSプロパティ一覧
こんな感じでブログにhtmlを貼り付けることができますので、
是非、ブログを書いている人はやってみてくださいね。
まとめ
さて、ここから
グループ分けしたものについて
それぞれの割合を教えてもらって、
それを円グラフにして、そこからその円グラフの
プログラムを作ってもらってから、ブログに貼り付ける
ということを記事にするつもりでしたが
長くなりすぎたので、それについては次回にしますね。
コメント