CSS と HTML を使用して印刷された Web ページにページ番号を追加するにはどうすればよいですか?

CSS/HTML を使用して印刷 Web ページにページ番号を付ける

ページ ヘッダー、フッター、およびページの追加という興味深い要件に遭遇しました。印刷されたウェブサイトのコピーに番号を付けます。この記事では、この取り組みを支援するソリューションについて説明します。

ページ番号付けに CSS と HTML を利用する

CSS では、@page ルールによりページの書式設定を広範囲に制御できます。ページ番号も含めて。 @bottom-right ルール内でカウンタを定義すると、各印刷ページにページ番号を動的に表示できます。

簡単なコード スニペットを次に示します。

@page {
  @bottom-right {
    content: counter(page) " of " counter(pages);
  }
}

このコードはページを配置します。各ページの右下隅にある番号。「ページ X/Y」の形式で表示されます。

ブラウザサポート

CSS @page ルールは、ほとんどの最新ブラウザでサポートされています。古いブラウザをサポートする必要がある場合は、ブラウザ固有の技術またはサードパーティ ライブラリの使用を検討してください。

続きを読む

CSS および HTML でのページ番号付けの詳細については、 、次のリソースを参照してください:

• [CSS3 ページ]モジュール](http://www.w3.org/TR/css3-page/)
• [CSS での 'page' プロパティの使用](http://www.intelligrape.com/blog/2010 /08/20/add-page-number-using-page-property-of-css/)
• [ページ番号とPrinceXML](http://www.princexml.com/doc/6.0/page-numbers/)

これらのソリューションを実装すると、カスタマイズされたページ ヘッダー、フッター、およびページ番号を追加することで、これらの文書の読みやすさと専門性を高めます。

以上がCSS と HTML を使用して印刷された Web ページにページ番号を追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。