ページ番号を追加するには、 PDF レイアウトでカスタマイズされた HTML と PDF スタイルシートでカスタマイズされた CSS を組み合わせる必要があります。

  1. PDF レイアウト HTML: フッター セクション (またはヘッダー セクション) で、ページ番号のプレースホルダーとして機能するための一意の ID、たとえば pageNum, を空の span 要素で使用します。

    HTML - PDF レイアウト:フッターセクション
    <span id="pageNum"/>
    
  2. PDF スタイルシート CSS:空の span に適用するために、以下の CSS セレクタ ルールを作成します。

    CSS - PDF スタイルシート
    #pageNum:before
    {
    content: counter(page);
    }
    

上記の CSS セレクタルールを詳細に分析します:

  • #pageNum ルールは、指定した「pageNum」ID を値として持つ HTML 要素、つまりヘッダーやフッター用に作成した span 要素を選択します。
  • セレクターの :before 部分は、span 要素が処理される前にコンテンツを挿入できるようにする疑似クラスです。
  • counter(page) は、現在のページ番号をコンテンツとして返す関数です。
  • content プロパティは CSS プロセッサに対し、動的コンテンツ (つまり、インクリメントされるページ番号) が span タグに挿入されることを示します。
  • ラベルなし