一番雑な投げ方
この日本語テキスト、禁則処理を考慮してTailwind CSSで修正して。
これだけで動くよ。日本語の助詞とか句読点が行頭に来ないように、いい感じに調整してくれるはず。
もうちょい具体的に投げるパターン
もうちょっと細かく指示したい時は、こんな感じで状況を伝えてみて。
1. フォントサイズとレイアウトに合わせて調整してほしい時
特定のUI要素で、小さいフォントサイズとか、幅が狭いエリアでの調整を頼むならこれ。
このdivの中の日本語テキスト、フォントサイズはsmallで、禁則処理とtext-wrapを適切に適用して。
2. 特定のCSSプロパティを意識してほしい時
Tailwind CSSのwhitespaceやbreak-words（text-wrapのTailwind版）を明示的に使ってほしい場合はこう投げるといいよ。
日本語の禁則処理を適用して、`whitespace-normal`と`break-words`を使って調整して。
3. Tailwind CSSのクラスを直接提案してほしい時
具体的なTailwindクラスを提案させたいなら、直接聞いてみるのが手っ取り早いね。
このテキストに日本語の禁則処理を適用するためのTailwind CSSクラスを提案して。
実践例 / 実録
うちのチームで、ユーザー向けアプリのコメント欄のUI調整を頼んだ時の話だよ。短いコメントだと問題ないんだけど、長文になると「。」が行頭に来たりして、ちょっとダサかったんだよね。
最初はこんな感じで要素を投げてみた。
<p class="text-sm text-gray-700 leading-relaxed">
これは長いコメントのサンプルテキストです。日本語の禁則処理が適用されていないと、句読点が行頭に来てしまいがちです。ユーザー体験を向上させるためにも、この部分を適切に修正したいと考えています。例えば、読点や句点、閉じ括弧などが行頭に来ないようにしたいです。
</p>
そしたら、Claude Codeがこんな感じで返してくれたよ。
<p class="text-sm text-gray-700 leading-relaxed [text-wrap:balance] [word-break:break-all] [hyphens:auto]">
これは長いコメントのサンプルテキストです。日本語の禁則処理が適用されていないと、句読点が行頭に来てしまいがちです。ユーザー体験を向上させるためにも、この部分を適切に修正したいと考えています。例えば、読点や句点、閉じ括弧などが行頭に来ないようにしたいです。
</p>
[text-wrap:balance]、[word-break:break-all]、[hyphens:auto]の3つを追加してくれたんだ。特に[text-wrap:balance]は最近のCSSプロパティで、テキストの折り返しを均等にしてくれるから、見栄えがすごく良くなった。[word-break:break-all]と[hyphens:auto]は、長い単語の途中でも改行させたり、ハイフンでつないだりして、レイアウトが崩れるのを防いでくれる。
これだけで、デザイナーさんからの「行頭禁則処理されてないの気になる」っていうフィードバックが一発で解決したんだ。いちいちCSSプロパティ調べて試さなくていいからマジで助かる。
つまずきポイント
1. 「思うように禁則処理されないんだけど？」って時
Claude Codeが提案してくれたCSSクラスやプロパティを適用しても、完璧じゃないことがあるんだよね。特に日本語の禁則処理はブラウザの実装に依存する部分も大きいから、全部をCSSだけで制御するのは難しい時がある。
対処法:
そういう時は、Claude Codeに「text-wrap:balanceだけじゃなくて、もっと他のアプローチも試したいんだけど、どうかな？」とか、「この部分だけはword-breakじゃなくてoverflow-wrapの方がいい？」みたいに、具体的なCSSプロパティを挙げながら質問し直すのが効果的だよ。
あるいは、HTML構造自体を見直すことも必要になるかも。例えば、禁則処理を適用したいテキストが不自然に短い要素に分かれちゃってると、うまく機能しないことがあるから、テキストブロックを適切にまとめるよう指示するといい。
2. text-wrap:balanceが効かないブラウザもあるんだけど？
text-wrap:balanceは比較的新しいCSSプロパティだから、古いブラウザだと対応してない場合があるんだ。
対処法:
Claude Codeに「このtext-wrap:balanceは使いたいんだけど、古いブラウザでもフォールバックとして禁則処理が効くようにしてくれる？」って聞いてみて。代替案として、text-align: justify;とtext-justify: inter-ideograph;の組み合わせとか、word-break: keep-all;とoverflow-wrap: break-word;の組み合わせなんかを提案してくれることもあるよ。あるいはJavaScriptで制御する方法を提案してくることもあるけど、まずはCSSでどこまでいけるか試すのがおすすめ。