チュートリアル
Claude Opus 5.5で商品仕様書の印刷CSSを修正する
商品ページを縮小して印刷する前に、Claude Opus 5.5で画面専用のレイアウト規則を特定します。固定ナビゲーション、はみ出しの切り取り、大きすぎるブロックは、PDFで仕様を欠落させたり空白ページを作ったりします。印刷結果とHTML・CSSを渡し、商品情報をすべて維持する小さな印刷専用パッチを求めましょう。
商品ページを縮小して印刷する前に、Claude Opus 5.5で画面専用のレイアウト規則を特定します。固定ナビゲーション、はみ出しの切り取り、大きすぎるブロックは、PDFで仕様を欠落させたり空白ページを作ったりします。印刷結果とHTML・CSSを渡し、商品情報をすべて維持する小さな印刷専用パッチを求めましょう。
印刷の症状と規則を対応させる
| 印刷時の症状 | 確認するもの | 最初に評価する修正 |
|---|---|---|
| 下部の行が消える | 固定高さ、はみ出しの切り取り | 印刷コンテナを自然に伸ばす |
| ナビゲーションが本文に重なる | fixedやstickyの画面操作 | 印刷に不要な操作を隠す |
| 節の前に大きな空白 | 分割不可ブロック、強制改ページ | 適切な分割を許可する |
| 仕様が小さく読めない | 画面幅、全体縮小 | 文字を縮める前に段組みを変更 |
MDNの印刷ガイドは、印刷スタイルシート、`@media print`、`@page`による設定を説明しています。文書を紙に合わせるための機能です。幅の狭いスクリーンショットは、実際に生成した印刷文書の代わりにはなりません。
文字を変える前に幅を計算する
仮の仕様書で考えます。A4の幅は210 mm、左右の余白が各15 mmなら、利用幅は210 − 30 = 180 mmです。US Letterは215.9 mmなので、同じ余白なら185.9 mm残ります。これらはローカルで計算した例で、Opusの出力でも実際のプリンター領域の測定でもありません。印刷ダイアログ、ヘッダー、プリンターの制限で結果は変わります。
画面上の2段組みは紙では1段にする必要があるかもしれません。型番、単位、バリエーション、事業側が提供した保証説明、解釈に必要なリンクや参照を維持します。1ページに収めるために都合の悪い表を隠してはいけません。内容が2ページ必要なら、読みやすい2ページの仕様書が正しい成果物になり得ます。
`break-inside`はMDNのリファレンスを参照してください。分割回避を指定しても、大きすぎるブロックが1ページに収まるわけではありません。短いキャプションは画像と一緒に保ち、長い節は合理的に分割します。表紙だけでなく、最初のページ、最長の表、最後のページを確認します。
印刷修正用の完全なプロンプト
この商品仕様書の印刷レイアウトを修正してください。入力はHTMLまたはコンポーネント構造、画面・印刷CSS、生成PDFまたは各ページ画像、用紙サイズ、余白、倍率、ブラウザバージョンです。不明な印刷設定は不明とします。商品情報の書き換えを許可する依頼ではありません。
固定高さ、はみ出しの切り取り、fixed・sticky操作、過大な幅、強制改ページや分割回避を特定してください。各変更を目に見える症状とコード位置に結び付けます。入力寸法から利用幅を計算します。一律に文字を縮めず、印刷専用のレイアウトと読みやすい再配置を優先してください。
最小パッチと変更前後の確認表を返してください。仕様、単位、バリエーション、必要な注記をすべて維持します。明確に必須でなければ1ページは希望条件とし、読みやすく収まらない内容を指摘します。必要ならA4とLetterの両方を確認します。印刷メディアのエミュレーションと実際のPDFを区別し、生成ページを確認せず合格と言わないでください。Opus公式ガイドは、文脈と出力制約を明確にする参考資料です。ここでの例は提案手順であり、OpusがPDFを生成・検証したという主張ではありません。
書き出した文書を検証する
設定を記録してPDFを生成し、全ページを読みます。仕様の行数を原本と比較し、文字の切れ、ヘッダーの重なり、商品ラベルと画像の対応を確認します。必要な用紙形式ごとに繰り返してください。印刷メディアのエミュレーションはCSS確認に便利ですが、最終的な改ページを証明しません。紙での納品が必要なら実際の印刷も確認します。PDFだけでプリンターの動作は保証できません。
よくある質問
**すべてに`break-inside: avoid`を付けるべきですか？** いいえ。大きな節が先へ送られたり、余白が増えたりします。まとまりを保ちたい小さな組に使い、結果を確認します。
**「ページに合わせる」で直りますか？** 文字が小さくなるだけで、切り取りや欠落が残る可能性があります。倍率より先にレイアウトを診断します。
**既存のPDF仕様確認と同じですか？** そちらはPDFの事実を抽出して照合します。こちらは文書を生成するHTMLの印刷レイアウトを修正します。
商品情報と制作素材をまとめる
承認した仕様とビジュアルをPanelly Studioに渡して広告を制作し、印刷仕様書を参照として残します。受け取った文書が矛盾するなら、先にPDF商品仕様の確認を行います。この受け渡しはPanellyのPDF出力機能やOpus統合を意味しません。
