Update!

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

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

目次

  • 印刷時にページ番号を出力する
  • まとめ

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

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

HTML

<html>
  <body>
    <section class="page">
      This is page 1 content
    </section>
    <section class="page">
      This is page 2 content
    </section>
    <section class="page">
      This is page 3 content
    </section>
    <div class="page">
      This is page 4 content
    </section>
  </body>
</html>

CSS

body {
  counter-reset: page-number;
}

.page::after {
  position: absolute;
  bottom: 0;
  right: 0;
  counter-increment: page-number;
  content: "ページ " counter(page-number);
}

まとめ

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

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

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents