[解決済み] A4用紙サイズのHTMLページを作るには？

質問内容

HTMLのページを、例えばMS WordでA4サイズのページのように動作させることは可能ですか？

基本的には、ブラウザでHTMLページを表示し、A4サイズのページの寸法で内容をアウトライン化できるようにしたいです。

簡単のために、HTMLページにはテキストのみ（画像などなし）で、かつ <br> タグを使用します。

また、HTMLページを印刷すると、A4サイズの紙面として出力されることになる。

解決方法は？

昔、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;
}

<ブロッククオート

つまり、タイトルページは "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サイトが表示できるようになっているはずです。

次に、ウェブ表示の見た目を少し変え、全体のデザインをほとんどのブラウザー（2005年以前の古いものも含む）に適合させたいと思うでしょう。そのためには、ウェブ用のCSSファイルを作成するか、印刷用のCSSの一部をオーバーライドする必要があります。ウェブ表示用のCSSを作成する場合、ブラウザのサイズは問わない（「モバイル」から「大画面テレビ」まで）ことを忘れないでください。つまり、ウェブ用のCSSでは、ページ幅と画像幅を可変幅（%）で設定し、できるだけ多くの表示デバイスとウェブブラウザに対応するのが最適です。

編集 (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 ピクセル
• 300dpi（印刷）＝2480×3508ピクセル
• 600dpi（高画質プリント）＝4960×7016ピクセル

とはいえ、私なら面倒なことは避けて、単純に cm (センチメートル) または mm (ミリメートル) を使用することで、使用するクライアントによって生じる可能性のあるレンダリングの不具合を回避することができます。