ピクセル

Pixel

web general beginner

デジタル画像や画面を構成する、小さな色の点または表示上の基準単位のこと。

概要（サマリー）

ピクセルとは、デジタル画像や画面を構成する、小さな色の点または表示上の基準単位のことである。モザイク画を作る一枚一枚のタイルに近く、多数のピクセルが集まることで写真や文字が見える。

画像の横幅が1200ピクセル、縦幅が800ピクセルなら、横1200個、縦800個の画素で構成される。画素数が多ければ細部を表現しやすいが、ファイル容量も大きくなりやすい。

ディスプレイにも色を表示する小さな点が並んでいる。同じ画面サイズでも点が密集しているほど精細に見える。高密度ディスプレイでは、一つの表示上の点を複数の物理ピクセルで描くことがある。

CSSではpxを長さの単位として使う。

.card {
  width: 320px;
  padding: 16px;
}

このpxはCSSピクセルという論理的な基準であり、端末の物理ピクセルと常に1対1ではない。ブラウザの拡大率や画面密度によって実際の表示は変わる。

画像自体の画素数と、Webページ上で表示するCSS上の幅は別に指定できる。大きな画像を小さく表示することもできるが、必要以上に大きい画像は通信量を増やすため、用途に合うサイズへ最適化することが大切である。

画像のピクセル数と表示サイズ、印刷サイズの関係は、次の計算ツールで実際に確かめられる。

Web制作では%、rem、vwなども使う。固定的な細かい寸法にはpxが便利だが、文字サイズやレイアウトではレスポンシブ対応や読みやすさを考えて相対単位を選ぶ場合がある。

違う。端末の密度や表示倍率によって、CSSの1pxに使われる物理ピクセル数や見かけの大きさは変わる。

元画像の品質、圧縮、レンズ、表示サイズなども影響する。画素数だけでは品質は決まらない。

用途による。柔軟なレイアウトや文字の拡大へ対応するには相対単位が向く場面も多い。