CSSで印刷レイアウトをコントロール

<article> <section> <h1>１ページ目</h1> </section> <section> <h1>２ページ目</h1> </section> <section> <h1>３ページ目</h1> </section> </article> 改ページ ここにCSSを当てていき印刷すると綺麗にページが分かれるように組んでいきます。 まず、<section>タグに.print_page、<article>タグに.print_pagesというクラスを付けていきます。 ついでにprint.cssというスタイルシートを読み込みます。 <link media="print" rel="stylesheet" href="print.css"> <article> <section class="print_page"> <h1>１ページ目</h1> </section> <sectio

[himabato]

“改ページ”

[ryskosn]

A4 縦で印刷する場合の指定方法

[haruharujane]

“.print_page{ width: 172mm; height: 251mm; page-break-after: always;}.print_page:last-child{ page-break-after: auto; /* 最後のページの改ページを防ぐ */}”

[yamadar]

counter-increment, counter のプロパティ初めて知った。