Web制作でCSSを書いていると、「16px」「24px」「1px」のような数字を目にする機会があります。
この数字の後ろについている px（ピクセル）は、CSS でサイズを指定するために使われる基本的な単位です。
例えば、文字サイズを指定する場合は、以下のように記述します。
.text {
font-size: 16px;
}このように px を使うことで、文字サイズや画像の大きさ、余白、境界線など、Webページ内のさまざまなサイズを細かく指定できます。
一方で、「ピクセルとは何なのか」「1px は実際にどのくらいの大きさなのか」「HTML でも px を指定するのか」「rem や vw など他の単位と何が違うのか」と疑問に感じる方も多くいます。
まず理解しておきたいのは、文字サイズや表示サイズを指定するのは HTML ではなく CSS の役割ということです。
HTML は文章や画像などページの構造を作り、CSS が文字サイズや色、配置など見た目を調整します。
ここでは、CSS で使われる基本単位である px（ピクセル）について、
・px とは何か
・1px はどのような意味を持つのか
・HTML と CSS の役割の違い
・文字サイズや幅、余白を指定する基本的な使い方
・px が向いている場面と注意点
・rem や em、vw など他の単位との違い
を解説します。
px は現在でも Web制作 のさまざまな場面で利用される重要な単位です。
基本的な特徴と使いどころを理解することで、CSS のサイズ指定を正しく使い分けられるようになります。
CSSのpx（ピクセル）とは？
Webページ では、文字サイズや画像の大きさ、余白、要素の幅など、さまざまな場所でサイズ指定が必要になります。
そのときに利用される代表的な単位が px（ピクセル）です。
pxはCSSで使われる固定サイズの単位
px（ピクセル）は、「pixel」を省略した表記です。
CSS では、数値の後ろに px を付けることで、表示サイズを指定できます。
例えば、文字サイズを指定する場合は以下のように記述します。
.text {
font-size: 16px;
}この場合、.text の文字サイズは 16px で表示されます。
つまり、CSS では、
font-size: 16px;と指定すると「この文字を 16px の大きさで表示する」という意味になります。
px の特徴は、指定した数値をそのままサイズとして扱える点です。
例えば、
.text-small {
font-size: 12px;
}
.text-large {
font-size: 24px;
}の場合、
・12px → 小さい文字
・24px → 大きい文字
というように、数値を見るだけでサイズの違いを判断できます。
そのため、CSS を学び始めた初心者でも理解しやすく、最初に覚える基本的な単位としてよく使われます。
pxは「固定単位」と呼ばれる理由
px は、指定した数値を基準にサイズを決めるため、「固定単位」と呼ばれます。
例えば、要素の幅と高さを指定する場合は以下のように記述します。
.box {
width: 300px;
height: 200px;
}この場合、要素のサイズは、
・横幅 → 300px
・高さ → 200px
として表示されます。
また、余白を指定する場合も同じように使用できます。
.box {
padding: 20px;
margin: 30px;
}この場合、
・内側の余白 → 20px
・外側の余白 → 30px
になります。
例えば、
・画像サイズ
・アイコンサイズ
・枠線の太さ
・ボタンの高さ
・固定したい余白
など、サイズを細かく正確に大きさを決めたい部分でよく利用されます。
一方で、画面サイズに応じて柔軟に変化させたい文字サイズやレイアウトでは、rem や %、vw などの相対単位を利用することもあります。
そのため、現在の Web制作 では「すべてを px で指定する」のではなく、目的に合わせて単位を使い分けることが重要です。
1px（1ピクセル）とは何か？
【1px（1ピクセル）とは画面上の基準となるサイズであり、物理的な長さではない！】
1px（1ピクセル）とは、Webページ上でサイズを指定するときに使う基本単位です。
画面を構成する物理的な点（画素）とは厳密には異なりますが、Web制作ではWebページ上で何かを表示するときの基本的なサイズ基準になります。
「1pxは実際に何ミリなのか」という疑問を持つ方が非常に多いですが、結論から言うと「何ミリ」という絶対的な決まりはありません。
なぜなら、1pxは定規で測る長さではないからです。見る画面の環境（ディスプレイの細かさや解像度）によって、実際のミリ数は常に変わります。
ここで、「画面によって実際のサイズ（ミリ数）が変わるなら、なぜpxは『固定値』と呼ばれるの？」という疑問が生まれると思いますが、pxが「固定値」と呼ばれる理由は、「他の要素（親要素の文字サイズやブラウザの設定）に影響されず、指定した数値が絶対に変わらないから」です。
たとえば「16px」と指定した場合、見る端末によってミリ数は多少変わっても、「16pxという設定値」そのものは絶対に変わりません（固定されます）。
ユーザーがブラウザの文字設定を「大」に切り替えようが、親要素のサイズが変わろうが、16pxは16pxのまま頑固にサイズを維持します。
ミリ数としては変動しても、「システム的に設定が絶対に曲げられない固定値」だからこそ、pxは固定単位（絶対単位）と呼ばれています。
「それなら、スマホとパソコンで文字の見た目が全然違う大きさになっちゃうの？」と心配になるかもしれませんが、安心してください。
iPhoneでもAndroidでもパソコンでも、画面に映る「16pxの文字の大きさ」はだいたい同じになるように、ブラウザ側が自動で調整してくれているからです。
ですから、ミリメートルを気にせず、一律で「1pxは1px」「16pxは16px」というCSS上の共通ルールとして扱って大丈夫です。
画面ごとの細かなミリ数の違いはブラウザに任せて、デザインの見た目のバランスだけを考えて指定してください。
文字サイズpx（ピクセル）はHTMLではなくCSSで指定する
以前の HTML では、文字サイズを指定するために HTMLタグ へ直接サイズを指定する方法も使われていました。
しかし、現在の Web制作 では、文字サイズの指定は CSS で行うことが基本です。
例えば、文章を表示する HTML は以下のように記述します。
HTML：
<pclass="text">:文章サンプル</p>このHTMLでは、「文章を表示する」という構造だけを指定しています。
文字サイズはCSS側で設定します。
CSS：
.text {
font-size: 16px;
}この場合、.text というクラスが付いた文章は 16px の文字サイズで表示されます。
このように、
<pclass="text">:文章サンプル</p>は「文章を配置する役割」
.text {
font-size: 16px;
}は「文字の大きさを決める役割」を担当しています。
HTML の中にデザイン情報を直接書き込むのではなく、CSS でまとめて管理することで、Webサイト 全体のデザインを変更しやすくなります。
例えば、サイト内の本文をすべて 16px から 18px へ変更したい場合でも、CSS の指定を1か所変更するだけで対応できます。
このように、現在の Web制作 では HTML は構造、CSS はデザインという役割分担を守ることが基本です。
px も HTML ではなく CSS で利用する単位であり、文字サイズや幅、余白などのデザイン調整を行うために使われます。
CSSでpxが使われる主な場所
px（ピクセル）は、文字サイズだけではなく、Webページ 内のさまざまなサイズ指定で利用される基本的な単位です。
CSS では、数値の後ろに px を付けることで、要素の大きさや余白などを細かく指定できます。
px が使われる代表的な場所には、以下のようなものがあります。
・文字サイズ
・要素の横幅や高さ
・余白
・枠線の太さ
・アイコンサイズ
このように、px は Webページ の見た目を調整するさまざまな場面で利用されています。
文字サイズを指定する（font-size）
px は、CSS で文字サイズを指定するときによく利用される単位です。
文字サイズを変更する場合は、font-sizeプロパティ を使用します。
.text {
font-size: 16px;
}この場合、.textの文字サイズは16pxで表示されます。
pxを使うことで、
・本文
・ボタンの文字
・注釈や補足文
など、文章ごとの文字サイズを細かく調整できます。
例えば、本文は 16px、見出しは 32px というように、用途に合わせてサイズを指定できます。
ただし、現在の Web制作 では、文字サイズをすべて px で固定するとは限りません。
画面サイズに合わせて文字を柔軟に変化させたい場合は、rem や clamp() などの単位や関数を利用することもあります。
そのため、px は「正確なサイズを指定したい場合に向いている単位」と考えると分かりやすいです。
横幅や高さを指定する（width・height）
px は、Webページ 内の要素の大きさを指定するときにも利用されます。
例えば、横幅や高さを固定したい場合は、width や heightプロパティ を使用します。
.box {
width: 300px;
height: 200px;
}この場合、要素のサイズは、
・横幅：300px
・高さ：200px
として表示されます。
px は指定した数値を基準にサイズを決められるため、
・画像
・アイコン
・カード型の部品
・固定サイズのボタン
など、決まった大きさで表示したい要素に向いています。
余白を指定する（margin・padding）
px は、要素同士の間隔や内側の余白を指定するときにも使用できます。
.card {
padding: 20px;
margin: 30px;
}この場合、
・内側の余白（padding）：20px
・外側の余白（margin）：30px
が設定されます。
余白をpxで指定することで、デザインに合わせた一定の間隔を作ることができます。
例えば、
・カード内の余白
・ボタン周りの間隔
・文章同士の間隔
など、細かなレイアウト調整で利用されます。
線の太さを指定する（border）
px は、枠線の太さを指定するときにもよく利用されます。
.box {
border: 1px solid #333;
}この場合、1px の太さの枠線が表示されます。
Web制作では、
・1pxの境界線
・ボタンの枠線
・カードの囲み線
など、細い線を表現する場面が多いため、border では現在でも px 指定が一般的です。
特に「1pxの線」は、デザインの区切りや要素の境界を表現するために頻繁に使用されます。
このようにpxは、文字サイズだけではなく、Webページ のさまざまなサイズ調整で利用される基本的な CSS 単位です。
px（ピクセル）を使うメリット
px は絶対的な大きさを表す単位です。
画面上の「1ドット」を基準にするため、何が起きてもサイズがブレないという強みがあります。
サイズを正確に指定できる
pxの大きなメリットは、指定した数値を基準にサイズを細かく設定できることです。
例えば、
.button {
height: 40px;
}と指定した場合、ボタンの高さを 40px として表示できます。
デザインデータで指定されたサイズをそのまま CSS に反映しやすいため、デザイナーが作成した見た目を再現しやすいという特徴があります。
特に、
・画像サイズ
・アイコンサイズ
・ボタンの高さ
・枠線の太さ
など、正確な大きさが求められる部分では px が便利です。
初心者でも理解しやすい
px は、CSS の単位の中でも仕組みが分かりやすい単位です。
例えば、
.text {
font-size: 16px;
}と指定した場合、
「16という数値でサイズを固定している」
と考えることができます。
rem や em のように、親要素やルート要素のサイズを基準に計算する必要がないため、CSS を学び始めた初心者でもサイズの変化を理解しやすい特徴があります。
そのため、CSS の基本を学ぶ段階では、px を使ってサイズ指定の仕組みを理解することが多くあります。
細かな調整に向いている
px は、1px 単位の細かな調整ができる点もメリットです。
例えば、
.box {
border: 1px solid #ddd;
}のように、1pxの細い境界線を作ることができます。
また、
・アイコンの大きさ
・ボタンの高さ
・小さなUIパーツ
・画像のサイズ
など、少しの違いがデザインに影響する部分では px が適しています。
Webサイト では、数px の違いで見た目の印象が変わることもあるため、細かな調整が必要な場面では px が活用されています。
pxを使うデメリット
サイズが固定されることはメリットである反面、画面サイズが頻繁に変わる現代のWeb制作においては、いくつかの重大なデメリットを生み出します。
レスポンシブ対応では柔軟性が低い
px は固定値としてサイズを指定するため、画面サイズに合わせた柔軟な変更が苦手です。
例えば、タイトルの文字サイズを以下のように指定した場合、
.title {
font-size: 48px;
}パソコンでは大きく見やすいサイズでも、スマートフォンでは画面幅に対して大きすぎる可能性があります。
この場合、スマートフォン用に別のサイズ指定を追加する必要があります。
例えば、
@media (max-width: 768px) {
.title {
font-size: 32px;
}
}のように、画面サイズごとに調整することになります。
そのため、レスポンシブ対応が必要な文字サイズやレイアウトでは、rem や vw などの相対単位が利用されることがあります。
サイト全体のサイズ変更が難しい
px を大量に使用して Webサイト を構築すると、後からサイト全体のデザインを変更したい場合に手間がかかることがあります。
例えば、サイト内の文字サイズ、余白、コンテンツ幅などをすべて px で個別に指定している場合を考えてみます。
.title {
font-size: 24px;
}
.text {
font-size: 16px;
}
.card {
padding: 20px;
}
.container {
width: 1200px;
}このように、それぞれの場所で独立した固定値として管理していると、後から一括でサイズを変更することが難しくなります。
例えば、
「サイト全体の文字を少し大きくして、シニア層にも見やすいデザインに変更したい」
という仕様変更が発生した場合、px で個別に指定された文字サイズを1箇所ずつ確認し、修正する必要があります。
また、文字サイズだけではなく、余白やコンテンツ幅なども同様に調整が必要になる場合があります。
このように、固定値を大量に使用すると、サイト全体のデザイン変更やメンテナンスの負担が大きくなることがあります。
そのため、実務ではすべてを px で指定するのではなく、サイト全体で管理したいサイズには rem などの相対単位を利用し、細かな固定サイズには px を使うなど、用途に応じて単位を使い分けることが重要です。
実務ではpxをどこで使う？
px は、現在の Web制作 でもさまざまな場面で利用されています。
ただし、すべてのサイズ指定を px で行うのではなく、「正確なサイズを固定したい場所」と「画面や環境に合わせて柔軟に変化させたい場所」で使い分けることが重要です。
ここでは、実務で px が向いている場所と、px 以外の単位が向いている場所について解説します。
pxがおすすめの場所
・border（枠線）
px は、枠線の太さを指定する場合によく利用されます。
例えば、
・カードの囲み線
・ボタンの枠線
・区切り線
などで利用されます。
.box {
border: 1px solid #ddd;
}この場合、1pxの枠線が表示されます。
Webサイトでは、要素の境界を表現するために細い線を使うことが多く、border では現在でも px 指定が一般的です。
・アイコンサイズ
アイコンのような小さなパーツも、px で固定サイズを指定することが多いです。
例えば、
・メニューアイコン
・SNSアイコン
・ボタン内の小さな画像
などでは、24pxや32pxのように固定サイズで指定するケースが多くあります。
.icon {
width: 24px;
height: 24px;
}アイコンはデザイン上、一定の大きさで表示することが重要なため、px との相性が良い部分です。
・固定したいサイズ
px は、サイズを一定に保ちたい要素にも適しています。
例えば、
・ロゴ
・ボタンの高さ
・小さなUIパーツ
・画像サイズ
などです。
これらの要素は、画面サイズによって大きく変化させるよりも、一定のサイズで表示したほうがデザインを維持しやすいため、px が利用されます。
px以外がおすすめの場所
一方で、画面サイズやサイト全体の管理を考える必要がある部分では、px 以外の単位が適している場合があります。
・文字サイズ
文字サイズは、px よりも rem や clamp() などが利用されることがあります。
例えば、サイト全体の文字サイズを調整したい場合、rem を利用すると基準となるサイズを変更することで、複数の文字サイズをまとめて管理しやすくなります。
また、画面幅に応じて文字サイズを変化させたい場合は、clamp() と vw を組み合わせる方法もあります。
・レイアウト幅
ページ全体の幅やコンテンツの配置では、% や vw などが利用されることがあります。
例えば、画面サイズに合わせて横幅を変化させたい場合、固定値である px よりも相対的な単位のほうが柔軟に対応できます。
・余白
余白については、rem が利用されるケースがあります。
rem を使うことで、文字サイズと余白のバランスをサイト全体で管理しやすくなります。
このように、px は「固定したい部分」に向いており、rem や vw などは「状況に応じて変化させたい部分」に向いています。
目的に合わせて単位を使い分けることで、管理しやすく、変更にも対応しやすい CSS設計 ができます。
pxに関するよくある誤解
px については、「古い単位なのでは？」「現在は使わないほうがよいのでは？」という疑問を持つ方もいます。
しかし、px は現在でも Web制作 で利用されている基本的な CSS 単位です。
ただし、重要なのは「すべて px で指定する」のではなく、用途に合わせて単位を使い分けることです。
・pxは古い単位？
いいえ。
pxは現在でも利用されているCSSの基本単位です。
固定したサイズを正確に指定したい場面では、今でもpxが適しています。
・文字サイズはpxを使わないほうがいい？
一概に「使わないほうがよい」とは言えません。
px はサイズを正確に指定できるため、文字サイズにも利用できます。
ただし、サイト全体の管理やレスポンシブ対応を考える場合は、remやclamp()などが適している場合があります。
用途に応じて、
・固定したいサイズ → px
・サイト全体で管理したいサイズ → rem
・画面幅に応じて変化させたいサイズ → clamp()やvw
のように使い分けることが大切です。
・すべてremに統一すべき？
すべてのサイズを rem に統一する必要はありません。
rem は文字サイズや余白など、サイト全体で管理したいサイズに向いています。
一方で、
・1pxの線
・アイコンサイズ
・固定したい小さなUIパーツ
などは px のほうが管理しやすい場合があります。
CSS では、単位ごとの特徴を理解し、適切な場所で使い分けることが重要です。
