CSSピクセルの確認

CSSピクセルとは何か

CSSピクセルは、ブラウザが扱う論理的なピクセルです。
CSS（カスケーディング・スタイル・シート）で指定されたピクセルは、CSSピクセルに基づいて表示されます。
したがって、WebデザインにおいてはCSSピクセルが重要です。
CSSピクセルがデバイスの論理ピクセルとして説明されることもありますが、ここではCSSピクセルはあくまでもCSSに関するものとして定義します。

なお、CSSプロパティとCSSメディアクエリでは、対象領域が異なります。
なので、基準となるCSSピクセルも異なります。
具体的には、CSSプロパティはHTML要素が対象ですが、CSSメディアクエリはメディアが対象です。
ちなみに、ここでのメディアとは、デバイスやブラウザのことです。
つまり、CSSプロパティは表示領域のCSSピクセルが基準で、CSSメディアクエリはメディアのCSSピクセルが基準です。

両者の主な違いは、スクロールバーやメニューバーを含めるかどうかです。
パソコンの場合、表示領域のCSSピクセルはスクロールバーの分だけ、一般的に17px小さくなります。
またスマートフォンの場合、表示領域のCSSピクセルはブラウザのメニューバーが表示されているものとして計算されます。
つまり、実際の表示領域よりもメニューバーの分だけ小さくなることがあります。
一方、メディアのCSSピクセルはメニューバーの表示の有無が反映されます。

言葉で説明するとわかりにくいですが、実際に当ページで表示される数値を確認すれば、なんとなく理解できると思います。

CSSピクセルの取得

CSSピクセルを取得するにはいくつかの方法がありますが、ブラウザの開発者ツールを使うか、JavaScriptを使うのが手っ取り早いです。
冒頭の数値も、JavaScriptを使ってCSSピクセルを取得、表示したものです。

表示領域のCSSピクセルの幅・高さはそれぞれ、

• document.documentElement.clientWidth
• document.documentElement.clientHeight

また、メディアのCSSピクセルの幅・高さはそれぞれ、

• window.innerWidth
• window.innerHeight

です。