ボタンごとに印刷エリアを変えるデモページ
印刷したい箇所の下にあるボタンをクリックしてみて下さい。
印刷時、不要なボタンや文章は削除されクーポン部分だけが表示されるように設定しています。
CSS表示のものを印刷した場合
ボタンを押し、印刷プレビュー等でご確認ください。
COUPON A 10%
クーポンAの印刷はココをクリック！
印刷時の背景（background）表示は各PCの印刷設定に依存します。
デフォルトが「背景を表示しない」設定のブラウザもあるため、印刷時に背景が消えてしまうことがあります。
画像表示のものを印刷した場合
ボタンを押し、印刷プレビュー等でご確認ください。
クーポンBの印刷はココをクリック！
＜おまけ＞印刷時の改ページについて
印刷時に対象要素が途中で切れて欲しくない場合、強制的に改ページや改カラムを制御するプロパティがあります。
「印刷時の改ページについて」の見出し直前で改ページを行う指定をしています。
下にある「全ての印刷はココをクリック！」ボタン、または通常通り右クリックもしくは各ブラウザメニューから印刷を選択し、印刷プレビューにてご確認ください。
| プロパティ | 値 | 効果 |
|---|---|---|
| page-break-before | always | 印刷時に指定した要素の直前で改ページ |
| avoid | 印刷時に指定した要素の直前で改ページを禁止 | |
| auto | 制御しない （初期値） | |
| page-break-after | always | 印刷時に指定した要素の直後で改ページ |
| avoid | 印刷時に指定した要素の直後で改ページを禁止 | |
| auto | 制御しない （初期値） | |
| break-inside※非対応ブラウザ有 | avoid | 印刷時に指定ボックス内での改ページを禁止 |
| avoid-page | 印刷時に指定ボックス内での改ページを禁止 | |
| avoid-column | 印刷時に指定ボックス内での改カラムを禁止 | |
| avoid-page | 印刷時に指定ボックス内での改領域を禁止 | |
| auto | 制御しない （初期値） |
全ての印刷はココをクリック！
印刷時に「印刷時の改ページについて」の部分が強制的に改ページされます。
印刷プレビューの2ページ目に反映されていることをご確認ください。
｜記事へ戻る｜
