9

htmlページをブラウザ標準の印刷機能で印刷する場合、縦向きのA4用紙に入る横幅は最大何ピクセルになるでしょうか?

css

* {
  box-sizing: border-box;
}
.test1 {
  width: 1366px;
  border: 10px solid red;
}
.test2 {
  width: 1280px;
  border: 10px solid green;
}
.test3 {
  width: 1024px;
  border: 10px solid blue;
}

html

<body>
  <div class="test1">test1 1366px</div>
  <div class="test2">test2 1280px</div>
  <div class="test3">test3 1024px</div>
</body>

上記のようなページでプレビューを試したところ、Chrome と IE11、Edge では
1366px → 用紙からはみ出る
1280px → 用紙からはみ出る
1024px → 用紙内に収まる
という結果になりました。
FireFoxでのみ、すべてのサイズが用紙内に収まりました。

1024px程度の幅でページを作成すれば、すべてのブラウザの標準の印刷機能でA4縦の幅に収まると考えてよいのでしょうか?
それとも、これらのサイズは端末の環境(ディスプレイなど)に依存するものなのでしょうか?
A4用紙に該当するピクセル数を算出する方法がありましたら教えてください。

3
  • 2
    本家 Stack Overflow における、関連するかもしれない質問です: "How to make a HTML Page in A4 paper size page(s)?"
    – nekketsuuu
    Commented 2018年7月8日 13:28
  • 接続されているプリンタもしくはプリンタ相当(PDF等)ドライバのdpiや、ブラウザのデフォルト印刷設定に依存するのではないですか? A4縦とは限らないでしょうし、余白/ヘッダ/フッタ設定等も影響すると思われます。CSSのメディアクエリで現在値を取得できるかもしれません。
    – kunif
    Commented 2018年7月8日 14:59
  • 私の端末では、IE11、Edgeの場合、「縮小して印刷する」を選択しても、1366px、1280pxは用紙からはみ出ました。また、Chromeの場合、倍率が100%で1024pxが収まります。どのような原因が考えられるでしょうか。
    – jirolabo
    Commented 2018年7月9日 13:59

3 件の回答 3

9

pxは視野角を基準として決められていますが、プリンターの場合は標準の1px = 1/96th of 1inが適用されます(W3C CSS3)。A4の横幅が8.27インチなので、8.27 x 96 = 794pxです。

それでは1024px程度の幅でページを作成すれば、ブラウザの印刷機能の方でA4縦の幅に収まるかというと、FireFox、IE11、Edgeでは「縮小して全体を印刷する」がデフォルトとなっているため、またChromeの方は「縮小して全体を印刷する」という設定はないのですが自動的にその程度までは「縮小して全体を印刷する」仕様になっているためです。なお、linux版のChromeは勝手に「縮小して全体を印刷する」機能はなく1024pxの幅でもはみ出して印刷されます。

また、IE11、Edge が「縮小して全体を印刷する」にしても1280pxでは用紙からはみ出るようになるのは、規格とかに関係するものではなくて IE11、Edge の仕様だと思います。

印刷に関してpxを使用することに関しては、W3Cの'CSS: em, px, pt, cm, in…'というページで以下のようになっていて、推奨はされていませんが使うなとはなっていません。Webの開発の場合、画面がメインで印刷はそれほど重視されません。画面レイアウトではpxを使う必要があるので、印刷でも使いたいというのが普通です。そういう要望に沿うため、pxを CSS 2.0までは相対長さ単位であったものを、1px = 1/96 inchに決めたわけです。歴史が浅いためブラウザーの対応が十分でないので注意して使う必要があるので推奨はされていないですが、最近のブラウザーを使うという前提であれば印刷にpxを使っても問題はないと思われます。

画像の説明をここに入力

6
  • 本質問は仕様に関するものというより、Chrome、IE11、Edge、FireFox各ブラウザーで動作する(仕様の範囲内での)現実解を尋ねるものではありませんか? 「1024px程度で収まる」と書かれているのに「794pxです」「pxを使っても問題はない」という回答にどれほどの意義があるのかちょっとわかりませんでした。
    – sayuri
    Commented 2018年7月9日 3:57
  • ヘッドレスChrome で PDF の帳票を作成したい場合は、A4縦であれば横幅が794px で設計するといいですよ。そういう意味で意義があります。 Commented 2018年7月9日 5:24
  • Edge、IE11では「縮小して全体を印刷する」(おそらくこれがデフォルト)を選択しても、1366px、1280pxは用紙からはみ出ます。これは端末依存の現象なのでしょうか。
    – jirolabo
    Commented 2018年7月9日 14:01
  • divの方だけではなくて、bodyの方にもwidth:1366pxを設定してみてください。用紙内に収まると思います。細かい話はブラウザーによって違ってきます。 Commented 2018年7月9日 14:14
  • body にも width:1366px を設定してみましたが結果変わらず(用紙内に収まらない)です。
    – jirolabo
    Commented 2018年7月9日 14:28
4

単位pxはCSS 2.1で定義が変更されています。

CSS 2.0までは相対長さ単位

Relative units are:
- px: pixels, relative to the viewing device

CSS 2.1からは絶対長さ単位

The absolute units consist of the physical units (in, cm, mm, pt, pc) and the px unit:
- px: pixel units — 1px is equal to 0.75pt.

とは言え、CSS 2.1以降でも

The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length.

pxは物理的な長さではなく視野角を基準とした長さでもあると定められています。つまり、目からの距離で長さも異なります。また各ブラウザーは歴史的経緯もあり仕様通りというわけでもないと思います。そのためCSS 2.1にも

For lower-resolution devices, and devices with unusual viewing distances, it is recommended instead that the anchor unit be the pixel unit. For such devices it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel.

とモニタのような低解像度デバイスにはpxを使用し、プリンターのような高解像度デバイスには他の絶対長さ単位を使用することを推奨しています。

というわけで、印刷を考慮するのであれば、pxでなく、incmmmptpcなどの単位を使用してください。CSSではメディアタイプを指定することでscreenprintと分けて指定することができます。

1
  • 2
    CSS3では、For print media at typical viewing distances, the anchor unit should be one of the standard physical units (inches, centimeters, etc). Commented 2018年7月9日 3:33
1

1024px程度の幅でページを作成すれば、すべてのブラウザの標準の印刷機能でA4縦の幅に収まると考えてよいのでしょうか?
それとも、これらのサイズは端末の環境(ディスプレイなど)に依存するものなのでしょうか?

プリンタの印刷可能領域もありますし、ブラウザが拡縮する仕様の影響もあると推測します。

各メーカーのプリンタドライバとブラウザの仕様に詳しい方がいれば分かるかも知れませんが、この点についてはハッキリ分かりません。
現実解として970px幅にコンテンツを収めている帳票デザインを見たことはあります。

A4用紙に該当するピクセル数を算出する方法がありましたら教えてください。

CSS で A4幅 210mm を指定すると、794px にマッピングされます。

https://codepen.io/DriftwoodJP/pen/pZvJOv

* {
  box-sizing: border-box;
}

// .test1 {
//   width: 1366px;
//   border: 10px solid red;
// }
// .test2 {
//   width: 1280px;
//   border: 10px solid green;
// }
// .test3 {
//   width: 1024px;
//   border: 10px solid blue;
// }
@page {
  size: A4;
  margin: 0;
}

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

.mm {
  width: 210mm;
  border: 10px solid gray;
}

.pixel {
  width: 794px;
  border: 10px solid gray;
}
<div class='test1'>
  test1 1366px
</div>
<div class='test2'>
  test2 1280px
</div>
<div class='test3'>
  test3 1024px
</div>
<div class='mm'>
  mm 210mm
</div>
<div class='pixel'>
  Pixel 794px
</div>

物理的な長さがどのようにピクセル換算されるかについては、下記が参考になりました。

また、用紙サイズについては下記のサイトを参考にしています(96PPI)。

A4(794px * 1123px) で考えるとレイアウトしやすいのではないでしょうか。

私自身は幅可変の文章や表くらいしか扱ったことが無いので、このトピックの充実が楽しみです。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。