blob: 9944e580f715b11fd75b817d99a4de0a5a475519 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
---
title: CSS pixel
slug: Glossary/CSS_pixel
tags:
- CSS
- CSS Pixel
- Glossary
- height
- length
- pixel
- size
- unit
- width
translation_of: Glossary/CSS_pixel
---
<p><strong>CSS Pixel</strong> —{{Glossary("CSS")}} で接尾辞 <code>px</code> とともに示されます— は、人間の目で負担なく快適に見ることができるけれどなるべく小さい、1 ドットの高さや幅におおよそ一致する、長さの単位です。定義によれば、これは閲覧者の目から腕の長さまで離れた位置での、画素密度 96DPI の単一ピクセルの物理的サイズです。</p>
<p>その定義には、もちろん大きな揺らぎがあります。「快適に見ることができる」や「腕の長さ」などの不正確な用語は、人から人へと伝えるうちに変化してしまいます。例えば、あるユーザーがデスクトップの前にある机に着くとき、そのディスプレイは一般的に、例えば携帯電話に向かうときと比べて、ユーザーの目からかなり遠い位置にあります。</p>
<p>そのため、一般的には「単位 <code>px</code> を使うときに得られる値は、スクリーンの実際の画素密度に関係なく、スクリーンの 1 インチに <code>96px</code> とほとんど等しくなる距離です。」と言えば事足ります。あるいは、「もしユーザーが画素密度 266DPI の電話を持っていて、そのスクリーン上に幅 <code>96px</code> の要素がある場合、その実際の幅は 266 {{Glossary("device pixels")}} だろう。」とも言えます。</p>
<h2 id="Learn_more" name="Learn_more">関連項目</h2>
<h3 id="Technical_reference" name="Technical_reference">技術リファレンス</h3>
<ul>
<li><a href="https://drafts.csswg.org/css-values-3/#absolute-lengths">CSS Values and Units Module, section 5.2: Absolute Lengths</a></li>
</ul>
<h3 id="Learn_about_it" name="Learn_about_it">これについて学習する</h3>
<ul>
<li><a href="https://hacks.mozilla.org/2013/09/css-length-explained/">CSS Length Explained</a> on the MDN Hacks Blog</li>
</ul>
|
