印刷について説明します。
印刷時のページのサイズを @page { ... } の中で指定します。
印刷時のページのサイズを指定する。
| 属性値 | 説明 |
|---|---|
| auto | 横幅・縦幅を自動計算 |
| A5 | A5 サイズで印刷 |
| A4 | A4 サイズで印刷 |
| A3 | A3 サイズで印刷 |
| B5 | B5 サイズで印刷 |
| B4 | B4 サイズで印刷 |
| letter | レターサイズ(8.5×11in)で印刷 |
| legal | リーガルサイズ(8.5×14in)で印刷 |
| ledger | レジャーサイズ(17×11in)で印刷 |
| portrait | 縦長の方向で印刷 |
| landscape | 横長の方向で印刷 |
| 横幅 | 数値＋単位で横幅を指定 |
| 縦幅 | 数値＋単位で縦幅を指定（省略時は横幅と同じ） |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> @page { size:A5 landscape; } </style> </head> <body> <h2>プレビュー</h2> <p>プレビューで確認してください。</p> </body> </html>
@page で定義されたページボックス名を指定して、改ページや新規ページの表示などのページボックスによる設定を要素に適用する際に使用します。
@page で定義されたページボックス名を指定する。
| 属性値 | 説明 |
|---|---|
| auto | 出力先に応じて自動的に設定（規定値） |
| ページボックス名 | 適用するページボックス |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> @page m10 { margin: 10mm; } @page m50 { margin: 50mm; } </style> </head> <body> <h2>プレビュー</h2> <p>プレビューで確認してください。</p> <p style="page:m10;"> 01<br> 02<br> 03<br> </p> <p style="page:m50;"> 04<br> 05<br> （略） 10<br> </p> </body> </html>
印刷時に要素の直前で強制的に改ページさせたり、その位置での改ページを禁止したりします。
要素の直前の改ページを指定する。
| 属性値 | 説明 |
|---|---|
| auto | 改ページについて特に指定しない（規定値） |
| always | その位置で強制的に改ページさせる |
| left | その位置で強制的に改ページさせて、指定要素を左側ページに印刷する |
| right | その位置で強制的に改ページさせて、指定要素を右側ページに印刷する |
| avoid | その位置での改ページを避ける |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> h2 { page-break-before: always; } h3.left { page-break-before: left; } h3.right { page-break-before: right; } div { page-break-before: avoid; } </style> </head> <body> 01 プレビューで確認してください。<br> 02<br> 03<br> （略） 10<br> <h2>ページの先頭</h2> <!-- 改ページ --> 11<br> 12<br> <h3 class="left">左ページの先頭</h3> <!-- 改ページ --> 13<br> 14<br> <h3 class="left">左ページの先頭</h3> <!-- ２ページ 改ページ --> 15<br> 16<br> <h3 class="right">右ページの先頭</h3> <!-- 改ページ --> 17<br> 18<br> <h3 class="right">右ページの先頭</h3> <!-- ２ページ 改ページ --> 19<br> 20<br> （略） 40<br> <div>41 この後では改ページされない</div> （略） <div>70</div> </body> </html>
印刷時に要素の直後で強制的に改ページさせたり、その位置での改ページを禁止したりします。
要素の直後の改ページを指定する。
| 属性値 | 説明 |
|---|---|
| auto | 改ページについて特に指定しない（規定値） |
| always | その位置で強制的に改ページさせる |
| left | その位置で強制的に改ページさせて、指定要素を左側ページに印刷する |
| right | その位置で強制的に改ページさせて、指定要素を右側ページに印刷する |
| avoid | その位置での改ページを避ける |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> h2 { page-break-after: always; } h3.left { page-break-after: left; } h3.right { page-break-after: right; } div { page-break-after: avoid; } </style> </head> <body> 01 プレビューで確認してください。<br> 02<br> 03<br> （略） 10<br> <h2>ページの最後</h2> 12<br> <!-- 改ページ --> <h3 class="left">左ページの最後</h3> 13<br> <!-- ２ページ 改ページ --> 14<br> <h3 class="left">左ページの最後</h3> 15<br> <!-- 改ページ --> 16<br> <h3 class="right">右ページの最後</h3> 17<br> <!-- ２ページ 改ページ --> 18<br> <h3 class="right">右ページの最後</h3> 19<br> <!-- 改ページ --> 20<br> （略） 40<br> <div>41 この後では改ページされない</div> （略） <div>70</div> </body> </html>
印刷時に要素内での改ページを禁止します。
要素内での改ページを禁止する。
| 属性値 | 説明 |
|---|---|
| auto | 改ページについて特に指定しない（規定値） |
| avoid | 要素内での改ページを避ける |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> p { page-break-inside: avoid; } </style> </head> <body> <p> <!-- p タグ内では改ページされない --> 01 プレビューで確認してください。<br> 02<br> 03<br> （略） 30<br> </p> <p> 31<br> <!-- ここで改ページされる --> （略） 50<br> </p> </body> </html>
印刷時、改ページされる際の前ページの最低行数を指定します。
ただし、この属性は廃止が予定されています。
印刷時、改ページされる際の前ページの最低行数を指定する。
| 属性値 | 説明 |
|---|---|
| 数値 | 印字行数（規定値：2） |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body { orphans: 30; } </style> </head> <body> 01<br> 02<br> 03<br> （略） 30<br> <!-- ページの最後 --> 31<br> <!-- ページの先頭 --> （略） 60<br> </body>
印刷時、改ページされる際の次ページの最低行数を指定します。
ただし、この属性は廃止が予定されています。
印刷時、改ページされる際の次ページの最低行数を指定する。
| 属性値 | 説明 |
|---|---|
| 数値 | 印字行数（規定値：2） |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body { widows: 30; } </style> </head> <body> 01<br> 02<br> 03<br> （略） 20<br> 21<br> <!-- ここで改ページされる --> （略） 50<br> </body>