CSS: 印刷時にページ番号を出力する

Advertising

Web サイトをプリンタや PDF 出力する際、ページ番号を出力する CSS をメモしておきます。

INDEX

印刷時にページ番号を出力する

以下は page クラスの要素に対し、右下に「1 ページ」、「2 ページ」… と出力するサンプルとなります。

[code]

This is page 1 content

This is page 2 content

This is page 3 content

This is page 4 content

[/code]

[code]
body {
counter-reset: page-number;
}

.page::after {
position: absolute;
bottom: 0;
right: 0;
counter-increment: page-number;
content: “ページ ” counter(page-number);
}
[/code]

Web プログラムで動的なページネーション出力と組み合わせて、プリント出力にも対応した UI,UX を実現可能です。
ペーパーレスの時代ですが、ページ番号出力等といった一手間を加えることで、展開する Web サービスの信頼性をより多く獲得できるかと思います。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Please share it!