質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

17492閲覧

A4サイズをpxで表すには?

taishi.

総合スコア13

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/01/02 09:17

プリント作成サービスをつくろうと思っています。(wordのブラウザ版)
A4のサイズでプリントを作りたいとき実際のパソコンの画面でのサイズは何pxにすればよいのでしょうか。pcの解像度ごとに大きさが違うと知ってどうすればいいのかわからなくなってしまいました。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ご質問は、画面上にA4と同じサイズで表示したいという意味ではなくて、印刷した時にA4いっぱいになるpx数の話ですよね?
特に決まりはありません。
1x1のドット画像をA4いっぱいに引き延ばすこともできれば、高精細の1000万画素の写真をA4に収めることもできます。
ここで重要なのはDPI(dots per inch)で、1inchに何dot印刷するか、平たく言えば拡大率です。
それは印刷時の設定によるので、何とも言えません。

どういったシステムにしようとしているのかが分からないため、WEB上で作成した文書を印刷まで繋げる過程が想像できないのですが、プログラムでPDFを生成して印刷するのが確実かもしれません。
PDFには印刷設定をもろもろ含めることができるので、だいたいどんな環境でも印刷結果を共通化できると思われます。

それ以外だとCSSで整えたHTMLを直接印刷するための、印刷向けのCSS設定もあります。

CSSでの印刷時の設定は @page を使います。
また、その他の普通のCSSで、印刷時のみ有効化したい場合は @media print を使います。

この場合、サイズ指定は何ピクセルと考えるより、直接mmで指定するのが手っ取り早いと思います。

CSSで使用できる単位
https://w3g.jp/css/guide/units

ちなみにWordのブラウザ版、公式で出てますって言ったら出鼻くじかれちゃいます?
Microsoft Word Online

投稿2016/01/03 14:19

tozjp

総合スコア790

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

考慮すべき点については、SF6さんが書いていらっしゃますので、
その他として、
単純にA4と書いていらっしゃいますが、
1.用紙の縦横、両面、頁偶数、奇数、頁捲り、段組み、綴じ代:上、左、右
最近の複合機が持っている機能を調査した方が良いです。
⇒最大の障害は、メーカードライバ依存部分が公開される事が少ない。
解析を行っても、バージョン変更、機種変更で意味をなさなくなる。
2.機種毎の余白の扱いの違い。プリンタ側設定による違い。
簡単な例)フチなしプリントの有無やら
3.プリンタの基本解像度の違い、
プリンタの高解像度化に伴って、気にする事は少なくなりましたが
120、144、160、180などの違いによる、
小ドットでの罫線とフォントの扱い、余白の違い
(日本の様な書式、罫線、みてくれ命の帳票を作成する社会では、
WEB系印刷アプリはかなり、苦労するかも、妥協点を何処におくか。)
※単純に見える、Windowsのプリンタでのプロパティでさえ、
OS管理下の共通部分、メーカードライバ依存部分があり、
メーカードライバ依存部分に関しては、公開情報が無いか、少ないです。

DPI PPI違い
twip pixel dpi 違い
(twip はLinuxや、新規アプリでは死語でしょうが、Windowsの悪しき残滓が残っています。)

投稿2016/01/02 11:06

daive

総合スコア2028

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

スクリーンの縦横のdpiを取得する必要があります。
dpiはdot per inchの略で、1インチが何pxかを示します。
A4用紙はおおよそ8.27×11.69インチだから、8.27=width/xdpi、11.69=height/ydpiとなるようにすればいいです。

dpiはscreen.deviceXDPI screen.deviceYDPIで取得できることもありますが、できない場合もあります。

そこで、1×1インチのdiv要素を作り、実際に何pxか取得することでdpiが分かります。

javascript

1var etest = document.createElement("div"); //div要素を作る 2etest.style.cssText = "width: 1in; height: 1in; position:absolute; left: -1in; right: -1in"; 3 //position以降は作ったdiv要素が画面に表示されないためのもの 4document.documentElement.appendChild(etest); //bodyに追加 (実体を持たせる) 5var xdpi = etest.offsetWidth, ydpi = etest.offsetHeight; //縦横のdpi

【追記】
どうもこの方法では本来のdpiでなく論理dpiが出てくるようです。

投稿2016/01/02 10:31

編集2016/01/02 10:41
SF6

総合スコア23

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問