vw を px に換算 Viewport width ↔ Pixels 無料 オンライン 安全

vw を px に変換する理由

スタイルシートには、ヒーローのタイトルに font-size: 5.2vw、セクションに margin-top: 8vw、画像に width: 42vw と書かれています。これらは可変の値で、画面上で実際に何が表示されるかは教えてくれません。携帯電話でタイトルはどれくらいの大きさか。ノートパソコンで画像の幅はどれくらいか。1920 ピクセルで余白は適切に見えるか。それを知るには vw を px に変換します。数字にウィンドウの幅を掛けて百で割り、デザイナー、テスター、クライアントが使う単位で答えを読み取るのです。流動的なコードをレビューするとき、ビルドをモックアップと照らし合わせるとき、同僚に狭い画面で見出しが小さく見える理由を説明するときに行うことです。

この変換が rem や em と違うのは、乗数がウィンドウそのものだという点です。一 vw はビューポート幅の百分の一なので、5.2vw は、幅 1000 px のウィンドウでは 52 px、幅 360 px の携帯電話では 18.7 px、1920 の広いモニターでは 99.8 px です。頼れる既定値はなく、読み手が携帯電話を回転させたりウィンドウをドラッグしたりすると幅が変わります。そのためコンバーターは幅を尋ね、答えの横にそれを表示し、デザインがよく描かれる幅である 1440 px から始めます。

計算はお使いのブラウザの中で行われ、何もアップロードされません。以下では、公式、この変換が保つものと保てないもの、複数の幅で流動的なスタイルシートを読む方法、スクロールバーの罠、純粋な vw だけのテキストのアクセシビリティの問題、そして流動的なコードを理解しやすく保ついくつかの習慣をご紹介します。

公式と幅

px は vw に幅を掛けて、百で割ったもの

公式は px = vw × 幅 ÷ 100 です。幅 1440 px では、10 vw は 144 px、5 vw は 72 px、1.667 vw は 24 px になります。ページは結果の横に幅を表示するので、10 vw = 144 px (1440 px) のような行を見れば、何が前提とされたかがわかります。別の画面を見るには、幅を変えて結果を読み直してください。

試すべき幅

確認に便利な組み合わせは、携帯電話の 360 または 390、縦向きのタブレットの 768、小型ノートパソコンの 1024、典型的なノートパソコンやデスクトップの 1440、フル HD モニターの 1920 です。それぞれを幅の欄に入力して結果を書き留めてください。五つの読みがあれば、値の全範囲がわかり、極端なものはすぐ目につきます。

実際のウィンドウの幅を使う

ブラウザの開発者ツールでは、デバイスツールバーがウィンドウの幅をピクセルで表示します。その数字を使って、ページの動作とコンバーターの答えを比べてください。一致すれば、スタイルシートの読み方は正しいということです。

この変換が保つものと保てないもの

画面に占める割合を保つ

一 vw はビューポート幅の百分の一なので、vw で書かれたサイズは、その場にとどまらず、ウィンドウとともに大きくなったり小さくなったりします。得られるピクセル値は、その割合を特定の幅で具体的にしたものです。

既定値は与えられない

rem と違って、vw には既定値がありません。ブラウザは何も指定されなければルートのフォントサイズを 16 px にするので、rem のページは実際の数字から出発できますが、ビューポート幅は読み手のウィンドウがたまたま持っている幅にすぎず、携帯電話を回すと変わります。ここでの 1440 px はデザインがよく描かれる幅で、標準ではなく習慣です。ご自身の値を入力してください。

丸め

幅を掛けて 100 で割ると、小数が出ることがあります。1440 px での 6.67 vw は 96.048 px です。ブラウザは小数のピクセルを扱えますが、デザインファイルのために整数が必要なら、丸めて、その丸めがあなたのものであることを書き添えてください。

流動的なスタイルシートを読む

三つの幅を取って結果を書き出す

狭い幅、中間の幅、広い幅を選びます。たとえば 375、1024、1920 です。スタイルシートの重要な vw の値ごとに、それぞれの幅で vw を px に変換し、三つの数字をメモに書き出します。5.2 vw の見出しは、19.5、53.2、99.8 ピクセルになります。こうして見れば、見出しが狭い側で読めるか、広い側で圧倒的でないかがわかります。

clamp を探す

よく書かれた流動的なコードは、clamp(min, preferred, max) で vw に上限と下限を設けます。clamp(2rem, 1rem + 4vw, 6rem) を見かけたら、サイズは 32 から 96 px の間で変化し、両端で止まります。vw の部分を変換するときは、それが範囲の中間にすぎず、端で何が起こるかは上限と下限が決めることを覚えておいてください。

両端を確かめる

危ないのは、最小と最大の幅です。320 px では、6 vw の見出しは 19 px、2560 では 154 px です。どちらも許容できそうになく、clamp もないなら、スタイルシートには制限が必要です。

vw を px に変換するときの落とし穴

スクロールバー

デスクトップのブラウザでは、vw に使われるビューポート幅に縦のスクロールバーの幅が含まれます。そのため、ページがスクロールするとき、100vw は見える領域より少し広くなり、多くのシステムで約 15 から 17 ピクセルの差があります。計算したピクセル値は、それが表しているように見える可視幅より、わずかに大きくなります。スクロールバーがページに重なって表示される携帯電話では、この影響はありません。

間違った幅を使う

結果は、入力した幅と同じ程度にしか正しくありません。テスト用のウィンドウが 1366 px 幅なのに 1440 で変換すると、すべての値がおよそ五パーセントずれます。実際の幅は開発者ツールから読み取ってください。

vw とパーセントの取り違え

50% の幅は親要素の幅を指し、50vw はウィンドウを指します。狭いコンテナの内側では、両者は大きく違います。コンバーターは vw の答えを出します。要素がコンテナの内側にあるなら、親要素はウィンドウより狭いかもしれません。

vw のテキストはズームできないことを忘れる

vw だけでサイズを決めたテキストは、読み手がページをズームしても反応しません。ウィンドウとテキストが一緒に拡大縮小するからです。アクセシビリティのガイドラインは、テキストのサイズ変更ができることを求めています。clamp() のように rem の項を加えて、テキストがズームにも反応するようにしてください。

変換する前によくある質問

1 vw は何ピクセルですか?

ウィンドウ幅の百分の一です。1440 では 14.4 px、1000 では 10 px、360 では 3.6 px です。

50 vw は何ピクセルですか?

ウィンドウの半分です。幅 1440 では 720 px、幅 1000 では 500 px です。

なぜページが画面より広くなるのですか?

スクロールするページにある 100vw のボックスは、スクロールバーが数えられるため、見える領域より広くなります。代わりにコンテナの内側で 100% を使ってください。

vw はパーセントと同じですか?

いいえ。パーセントは親要素を、vw はウィンドウを基準にします。

入力した数字はアップロードされますか?

いいえ。計算はお使いのブラウザの中で行われ、何もどこにも送られません。

どうやって元に戻しますか?

px を vw にを使います。掛ける代わりに幅で割ります。

よくある幅でのよくある値

暗算用の表

コンバーターを使う前に見積もれるよう、いくつかの目安を知っておくと役立ちます。幅 1000 px では、1 vw は 10 px で、計算がごく簡単になります。2.5 vw は 25 px、8 vw は 80 px です。1440 px では、1 vw は 14.4 px です。375 px では、1 vw は 3.75 px なので、8 vw のタイトルは 30 px です。手早い確認のために vw を px に変換するときは、これらの目安のひとつから出発して、拡大縮小してください。

三つの幅、一つのスタイルシート

幅 80vw、余白 4vw、タイトル 6vw のカードを考えます。375 px の携帯電話では、300 px、15 px、22.5 px になります。768 px のタブレットでは、614 px、30.7 px、46 px です。1440 px のデスクトップでは、1152 px、57.6 px、86.4 px です。三つを並べて見れば、デスクトップではカードが広すぎ、タイトルが大きすぎること、そしておそらく最大幅と clamp が必要なことが、すぐにわかります。

ビューポートの先へ

コンテナ単位

新しい CSS は、ウィンドウではなくコンテナを基準にする単位を提供しています。たとえばコンテナ幅の百分の一である cqw です。これらは、狭いサイドバーに置かれたコンポーネントが、ウィンドウ全体があるかのように振る舞ってしまう問題を解決します。使う場合の計算は、コンテナの幅を基準とする点を除いて vw と同じで、その幅を入力すれば、このコンバーターを使えます。

小、大、動的なビューポート

携帯電話では、アドレスバーが滑って消えるにつれて、見える領域が変わります。高さについては、新しい単位 svh、lvh、dvh が、小、大、動的なビューポートを表します。幅については、アドレスバーが影響しないので状況はもっと単純で、vw は安定しています。モバイルでの流動的なデザインに、vw が vh より安全な単位である理由がもうひとつあります。

パーセント、vw、グリッド

パーセントの幅は親要素に従い、vw はウィンドウに従い、CSS グリッドとフレックスボックスは利用可能な空間に従います。多くの場合、最良の流動的なレイアウトは、構造にグリッドとパーセントを使い、vw は文字と余白にだけ使います。それらは画面に直接従うことで恩恵を受けるものだからです。レイアウトを確かめるために vw を px に変換するときは、グリッドのトラックのほうが同じことをより堅牢に表せなかったか、自問してください。

CSS を書かない人に vw を説明する

ウィンドウを物差しにする

クライアントや同僚は、vw が画面幅の一パーセントだと言えば、たいてい考え方を理解してくれます。5 vw のタイトルは、画面の五パーセントの幅です。それから二つの数字を見せましょう。彼ら自身の携帯電話ではいくつになるか、そして会議室の大きなモニターではいくつになるかです。両方の幅で vw を px に変換して、結果を声に出して言えば、画面とともに動くサイズという考え方が具体的になります。

デザインが固定されていない理由を伝える

技術職ではない関係者は、なぜページはタイトルに単に一つのサイズを持たないのかと尋ねることがあります。答えは、画面は最小の携帯電話と最大のモニターの間で七、八倍も違い、一方に合う固定サイズは他方には間違いだからです。流動的な単位が答えであり、このページのピクセルの数字は、同じ値が画面によってどれだけ変わるかを示しています。

これらの単位の由来

CSS ピクセル

ディスプレイの密度が予測できなくなったとき、本物のピクセルで測ったページは、画面が精細になるにつれて縮むページになりました。そこで CSS ピクセルは、基準の長さとして再定義されました。快適な読書距離で見た 1/96 インチほどの長さです。このページが答えを出す単位は、これです。

ビューポート単位

vw は、レスポンシブデザインとともに登場しました。ビューポートの幅の百分の一で、それが何であれそうです。ルートのフォントサイズを基準にする rem と、要素を基準にする em の隣にあります。同じピクセル値がそれらの単位でどう見えるかは、rem を px に変換して比べてください。

流動的なコードを理解しやすく保つ習慣

ピクセル値をコメントに書く

font-size: clamp(2rem, 1rem + 4vw, 6rem); /* 32px at 360, 96px at 1440 */ のような行は、数語の手間で、次の読み手の何度もの変換を省いてくれます。

デザイン幅を一か所にまとめる

プロジェクトにデザインが描かれた幅のためのカスタムプロパティがあれば、すべての vw の値をそこにたどれます。レビューのために vw を px に変換するとき、どの幅を使えばよいかがわかります。

vw は控えめに使う

vw の値の短い一覧は、考えやすいものです。すべてが vw のスタイルシートはそうではありません。見出し用の文字、大きな余白、アートワークのために取っておきましょう。

大事なときは実機でテストする

ブラウザのツールは幅をうまく模擬しますが、実際の携帯電話なら、アドレスバー、回転、ズームの本当の挙動がわかります。端末での五分間の確認が、シミュレーションの見逃すものを捕まえます。

関連するコンバーター

同じ系統のツールが、隣り合う変換を網羅しています。vw に戻るには、px を vw にを使います。ルートを基準にしたサイズには、px を rem にとrem を px にがあり、要素を基準にしたサイズには、px を em にとem を px にがあります。同じスタイルシートの色については、HEX を RGB にとRGB を HEX にが表記を扱います。

実例

テスターが、小さな携帯電話でヒーローのタイトルが読みにくいと報告したとします。スタイルシートには、制限なしで font-size: 5.2vw とあります。360 で vw を px に変換すると 18.7 px、768 では 39.9 px、1440 では 74.9 px と読み取れます。狭い側では、タイトルは本文より少し大きいだけで、もうタイトルとしては読めません。そこで clamp(2rem, 1rem + 4vw, 5rem) を提案します。これは、最も狭いところで 32 px、768 では約 51 px、最も広いところで 5rem、つまり 80 px になります。テスターは、いまはよく読めると確認し、タイトルは引き続き拡大縮小します。

短いチェックリスト

変換の前

開発者ツール、または対象デバイスの一覧から、気になる幅を選びます。

変換の最中

vw の値と各幅を順に入力し、基準の横に表示されるピクセルを書き留めます。

変換の後

両端を見ます。どちらかの端でサイズが小さすぎたり大きすぎたりするなら、clamp() で制限を加えます。

よくある間違い

答えが一つだと思い込む

vw の値は、幅ごとに異なるピクセルサイズになります。すべての数字に幅を添えてください。

スクロールバーを忘れる

100vw にはそれが含まれるので、全幅のボックスがあふれることがあります。

本文を vw だけでサイズ指定する

ズームできません。rem の項と制限を加えてください。

数字はお使いの端末にとどまります

計算は手元で行われます。入力した値はお使いのブラウザが使うだけで、何もどこにも送られません。後で削除するものも、作成するアカウントもありません。それが、vw を px に変換する素直な方法です。

まとめ

ここで vw を px に変換するには、vw のサイズとウィンドウの幅を入力し、公式 px = vw × 幅 ÷ 100 を使って、結果をすぐにピクセルで読み取ります。幅はデザインがよく描かれる 1440 px から始まりますが、それは標準ではなく習慣なので、ご自身の値を入力してください。この変換は画面に占める割合を保ちます。一 vw はビューポート幅の百分の一なので、vw のサイズはウィンドウとともに大きくなったり小さくなったりします。rem と違って、vw には既定値がありません。ビューポートは読み手のウィンドウがたまたま持っている幅だからです。テキストには、clamp() の中で vw と rem を組み合わせ、読みやすさとズームのしやすさを保ってください。何もアップロードされません。