チュートリアル
Claude Opus 5.5で商品グリッドの横はみ出しを直す
Claude Opus 5.5には、ブレークポイントを変える前に、利用可能な幅を超えているグリッドトラックや子要素を特定させます。列が`1fr`でも、長い商品コードが自動最小幅を画面より広くする場合があります。実際のHTML、計算済みスタイル、コンテナー寸法を渡してください。スクリーンショットだけでは最小幅の原因を特定できません。
Panellyで形にする
アイデアを、あなたの商品広告に
商品画像とアイデアから、4コマ広告、統一感のある素材セット、動画をPanellyで制作。
Panellyで制作する 生成前に依頼内容を編集できます。
Claude Opus 5.5には、ブレークポイントを変える前に、利用可能な幅を超えているグリッドトラックや子要素を特定させます。列が1frでも、長い商品コードが自動最小幅を画面より広くする場合があります。実際のHTML、計算済みスタイル、コンテナー寸法を渡してください。スクリーンショットだけでは最小幅の原因を特定できません。
幅の問題を三つに分ける
| 症状 | 最初に調べる箇所 | 限定的な修正 |
|---|---|---|
| 長い連続文字列で可変列が広がる | トラックと子要素の最小幅 | minmax(0, 1fr)とmin-width: 0を検討 |
| カードは正常だが画像が飛び出す | 画像の固有幅と制約 | 縦横比を保って画像を制限 |
| 必要な内容が二列に収まらない | サイドバー、間隔、利用可能幅 | 内容に応じた位置で一列に切り替え |
MDNのminmaxリファレンスは、自動最小値とゼロの最小値を区別しています。トラックが縮んでも、中身が自動的に折り返されたり縮小されたりするわけではありません。トラックと実際にはみ出す子要素を別々に直し、ページ全体のはみ出しを隠さないでください。
CSSを提案する前に空間を計算する
仮のレイアウトで、グリッド内幅が960 px、サイドバーが240 px、間隔が24 pxなら、可変領域は696 pxです。画面幅390 px、左右のパディング各16 pxでは、内幅は358 px。同じサイドバーと間隔を残すと商品領域は94 pxしかありません。ブラウザーがトラックを縮められても、レイアウトの変更が必要です。
この算術はローカルで計算しました。Opusの修正結果や本番グリッドはテストしていません。デスクトップの候補はgrid-template-columns: 240px minmax(0, 1fr)で、商品領域にmin-width: 0を指定します。長い文章は折り返し、機械処理用コードはコピー可能にします。比較表は単語を分断するより、専用コンテナー内で横スクロールさせる場合があります。ページ全体のoverflow-x: hiddenは、問題と必要な内容を一緒に隠すため避けます。
コピーして使える診断プロンプト
添付のHTML、CSS、計算済みスタイル、スクリーンショットで商品グリッドを点検してください。デスクトップ内幅960 px、サイドバー240 px、間隔24 pxです。モバイル画面幅390 px、左右パディング各16 pxです。scrollWidthがclientWidthを超える最初の要素を探し、トラックと最小幅の規則を追跡してください。トラック寸法、改行不能な内容、画像の固有寸法を区別してください。最小修正と、理由を示した一列への切替位置を提案してください。商品順序、表示名、コードのコピー、フォーカス枠、画像比率を維持してください。原因のセレクター、修正前後の幅計算、最小パッチ、390と1280 pxでの検証方法を返してください。資料で確認できない点を明記し、実施していないブラウザーテストを実施済みと書かないでください。モデルの参考資料は公式Opusプロンプトガイドです。これは編集工程の例であり、モデルの実測結果ではありません。2018年のコミュニティ質問は最小サイズの混乱を示しますが、現在の需要量を示しません。
修正後の検証
空白のない長いSKU、翻訳名、画像欠落、キーボードフォーカスを試します。文書のスクロール幅と画面幅を比較し、意図した局所スクロールは別に確認します。文字拡大時とサイドバーを除いた状態でも繰り返してください。一つの幅の画像が正常でも、切替範囲全体の保証にはなりません。
画像ファイルの選択が問題ならレスポンシブ画像の点検を参照してください。商品形状を受け止められるレイアウトになったら、Panelly Studioで広告素材を制作できます。PanellyへのOpus搭載を意味しません。
公開前の疑問
すべてのグリッドを最小値ゼロにするべきですか？
いいえ。縮める必要があるトラックに選び、内容の処理方法を定めます。意図的な固定幅の比較領域は要件が異なります。
商品名を切り詰めても構いませんか？
必要なときに全文を確認できる場合に限ります。幅の制約を直してから省略方法を決めます。
画像を再生成する必要がありますか？
CSSの寸法不具合なら通常は不要です。配信画像とコンテナーを調べ、構図が不適切な場合だけ素材を変更します。
