web-dev-qa-db-ja.com

A4用紙サイズのページにHTMLページを作成する方法？

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

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

わかりやすくするために、HTMLページにはテキストのみ（画像などは含まない）を含め、<br>タグは含まれないようにします。

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

htmlcssprinting
327
Zabba

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ディスプレイを少し違った外観にして、デザイン全体を大部分のブラウザ（2005年以前のものも含む）に合うように適応させたいと思うでしょう。そのためには、Web CSSファイルを作成するか、印刷CSSの一部をオーバーライドする必要があります。 Web表示用のCSSを作成するときは、ブラウザのサイズは任意であることに注意してください（「モバイル」から「大画面テレビ」までを考えてください）。意味：Web CSSでは、ページ幅と画像幅はできるだけ多くのディスプレイデバイスとWebブラウジングクライアントをサポートするために可変幅（％）を使用して設定するのが最善です。

EDIT（26-02-2015）

今日、私はたまたま最近の別の SmashingMagazineの記事 に出会いました。これはHTMLとCSSを使った印刷のデザインにも飛び込んでいます。

EDIT（30-10-2018）

sizeは有効なCSS3ではないという点で私の注意を喚起しました。それは確かに正しいです - 私は単に記事で引用されたコードを繰り返しました。そしてこの答えは最初に公開されました）。とにかく、ここにあなたのコピーアンドペーストの便利さのための有効な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（Web）= 595 X 842ピクセル
  • 300 dpi（印刷）= 2480 x 3508ピクセル
  • 600 dpi（高品質印刷）= 4960 x 7016ピクセル

それでも、私は面倒を避け、サイジングにcm（センチメートル）またはmm（ミリメートル）を使用します。これにより、使用するクライアントによっては発生する可能性があるグリッチのレンダリングが回避されます。

261
e-sushi

WebブラウザにA4と同じピクセルサイズでページを表示させることはかなり簡単です。しかし、物事がレンダリングされるときにいくつかの癖があるかもしれません。

モニタに72 dpiが表示されると仮定すると、次のようなものを追加できます。

<!DOCTYPE html>
<html>
  <head>
    <style>
    body {
        height: 842px;
        width: 595px;
        /* to centre page on screen*/
        margin-left: auto;
        margin-right: auto;
    }
    </style>
  </head>
  <body>
  </body>
</html>
62
Tim McNamara

A4サイズは 210×297mm

そのため、CSSを使用してHTMLページをそれらのサイズに合わせて設定できます。

html,body{
    height:297mm;
    width:210mm;
}
31
zurfyx

各ページでセクションを作成し、下のコードを使用して余白、高さ、および幅を調整します。

A4サイズを印刷している場合.

それからユーザー

Size : 8.27in and 11.69 inches

@page Section1 {
    size: 8.27in 11.69in; 
    margin: .5in .5in .5in .5in; 
    mso-header-margin: .5in; 
    mso-footer-margin: .5in; 
    mso-paper-source: 0;
}

div.Section1 {
    page: Section1;
}

それから、すべてのコンテンツを含むdivを作成してください。

<div class="Section1"> 
    type your content here... 
</div>

または

@media print {
    .page-break { 
        height: 0; 
        page-break-before: always; 
        margin: 0; 
        border-top: none; 
    }
}

body, p, a,
span, td { 
    font-size: 9pt;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    margin-left: 2em; 
    margin-right: 2em;
}

.page {
    height: 947px;
    padding-top: 5px;
    page-break-after: always;   
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    border-bottom: 1px solid #000;
}
20
Pir Abdul

私はHTMLを使用して、実際の用紙に実際のサイズで正しく印刷されたレポートを生成しました。

CSSファイルの単位としてmmを慎重に使用するのであれば、少なくとも1ページは問題ないはずです。ただし、ブラウザの印刷ズームを変更すると、人々はあなたを困らせることができます。

私がしていたことはすべて1ページであったことを覚えているように思われるので、ページ付けについて心配する必要はありませんでした - それはもっと難しいかもしれません。

16
Will Dean
<link rel="stylesheet" href="/css/style.css" type="text/css">
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print">

通常のstyle.cssでは、

table.tableclassname {
  width: 400px;
}

あなたのprint.cssに：

table.tableclassname {
  width: 16 cm;
}
12
Jacob

私はこれを見つけた同様の問題を探しています - http://www.indigorose.com/forums/archive/index.php/t-13334.html

A4はドキュメントフォーマットです。画面のイメージは画像の解像度に依存します。例えば、A4サイズのドキュメントは次のようにサイズ変更されます。

  • 72 dpi（Web）= 595 X 842ピクセル
  • 300 dpi（印刷）= 2480 x 3508ピクセル（これは私が知っているとおり「A4」、つまり「210 mm x 297 mm @ 300 dpi」です）
  • 600 dpi（印刷）= 4960 x 7016ピクセル
10
Wojciech Bednarski

PPIとDPIは、ドキュメントがブラウザからどのように印刷されるかに全く影響を与えません。画像を印刷する場合、プリンタは画面のドットピッチや画像のDPIなどの情報を取得しません。画像の印刷方法に比例したサイズで印刷されます。ブラウザのプリントプロセッサは、画像のDPIを72dpiのようなやや低い値から、ドキュメントの残りの部分のDPIまで増加させます。画像が半ページ幅で表示され、物理的に約4インチの幅で表示されるとします。ブラウザで正しく表示するには、画像のピクセル幅は約300ピクセルになります。公称300DPIで印刷されるまでに、プロセッサはピクセルを追加します。そして画像は300 DPIで4 "である約1200 pxに成長します。

テキストのようなベクトルまたは非ピクセルベースの要素に関しては、プリンタはドライバからスクリーンドットピッチやブラウザ幅などに関係のない独自のDPIを選択します。ブラウザの幅が3000pxの場合、プリントプロセッサは適切にテキストを折り返します。

印刷表示を作成するのが難しいのは、ブラウザとプリンタがそれぞれテキストサイズ（pt、em、px）と間隔を独自の方法で解釈するからです。使用するプリンタ、ブラウザ、さらにはOSによっては、1ページあたりの行数と文字数が異なります。ブラウザとプリンタを使用してコンピュータをテストし、640 x 900 pxのボックスにテキストを表示してその印刷に最適であることがわかったとしても、印刷しようとする次の人は別の方法で印刷できます。各プリンタとブラウザが毎回同じになるように強制する方法は実際にはありません。

ピクセルを忘れてDPIを忘れてしまいました。ピクセルを使用できるのは、プリンタの印刷可能領域の幅をシミュレートするテーブル幅を設定することだけです。その場合、私は640ピクセル幅が近いことがわかりました。

10
Quintin Humphreys

この話題はかなり古いことを私は知っていますが、その話題についての私の経験を共有したいと思います。実際、私は日々の報告に役立つモジュールを探していました。私は（Word、Latex、OOなどの代わりに）HTML + CSSでドキュメントとレポートを書いています。目的は、A4紙にそれらを印刷して友人と共有することです。検索する代わりに、「ページ」、ページ番号、要約、ヘッダーを処理できる単純なlibを実装するための小さな面白いコーディングセッションを行うことにしました。 、フッター、....最後に、私は~~ 2時間でそれをやった、そして私はそれが今までで最高のツールではないことを知っている、しかしそれは私の目的のためにはほとんど問題ない。あなたは私のレポでこのプロジェクトを見てみることができ、あなたのアイデアを共有することを躊躇しません。それはあなたが100％で探しているものではないかもしれませんが、私はこのモジュールがあなたを助けることができると思います。

基本的に私は本文「width：200mm」のページを作成します。そして高さの容器：290mm（A4より小さい）。その後、改ページ後を使用しました。だからブラウザの "印刷"オプションはいつページを分割するかを知っている。

レポ： https://github.com/kursion/jsprint

8
Yves Lange

私はグーグルで検索した後にこの解決策を見た、 "A4 CSSページテンプレート"（codepen.io）を検索してください。 <page>タグを使用して、ブラウザにA4（A3、A5、縦長）サイズの領域を表示します。このタグの内側にはコンテンツが表示されていますが、絶対位置は依然としてブラウザ領域を基準にしています。

body {
  background: rgb(204,204,204); 
}
page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size="A4"] {  
  width: 21cm;
  height: 29.7cm; 
}
page[size="A4"][layout="portrait"] {
  width: 29.7cm;
  height: 21cm;  
}
@media print {
  body, page {
    margin: 0;
    box-shadow: 0;
  }
}
<page size="A4">A4</page>
<page size="A4" layout="portrait">A4 portrait</page>

これは他のcss/js-libraryが含まれていなくても私にとってはうまくいきます。現在のブラウザ（IE、FF、Chrome）で動作します。

8
Cas Knook

技術的には可能ですが、すべてのブラウザでページが画面に表示されるとおりに印刷されるようにするには多くの作業が必要です。また、ほとんどのブラウザはURL、印刷日、ページ番号を印刷時に強制しますが、これは必ずしも望ましいことではありません。これを変更したり無効にしたりすることはできません。

代わりに、画面上のコンテンツに基づいてPDFを作成し、ダウンロードおよび/または印刷用にPDFを提供することをお勧めします。 最も利用可能なPDFライブラリ が支払われていますが、基本的なPDFを作成するための利用可能な 無料の代替方法 がいくつかあります。

6
Prutswonder

私は1998年以来A4ページに印刷するためにコマーシャルレポートで 680px を使用してきました。700pxは余白のサイズによっては正しく収まりません。最近のブラウザでは、プリンタのページに合わせてページを縮小できますが、680ピクセルを使用すると、ほとんどのブラウザで正しく印刷されます。

それはあなたにとってのHTMLです code snippet を実行してde結果を見てください。

window.print();
<table width=680 border=1 cellpadding=20 cellspacing=0>
<tr><th>#</th><th>name</th></tr>
<tr align=center><td>1</td><td>DONALD TRUMP</td></tr>
<tr align=center><td>2</td><td>BARACK OBAMA</td></tr>
</table>

JSFiddle：

https://jsfiddle.net/ajofmm7r/ /

5
lynx_74

A4ページの縦横比を想定してレイアウトを設定することは完全に可能です。それに応じて幅と高さを設定するだけでよいでしょう（おそらく信頼性があるかどうかはわかりませんが、window.innerHeightおよびwindow.innerWidthで確認してください）。

トリッキーな部分はA4を印刷することです。たとえばJavascriptは、window.printメソッドを使用した基本的な印刷ページのみをサポートしています。 @Prutswonderが提案しているように、Webページから _ pdf _ を作成することはおそらくこれを行うための最も洗練された方法です（最初にPDFドキュメントを提供すること以外）。しかし、これは考えられるほど簡単ではありません。これは、HTMLからPDFを作成するためのすべてのオープンソースのJavaクラスの説明を含むリンクです。 http://www.javaworld.com/javaworld/jw-04-2006/jw-0410-html.html 。

明らかに、A4プロポーショナル印刷でPDFを作成したら、それはあなたのページのきれいなA4印刷になるでしょう。それが時間投資の価値があるかどうかは別の問題です。

3
FK82

やり方はたくさんあります。

html,body{
    height:297mm;
    width:210mm;
}


html,body{
    height:29.7cm;
    width:21cm;
}

html,body{
    height: 842px;
    width: 595px;
}
2
Nalan Madheswaran