Skip to main content
本文に 1062 文字追加
ソース リンク
supa
  • 5,399
  • 4
  • 18
  • 41
* {
  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>

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

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

* {
  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>

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

ソース リンク

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

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

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

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

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

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

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

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

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

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