入力例で確認 / A4メニュー
長い商品名で価格がずれる・改ページする時の確認
長い名前を入力すると、文字が折り返して商品ブロックが縦に伸びます。価格が右端から動いたように見える場合は、まず「折り返し」と「印刷ページの分割」を分けて確認します。
今回の確認範囲：以下は現行ツールのソースと架空入力例に基づく説明です。使うブラウザやプリンタでの印刷結果は、各自の印刷プレビューで確認してください。
試し読み込み用の架空データ
季節の果実と自家製カスタードを何層にも重ねた喫茶店特製のロングネームパフェ999,999円
水出しコーヒー520円
商品名・価格ともに説明用の架空値です。999,999円は桁と右端の表示を見分けるための上限例で、販売価格の提案ではありません。
確認の順序
- JSONを読み込み、テンプレートを「A4メニュー」にします。プレビューで長名と価格が同じ商品行にあることを確認します。
- 長名のあとに短い商品名も見ます。価格の右端が揃っていて、長名だけ複数行になっていれば、横ずれではなく名前の折り返しです。
- 「印刷する」を押して印刷プレビューを開き、用紙をA4にします。商品名と価格が別ページに分かれていないか、商品全体がどのページに置かれたかを見ます。
- 行が高くなりページが増える場合は、実際に必要な商品名を保ったまま説明文を短くするか、説明を空欄にして再確認します。文字サイズを小さくする機能はありません。
画面で起きていること
| 名前が複数行になる | A4の利用可能幅は紙面の余白、商品名と価格の間隔、価格表示の幅に分かれます。商品名欄は残り幅を使い、長い文字を折り返します。 |
|---|---|
| 価格の左端が揃わない | 価格欄は桁数に応じた幅です。現行CSSは数字幅を揃え、各行で価格欄を右側に配置します。比べるのは左端ではなく右端です。 |
| 改ページ位置が動く | 商品名が複数行になると、その商品ブロックの高さが増えます。現行CSSは商品ブロックをページ途中で分けにくくし、入る次ページへ移す場合があります。 |
| 1件だけ極端に長い | 1件が印刷可能なページより高い場合、ブラウザごとに分割・はみ出しの結果が変わる可能性があります。「途中で割れない」指定だけで全ての入力が必ず一枚に収まるわけではありません。 |
期待する表示と制約
- 現行CSSでは商品名欄が折り返し、価格文字列自体は改行されず、各商品行の右側に置かれます。6桁の例は「999,999円」と表示されます。
- 印刷CSSはA4、上下左右10mmのページ余白を指定しています。商品ブロックには改ページを避ける指定があります。
- ブラウザの用紙サイズ・倍率・余白・フォント、商品名と説明の実際の長さで紙面は変わります。ブラウザ画面だけで物理印刷の位置や切れを断定せず、使う環境の印刷プレビューで確認します。
- 商品名を短くして意味が変わるなら省略せず、不要な説明だけを削るか、別紙・複数ページに分ける判断をしてください。