何年も前の2005年11月、AlistApart.comは、HTMLとCSSだけを使用して本を出版する方法についての記事を発表しました。参照：http : //alistapart.com/article/boom
これがその記事の抜粋です。
CSS2には、連続メディア（スクロールバーなど）とは対照的に、ページングメディア（紙など）の概念があります。スタイルシートは、ページのサイズとそのマージンを設定できます。ページテンプレートには名前を付けることができ、要素には印刷する名前付きページを指定できます。また、ソースドキュメントの要素によって強制的に改ページが行われる場合があります。以下は、使用したスタイルシートのスニペットです。
@page {
size: 7in 9.25in;
margin: 27mm 16mm 27mm 16mm;
}
米国に拠点を置く出版社がいるため、ページサイズはインチで指定されていました。私たちはヨーロッパ人なので、メートル法の測定を続けました。CSSは両方を受け入れます。
ページサイズとマージンを設定した後、適切な場所に改ページがあることを確認する必要がありました。次の抜粋は、章と付録の後に改ページが生成される方法を示しています。
div.chapter, div.appendix {
page-break-after: always;
}
また、CSS2を使用して名前付きページを宣言しました。
div.titlepage {
page: blank;
}
つまり、タイトルページは「空白」という名前のページに印刷されます。CSS2は名前付きページの概念を記述しましたが、それらの値はヘッダーとフッターが利用可能な場合にのみ明らかになります。
とにかく…
A4を印刷したいので、もちろん異なる寸法が必要になります。
@page {
size: 21cm 29.7cm;
margin: 30mm 45mm 30mm 45mm;
/* change the margins as you want them to be. */
}
記事では改ページの設定などについて詳しく説明しているので、完全に読みたいと思うかもしれません。
あなたの場合、トリックは最初に印刷CSSを作成することです。最近のほとんどのブラウザー（> 2005）はズームをサポートしており、印刷CSSに基づいてWebサイトを表示できます。
ここで、Web表示を少し違ったものにして、ほとんどのブラウザー（古いものを含む）にも適合するようにデザイン全体を適応させる必要があります。そのためには、Web CSSファイルを作成するか、印刷CSSの一部をオーバーライドする必要があります。Webディスプレイ用のCSSを作成するときは、ブラウザーのサイズはどのようなものでもかまいません（「モバイル」から「大画面TV」まで考えてください）。意味：Web CSSの場合、ページ幅と画像幅は、可変幅（％）を使用して設定し、できるだけ多くのディスプレイデバイスとWebブラウジングクライアントをサポートするのが最適です。
編集（26-02-2015）
今日、たまたまSmashingMagazineで、HTMLとCSSを使用した印刷用のデザインに飛び込んでいる別のより最近の記事に偶然遭遇しました。
編集（30-10-2018）
これはsize有効なCSS3ではないという点で注目されました。これは確かに正しいです。記事に記載されているコードを繰り返しただけです（上記のように）古き良きCSS2でした（記事を見て、この回答は最初に公開されました）。とにかく、コピーと貼り付けに便利なCSS3コードを次に示します。
@media print {
body{
width: 21cm;
height: 29.7cm;
margin: 30mm 45mm 30mm 45mm;
/* change the margins as you want them to be. */
}
}
本当にピクセルが必要だと思う場合（実際にはピクセルの使用を避ける必要があります）、印刷用の正しいDPIを選択するように注意する必要があります。
- 72 dpi（ウェブ）= 595 X 842ピクセル
- 300 dpi（印刷）= 2480 X 3508ピクセル
- 600 dpi（高品質印刷）= 4960 X 7016ピクセル
しかし、私は面倒を避け、使用するクライアントに応じて発生する可能性のあるグリッチのレンダリングを回避するため、サイズ設定にcm（cm）またはmm（mm）を使用します。