雑記
システム開発に大活躍!教えてChatGPT先生
わら
公開日:2024/02/15
コーディングで詰んだことありますか?
ありますよね。
本格的にシステム開発を始めて1年弱の私は、毎日詰みまくりです。
そんな時、私はChatGPT先生に頼っています。
今回は私なりのChatGPTの使い方を教えたいと思います。
使い方
一覧テーブルの画像がないときに出てくる「NoImage」のデザインをGPT先生に作ってもらいます。
※ChatGPT3.5を使用しています
まず、条件を伝えます。
このとき、どの言語で書いてほしいか、何を書いてほしいかは細かくプロンプトに書いたほうがより正確に返してくれます。
GPT先生からの返答
1 2 3 4 5 6 7 8 |
.square { width: 40px; height: 40px; background-color: #757575; color: #FFF; text-align: center; line-height: 40px; /* 垂直方向の中央揃え */ } |
1 |
<div class="square">No image</div> |
GPT先生のCSSで生成
なかなかイメージ通りになっていますが、
テキストが正方形の中に収まっていませんでした。
追加注文で調整していきます。
1 2 3 4 5 6 7 8 9 10 |
.square { width: 40px; height: 40px; background-color: #757575; color: #FFF; text-align: center; display: flex; justify-content: center; align-items: center; } |
先程の質問を引き継いで(正確には繰り返して)新しい提案をしてくれます。
テキストは入ったけど余白がないですね。
1 2 3 4 5 6 7 8 9 10 11 |
.square { width: 40px; height: 40px; background-color: #757575; color: #FFF; text-align: center; display: flex; justify-content: center; align-items: center; padding: 5px; /* テキストと正方形の間に余白を作成 */ } |
余白という言葉を聞いてpaddingを追加してくれましたが、
pxが反映されてないみたいです。
しかし、まあここまでできたら上出来です!
あとは自分でpxをlemに変えたり、色・サイズを調整をして
「NoImage」の画像を作ることができました!
今回はCSSの例をお伝えしましたがPHPやjsを書いてもらうこともあります。
かなり正確に返してくれるので、自分で1からソースを書く手間が省けて助かっています!
使い方としては他にも、コード・エラーの解説やデバッグのサポートを指示すれば仕事を果たしてくれます。
(調べてみるとプログラミングに関するプロンプトのテンプレートがいっぱい提供されてるみたいですね~)
ぜひコーディングで詰んだときに使ってみてはいかがでしょうか?
私は もうGPT先生なしではやっていけないです…