質問編集履歴
18
質問3の訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -67,9 +67,9 @@
|
|
|
67
67
|
|
|
68
68
|
###【質問3】スマホにもOSの解像度はあるのでしょうか？
|
|
69
69
|
|
|
70
|
-
OSの解像度
|
|
70
|
+
WindowsにはOSの解像度（システムDPI）とモニタの解像度（モニタDPI）の2つあるかと存じます。
|
|
71
|
-
|
|
71
|
+
iOSやAndroidなどのスマホにも別々のDPIがあるなら、それぞれの値を教えていただけると嬉しいです。
|
|
72
|
-
確認できるWebサイトや書籍等あれば教えてください。
|
|
72
|
+
確認できるWebサイトや書籍等があれば教えてください。
|
|
73
73
|
|
|
74
74
|
###【質問4】dpiスケーリングとviewportについて詳しく知りたい
|
|
75
75
|
|
17
訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
File without changes
|
16
訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
CSSで 100px * 100px の線を表示して、Windows7のGoogleChromeで表示してA4の用紙に印刷を行いました。
|
|
52
52
|
定規で測ると2.65cmありましたので、96dpiで印刷されていると思います。
|
|
53
53
|
500pxの画像を表示しても試しましたが、定規で測ると13.25cmあり、96dpiで印刷されました。
|
|
54
|
-
どこで指定した解像度なのか調べるために、OSの解像度を 大（L） にした環境で印刷しましたが、大きさは変わりませんでした。
|
|
54
|
+
どこで指定した解像度なのか調べるために、[このやり方](http://win.just4fun.biz/Windows%E8%A8%AD%E5%AE%9A%E9%96%A2%E9%80%A3/Windows%207%E3%81%AEDPI%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95.html)で、Windows7のOSの解像度を 大（L） にした環境で印刷しましたが、大きさは変わりませんでした。
|
|
55
55
|
OSの解像度で設定されたものではないとすると、ブラウザ側で96dpiという設定をしているのでしょうか？
|
|
56
56
|
ブラウザの画面を印刷したときの解像度はどこで設定されたものなのか知りたいです。
|
|
57
57
|
|
15
訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
スマホサイトを作ったことがありますが、アプリ制作の知識や経験はありません。
|
|
2
2
|
Retina（高精細）ディスプレイへ対応したスマホサイトを作るときは、画像を2倍または3倍で作ればいいよねという程度の知識しかなく、ピクセルやドット、DPI、PPI、解像度まわりについて理解していなかったので、ここ数日調べております。
|
|
3
|
-
私には難解
|
|
3
|
+
私には難解すぎて、解像度について考えてる夢をみました。
|
|
4
|
+
理解できていないので、寝ても覚めても解像度について考えています。
|
|
4
5
|
いくつか疑問点があり、ご存じの方いればご教示ください。
|
|
5
6
|
|
|
6
7
|
調べている途中のため、私の認識に誤りがあるかもしれません。
|
14
訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
|
|
62
62
|
この96dpi、72dpiというのはOSの解像度を指しているのかと思います。
|
|
63
63
|
|
|
64
|
-
例えば、Windowsの場合だと[こ
|
|
64
|
+
例えば、Windowsの場合だと[このやり方](http://win.just4fun.biz/Windows%E8%A8%AD%E5%AE%9A%E9%96%A2%E9%80%A3/Windows%207%E3%81%AEDPI%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95.html)で、OSの解像度を変更することが可能かと思います。
|
|
65
65
|
デフォルトでは小の96dpiになっており、今も変わらないと思うのですが、私の認識は誤りでしょうか。
|
|
66
66
|
|
|
67
67
|
###【質問3】スマホにもOSの解像度はあるのでしょうか？
|
13
訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
File without changes
|
12
訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
スマホサイトを作ったことがありますが、アプリ制作の知識や経験はありません。
|
|
2
2
|
Retina（高精細）ディスプレイへ対応したスマホサイトを作るときは、画像を2倍または3倍で作ればいいよねという程度の知識しかなく、ピクセルやドット、DPI、PPI、解像度まわりについて理解していなかったので、ここ数日調べております。
|
|
3
|
-
私には難解で
|
|
3
|
+
私には難解で解像度について考えてる夢をみました。
|
|
4
4
|
いくつか疑問点があり、ご存じの方いればご教示ください。
|
|
5
5
|
|
|
6
6
|
調べている途中のため、私の認識に誤りがあるかもしれません。
|
11
訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
|
|
18
18
|
######画像解像度
|
|
19
19
|
画像解像度はピクセルの総数のことで、縦横のピクセル数を640px * 480px のように表す。
|
|
20
|
-
ディスプレイやブラウザ上で表示するときにdpiまたはppiは全く関係ない。
|
|
20
|
+
画像をディスプレイやブラウザ上で表示するときにdpiまたはppiは全く関係ない。
|
|
21
21
|
|
|
22
22
|
######OSの解像度
|
|
23
23
|
Windowsは96dpiで、Macは72dpiだが、今はdpiの設定を変更できる。
|
10
訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -28,7 +28,6 @@
|
|
|
28
28
|
######ディスプレイの解像度
|
|
29
29
|
画像解像度と同じく、ピクセル総数のこと。
|
|
30
30
|
フルHDの場合は、1920px * 1080px のように縦横のピクセル数で表す。
|
|
31
|
-
ppiで表すことは可能だが、関係ない。
|
|
32
31
|
Windows7の場合だと コンパネ > ディスプレイ > 画面の解像度 から変更できるけど、これはディスプレイに描画する解像度の設定。
|
|
33
32
|
ディスプレイは物理ピクセルがあり、フルHD対応のディスプレイの場合は、1920px * 1080px のピクセルが敷き詰められている。
|
|
34
33
|
この一つ一つのピクセルに色情報を与えることで、画面を表示している。
|
9
訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
そのときはご指摘ください。
|
|
8
8
|
|
|
9
9
|
調べている中で、dpiとppiは明確わけるべきという意見も見受けられましたが、この質問の中では、印刷に関するものはdpiと表記し、それ以外はdpiとppiを同義として扱います。
|
|
10
|
-
ディスプレイや画像はピクセルベースのため、ppiと表記するのが適当かと存じますが、AndroidアプリやDPIスケーリングなどdpiが用いられるため同義として扱います
|
|
10
|
+
ディスプレイや画像はピクセルベースのため、ppiと表記するのが適当かと存じますが、AndroidアプリやDPIスケーリングなどdpiが用いられるため同義として扱います。ご了承ください。
|
|
11
11
|
|
|
12
12
|
解像度と一言で言っても下記のように分かれているかと思います。
|
|
13
13
|
|
8
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -6,6 +6,9 @@
|
|
|
6
6
|
調べている途中のため、私の認識に誤りがあるかもしれません。
|
|
7
7
|
そのときはご指摘ください。
|
|
8
8
|
|
|
9
|
+
調べている中で、dpiとppiは明確わけるべきという意見も見受けられましたが、この質問の中では、印刷に関するものはdpiと表記し、それ以外はdpiとppiを同義として扱います。
|
|
10
|
+
ディスプレイや画像はピクセルベースのため、ppiと表記するのが適当かと存じますが、AndroidアプリやDPIスケーリングなどdpiが用いられるため同義として扱いますのでご了承ください。
|
|
11
|
+
|
|
9
12
|
解像度と一言で言っても下記のように分かれているかと思います。
|
|
10
13
|
|
|
11
14
|
######印刷解像度
|
7
訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
Windows7の場合だと コンパネ > すべてのコントールパネル項目 > ディスプレイ の 小（100%）、中（M）、大（L）で変更できる値のこと。
|
|
24
24
|
|
|
25
25
|
######ディスプレイの解像度
|
|
26
|
-
画
|
|
26
|
+
画像解像度と同じく、ピクセル総数のこと。
|
|
27
27
|
フルHDの場合は、1920px * 1080px のように縦横のピクセル数で表す。
|
|
28
28
|
ppiで表すことは可能だが、関係ない。
|
|
29
29
|
Windows7の場合だと コンパネ > ディスプレイ > 画面の解像度 から変更できるけど、これはディスプレイに描画する解像度の設定。
|
6
訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -100,7 +100,7 @@
|
|
|
100
100
|
72ppiまたは96ppiにする合理的な理由はありますでしょうか？
|
|
101
101
|
また、皆さんはいくつの解像度で制作しているのでしょうか？
|
|
102
102
|
|
|
103
|
-
私
|
|
103
|
+
私は72ppiまたは96ppiでWebサイトをデザインするメリットは、デザインしたものを印刷したときにディスプレイの表示とほぼ同じぐらいの大きさで印刷されるということぐらいかと考えております。
|
|
104
104
|
|
|
105
105
|
ご存じの方いれば、ご教示ください。
|
|
106
106
|
明確な回答じゃなくても、参考サイトや書籍を教えていただけるだけでも嬉しいです。
|
5
訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -26,9 +26,10 @@
|
|
|
26
26
|
画面解像度と同じく、ピクセル総数のこと。
|
|
27
27
|
フルHDの場合は、1920px * 1080px のように縦横のピクセル数で表す。
|
|
28
28
|
ppiで表すことは可能だが、関係ない。
|
|
29
|
-
Windows7の場合だと コンパネ > ディスプレイ > 画
|
|
29
|
+
Windows7の場合だと コンパネ > ディスプレイ > 画面の解像度 から変更できるけど、これはディスプレイに描画する解像度の設定。
|
|
30
|
-
ディスプレイは物理ピクセル
|
|
30
|
+
ディスプレイは物理ピクセルがあり、フルHD対応のディスプレイの場合は、1920px * 1080px のピクセルが敷き詰められている。
|
|
31
|
+
この一つ一つのピクセルに色情報を与えることで、画面を表示している。
|
|
31
|
-
Windowsの画
|
|
32
|
+
Windowsの設定で「画面の解像度」を 1920px * 1080px に変更し、ディスプレイの物理ピクセルと同じ数に設定するとドットバイドットで描画される。
|
|
32
33
|
|
|
33
34
|
######ブラウザの表示領域
|
|
34
35
|
解像度とは呼ばないが、ブラウザがWebサイトを表示する領域。
|
4
訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -26,7 +26,9 @@
|
|
|
26
26
|
画面解像度と同じく、ピクセル総数のこと。
|
|
27
27
|
フルHDの場合は、1920px * 1080px のように縦横のピクセル数で表す。
|
|
28
28
|
ppiで表すことは可能だが、関係ない。
|
|
29
|
-
Windows7の場合だと コンパネ > ディスプレイ > 画像の解像度 から変更できる
|
|
29
|
+
Windows7の場合だと コンパネ > ディスプレイ > 画像の解像度 から変更できるけど、これはディスプレイに描画する解像度の設定。
|
|
30
|
+
ディスプレイは物理ピクセルもあり、フルHD対応のディスプレイの場合は、1920px * 1080px のピクセルが敷き詰められている。
|
|
31
|
+
Windowsの画像の解像度を 1920px * 1080px に設定するとドットバイドットで描画される。
|
|
30
32
|
|
|
31
33
|
######ブラウザの表示領域
|
|
32
34
|
解像度とは呼ばないが、ブラウザがWebサイトを表示する領域。
|
3
訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
|
|
11
11
|
######印刷解像度
|
|
12
12
|
1インチあたりに幾つのドットで印刷するかを表す。
|
|
13
|
-
dpiの値は、出力のときのみ関係するもので、画像やディスプレイには関係ない。
|
|
13
|
+
dpiの値は、出力のときのみ関係するもので、画像やディスプレイでの表示には直接関係しない。
|
|
14
14
|
|
|
15
15
|
######画像解像度
|
|
16
16
|
画像解像度はピクセルの総数のことで、縦横のピクセル数を640px * 480px のように表す。
|
2
訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
スマホサイトを作ったことがありますが、アプリ制作の知識や経験はありません。
|
|
2
|
-
Retina（
|
|
2
|
+
Retina（高精細）ディスプレイへ対応したスマホサイトを作るときは、画像を2倍または3倍で作ればいいよねという程度の知識しかなく、ピクセルやドット、DPI、PPI、解像度まわりについて理解していなかったので、ここ数日調べております。
|
|
3
3
|
私には難解で夢の中でも解像度について考えております。
|
|
4
4
|
いくつか疑問点があり、ご存じの方いればご教示ください。
|
|
5
5
|
|
1
訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
dpiスケーリングはブラウザが行っているのでしょうか？
|
|
83
83
|
metaでviewportの設定することでdpiスケーリングされるのでしょうか？
|
|
84
84
|
viewportとdpiスケーリングは関係ないのでしょうか？
|
|
85
|
-
|
|
85
|
+
レンダリング前にdpiスケーリングを実施するというのは、もう少し具体的に言うとどのタイミングなのでしょうか？
|
|
86
86
|
Webサイトはサーバーからのレスポンスがあり、ブラウザが解析して描画しているかと思います。
|
|
87
87
|
ブラウザが解析するときにdpiスケーリングをして、描画しているのでしょうか？
|
|
88
88
|
|