CSS/@page

@page

@pageは、印刷時のページスタイルを定義するためのCSSルールです。このルールを使用すると、ページのサイズ、余白、向き、境界線など、印刷に関連する設定をカスタマイズできます。主に印刷用スタイルシートで利用され、PDF生成やプリンター出力に特化したスタイル設定が可能です。

基本的な@pageの構文は以下の通りです：

@page {
  <プロパティ>: <値>;
}

また、特定のページに異なるスタイルを適用する場合には、以下のような擬似クラスを使用します：

@page {
  margin: 20mm;
}

この例では、ページ全体の余白を20mmに設定しています。

@page {
  size: A4 portrait;
}

この例では、ページサイズをA4に設定し、縦向き（portrait）に指定しています。

@page :first {
  margin-top: 50mm;
  margin-bottom: 30mm;
}

この例では、最初のページに特別な余白を設定しています。

@page :left {
  margin-left: 25mm;
}

@page :right {
  margin-right: 25mm;
}

この例では、偶数ページの左余白と奇数ページの右余白をそれぞれ25mmに設定しています。

@pageルールで使用可能なプロパティには以下のものがあります：

margin - ページの余白を指定します（例：10mm、1inなど）。
size - ページサイズを指定します。プリンター標準サイズ（例：A4、letter）や、カスタムサイズ（例：size: 210mm 297mm;）が指定可能です。
marks - トリムマークやレジストレーションマークを設定します（例：crop、cross）。
bleed - 裁ち落とし領域を指定します。

@pageは多くのモダンブラウザでサポートされています。ただし、marksやbleedなどのプロパティはブラウザによる対応が異なるため、使用時には事前確認が推奨されます。