はじめに
AIを活用したコーディングでは、ベストプラクティスに沿ったプロンプト設計が重要です。
参考：Anthropic「Claude Code Best Practices」
https://www.anthropic.com/engineering/claude-code-best-practices
本記事は社内勉強会の内容をもとに、あえてベストプラクティスに従わず曖昧な指示を与えた場合に、AIがどのように応答するかを検証した記録です。
ご覧いただく際は、その点をご理解の上で参考にしていただければ幸いです。
目次
使用するログ
使用するログ
# Textarea size adjustment request
_Exported on 2025/8/26 at 17:35:32 JST from Cursor (1.5.5)_
---
**User**
customer_factory_shareds_attributes_0_memoなどのサイズが大きすぎるのですが、他のtextareaと同じにできるでしょうか。
---
**Cursor**
現在のファイルを確認して、textareaのサイズ問題を調査します。
customer_factory_shareds_attributes_0_memoに関連するスタイルを探してみます。
textareaの一般的なスタイルを確認してみます。
factory_sharedsに関連するtextareaのスタイルを確認します。
他のtextareaのスタイルを確認して、標準的なサイズを把握します。
他のtextareaのスタイル例を確認します。
問題を特定しました。`customer_factory_shareds_attributes_0_memo`などのtextareaが`field-sizing: content`と`min-height: min-content`の設定により、内容に応じてサイズが大きくなってしまっています。
他のtextareaは通常`height: 300px`などの固定サイズが設定されているのに対し、factory_sharedsのtextareaは動的なサイズになっています。
これを修正して、他のtextareaと同じ固定サイズにします。
```css
body.admin_customer_creates.new #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.new #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.create #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.create #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.edit #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.edit #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.update #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.update #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea {
field-sizing: content;
min-height: min-content;
}
->
body.admin_customer_creates.new #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.new #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.create #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.create #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.edit #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.edit #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.update #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.update #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea {
height: 300px;
}
```
修正が完了しました。`customer_factory_shareds_attributes_0_memo`などのtextareaのサイズを、他のtextareaと同じ`height: 300px`の固定サイズに変更しました。
変更内容：
- `field-sizing: content`と`min-height: min-content`を削除
- `height: 300px`を追加
これにより、factory_sharedsのtextareaが他のtextareaと同じサイズになり、内容に応じて大きくなることがなくなります。
---
**User**
サイズを可変のままにして、初期サイズを適正にしてください。
---
**Cursor**
了解しました。サイズを可変のままにして、初期サイズを適正にします。`min-height`を設定して初期サイズを制御します。
```css
body.admin_customer_creates.new #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.new #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.create #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.create #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.edit #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.edit #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.update #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.update #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea {
height: 300px;
}
->
body.admin_customer_creates.new #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.new #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.create #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.create #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.edit #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.edit #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.update #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.update #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea {
min-height: 120px;
max-height: 400px;
}
```
修正が完了しました。`customer_factory_shareds_attributes_0_memo`などのtextareaの設定を以下のように変更しました：
変更内容：
- `height: 300px`（固定サイズ）を削除
- `min-height: 120px`（最小高さ）を追加
- `max-height: 400px`（最大高さ）を追加
これにより：
- 初期サイズは120pxの適正なサイズになります
- 内容が増えると自動的にサイズが拡大します
- 最大400pxまで拡大可能で、それ以上はスクロールバーが表示されます
- サイズは可変のまま維持されます
---
**User**
max-heigthはいりません。
---
**Cursor**
了解しました。`max-height`を削除します。
```css
body.admin_customer_creates.new #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.new #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.create #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.create #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.edit #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.edit #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.update #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.update #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea {
min-height: 120px;
max-height: 400px;
}
->
body.admin_customer_creates.new #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.new #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.create #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.create #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.edit #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.edit #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.update #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.update #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea {
min-height: 120px;
}
```
修正が完了しました。`max-height: 400px`を削除し、`min-height: 120px`のみを残しました。
これで`customer_factory_shareds_attributes_0_memo`などのtextareaは：
- 初期サイズは120pxの適正なサイズ
- 内容が増えると制限なく自動的にサイズが拡大
- サイズは可変のまま維持
という設定になりました。
---
**User**
サイズの自動調整を戻してください。
---
**Cursor**
了解しました。サイズの自動調整を戻します。`height: 42px`を`min-height`に変更して、内容に応じて自動的にサイズが調整されるようにします。
```css
body.admin_customer_creates.new #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.new #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.create #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.create #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.edit #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.edit #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.update #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.update #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea {
height: 42px;
}
->
body.admin_customer_creates.new #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.new #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.create #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.create #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.edit #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.edit #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.update #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.update #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea {
min-height: 42px;
}
```
修正が完了しました。`height: 42px`を`min-height: 42px`に変更しました。
これで`customer_factory_shareds_attributes_0_memo`などのtextareaは：
- 初期サイズは42pxの適正なサイズ
- 内容が増えると自動的にサイズが拡大
- サイズは可変で自動調整される
という設定に戻りました。
---
**User**
そうではなく、fit-contentの設定を戻してください。
---
**Cursor**
了解しました。`fit-content`の設定を戻します。元の`field-sizing: content`と`min-height: min-content`の設定に戻します。
```css
body.admin_customer_creates.new #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.new #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.create #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.create #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.edit #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.edit #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.update #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.update #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea {
min-height: 42px;
}
->
body.admin_customer_creates.new #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.new #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.create #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.create #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.edit #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.edit #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.update #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.update #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea {
field-sizing: content;
min-height: min-content;
}
```
修正が完了しました。`customer_factory_shareds_attributes_0_memo`などのtextareaの設定を元の`fit-content`設定に戻しました：
- `field-sizing: content`：内容に応じてフィールドサイズを自動調整
- `min-height: min-content`：最小高さを内容に応じて設定
これでtextareaが内容に応じて適切にサイズ調整されるようになりました。
---
**User**
初期heightは42pxにしてください。
---
**Cursor**
了解しました。`fit-content`の設定を保ちながら、初期heightを42pxに設定します。
```css
body.admin_customer_creates.new #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.new #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.create #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.create #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.edit #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.edit #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.update #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.update #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea {
field-sizing: content;
min-height: min-content;
}
->
body.admin_customer_creates.new #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.new #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.create #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.create #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.edit #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.edit #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.update #new_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea,
body.admin_customer_creates.update #edit_customer .tab-content .inputs > ol > li.factory_shareds .inputs li textarea {
height: 42px;
field-sizing: content;
min-height: min-content;
}
```
修正が完了しました。`customer_factory_shareds_attributes_0_memo`などのtextareaの設定を以下のように変更しました：
- `height: 42px`：初期高さを42pxに設定
- `field-sizing: content`：内容に応じてフィールドサイズを自動調整
- `min-height: min-content`：最小高さを内容に応じて設定
これで初期サイズは42pxで、内容が増えると自動的にサイズが拡大されるようになりました。textareaのサイズの調整
- textareaには
field-sizing: contentとmin-height: min-contentが設定され、内容に応じて高さが自動で調整されるようになっている。 - textareaの初期高さが想定より大きく（約300px）表示されてしまっている。
目標:
- textareaの高さが元の大きさ(画像)と同様になる。
入力
customer_factory_shareds_attributes_0_memoなどのサイズが大きすぎるのですが、他のtextareaと同じにできるでしょうか。
結果
問題を特定しました。
customer_factory_shareds_attributes_0_memoなどのtextareaがfield-sizing: contentとmin-height: min-contentの設定により、内容に応じてサイズが大きくなってしまっています。他のtextareaは通常
height: 300pxなどの固定サイズが設定されているのに対し、factory_sharedsのtextareaは動的なサイズになっています。これを修正して、他のtextareaと同じ固定サイズにします。
変更内容：
field-sizing: contentとmin-height: min-contentを削除height: 300pxを追加
高さの自動調整が削除されてしまい、300pxで固定されてしまった。
- 「初期の高さ」を設定してほしい、と書かず、単に「高さ」としてしまったことで固定サイズになった。
- 「他のtextarea」と書いたため、画面内にあるtextarea(この箇所の想定より大きい)を基準にされてしまった。
参照すべきは他の画面の、同様の入力をするような箇所か、隣にあるselectの高さだった。 - 「サイズが大きすぎる」と曖昧に指示した結果、AIには「一部のケースで大きくなることがある」と解釈されてしまった。
入力
サイズを可変のままにして、初期サイズを適正にしてください。
出力
修正が完了しました。
customer_factory_shareds_attributes_0_memoなどのtextareaの設定を以下のように変更しました：変更内容：
height: 300px（固定サイズ）を削除min-height: 120px（最小高さ）を追加max-height: 400px（最大高さ）を追加これにより：
- 初期サイズは120pxの適正なサイズになります
- 内容が増えると自動的にサイズが拡大します
- 最大400pxまで拡大可能で、それ以上はスクロールバーが表示されます
- サイズは可変のまま維持されます
元の実装 (field-sizingとmin-height)を維持してほしい、の意味で書いたが、minとmaxを設定するという形になってしまった。
- 単に「可変」としたので、求めているのが「動的」であると理解されなかった。
- 「維持」では「処理開始前にあった実装に戻す」という意図は伝わらなかった。
- 120pxが適正である根拠がわからない。
(max-heightとmin-heightの設定を削除し、heightを手動で設定した状態で)
入力
サイズの自動調整を戻してください。
出力
修正が完了しました。
height: 42pxをmin-height: 42pxに変更しました。これで
customer_factory_shareds_attributes_0_memoなどのtextareaは：
- 初期サイズは42pxの適正なサイズ
- 内容が増えると自動的にサイズが拡大
- サイズは可変で自動調整される
という設定に戻りました。
これもmin-heightの設定になってしまった。
- 単に「可変」「自動調整」と入力しても、「デフォルトの入力内容に応じた調整」と解釈されてしまう。
入力
そうではなく、fit-contentの設定を戻してください。
出力
修正が完了しました。
customer_factory_shareds_attributes_0_memoなどのtextareaの設定を元のfit-content設定に戻しました：
field-sizing: content：内容に応じてフィールドサイズを自動調整min-height: min-content：最小高さを内容に応じて設定これでtextareaが内容に応じて適切にサイズ調整されるようになりました。
元の実装に戻ったが、最初に指示した「サイズの調整」は行われなかった。
入力
初期heightは42pxにしてください。
出力
修正が完了しました。
customer_factory_shareds_attributes_0_memoなどのtextareaの設定を以下のように変更しました：
height: 42px：初期高さを42pxに設定field-sizing: content：内容に応じてフィールドサイズを自動調整min-height: min-content：最小高さを内容に応じて設定これで初期サイズは42pxで、内容が増えると自動的にサイズが拡大されるようになりました。
これで最初に想定した修正となった。
教訓
やはりベストプラクティスに則って、
- planモードで計画してから実行する
- なるべく具体的な指示を出す
- AIが一度間違った場合それを引きずる傾向があるので、resetし再度やり直す
などの対応が重要ですね。
