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

px を vw に変換する理由

デザイナーが、幅 1440 px で描いたモックアップを送ってきます。ヒーロー見出しは 96 px、セクションの間隔は 72 px です。実際のウェブでは、ページはスマートフォンでは 360 px で、タブレットでは 820 px で、大型モニターでは 2560 px で見られ、デザイナーは、見出しがそのどれでも画面に対する比率を保つことを望んでいます。そのための単位がビューポート幅、vw で、モックアップからそこに至る方法が、px を vw に変換することです。ピクセルの値を取り、デザインが描かれた幅で割り、百を掛けます。1440 px のキャンバスでの 96 px の見出しは 6.67 vw で、それ以後は、画面がどうであれ常にその 6.67 パーセントです。

それがビューポート単位の約束であり、また危険でもあります。rem と em はフォントサイズから始まり、ブラウザーはそれを適切な初期値に設定します。vw には初期値がまったくありません。ビューポート幅は、読者のウィンドウがどれだけ広いかそのままで、スマートフォンを回したりウィンドウをドラッグしたりすると変わります。だから変換ツールは、答えが依存する一つの数字を隠しません。デザインの幅は欄にあり、1440 px から始まって、モックアップに合わせて変更できます。

算術はお使いのブラウザー内で実行され、何もアップロードされません。以下では、式、変換が保つものと保てないもの、ビューポート単位が役立つ場所と害になる場所、純粋な vw の文字が生むアクセシビリティの問題、それを直す clamp の技法、そしてピクセルのモックアップを可変のスタイルシートに変える方法を説明します。

式と幅

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

式は vw = px ÷ 幅 × 100 です。デザインの幅が 1440 px なら、144 px は 10 vw に、72 px は 5 vw に、24 px は 1.667 vw になります。ページは結果の隣に幅を、144 px = 10 vw (1440 px) のように示すので、何が想定されたかがわかります。一 vw はビューポート幅の百分の一なので、幅 1000 px のウィンドウでは、1 vw が 10 px に等しくなります。

1440 はどこから来るのか

ここでの 1440 px は、デザインがよく描かれる幅で、標準ではなく習慣です。1280 で描くチームもあれば、1920 で描くチームも多く、モバイルのデザインは 375 や 390 で描かれます。正しい答えはなく、あるのはデザインファイルが使う幅だけです。自分のものを入力してください。変換は、与えた幅のとおりにしか良くなりません。

デザイン自身の幅を使う

モックアップが 1920 px で描かれているなら、1920 と入力してください。同じ 96 px の見出しは 5 vw になります。間違った幅を使って px を vw に変換すると、ページは一つの画面サイズでは正しく見え、ほかのすべてでは間違って見えます。探すべきことを知らないと、当惑するバグです。

変換が保つものと、できないこと

画面に占める割合は保たれる

一 vw はビューポート幅の百分の一なので、vw で書かれたサイズは、そのまま居座らず、ウィンドウとともに大きくなり小さくなります。結果は、ピクセルの値がモックアップで占めていた画面の割合であり、ブラウザーでは、要素がどの幅でもその割合を保ちます。

初期値は与えられない

rem と違って、vw には初期値がありません。ブラウザーは誰も別に指示しなければルートのフォントサイズを 16 px にするので、rem のページは本物の数字から始められます。ビューポート幅は、読者のウィンドウがどれだけ広いかそのままで、スマートフォンを回すと変わります。欄にある幅はデザインの幅であり、答えはその幅の画面で正しく、ほかのどこでも比例しています。

丸め

1440 で割ると、ほとんどのサイズで長い小数になります。6.6667 vw のような値はスタイルシートでは問題ありませんが、目に見える変化なしに、6.67 や 6.7 に丸められます。小数点以下は二、三桁を保ってください。それ以上はノイズです。

ビューポート単位が役立つ場所

ヒーロー見出しと大きな表示用の文字

あらゆる機器で画面の決まった割合を満たさなければならない見出しが、古典的な使い方です。スマートフォンの幅では、固定の 96 px の見出しははみ出しますが、vw なら画面とともに縮み、一行にとどまります。

全幅のセクション

ランディングページの大きなセクションの間の間隔は、画面とともに拡大縮小すると、最もよく見えることがよくあります。そうすれば、ページは小さなノートパソコンでも広いディスプレイでもリズムを保ちます。vw での隙間はそうします。

形を保たなければならない作品

vw でサイズ指定されたヒーロー画像、イラスト、装飾的な図形は、ウィンドウに対する比率を保つので、画面が変わっても構図は崩れません。

限界のある可変の文字

clamp() と組み合わせると、vw は最小と最大の間でなめらかに大きくなる文字を与えます。これは現代のスタイルシートが見出しに使う技法で、下で扱います。

ビューポート単位が害になる場所

純粋な vw の本文

vw だけでサイズ指定されたテキストは、読者がブラウザーでページを拡大しても反応しません。拡大はウィンドウのピクセルサイズを変えますが、vw のサイズはその割合を保つからです。拡大に頼る人、しばしば視力が弱いからですが、そうした人は、大きくできないテキストを残されます。アクセシビリティの指針は、テキストのサイズ変更ができることを求めており、純粋な vw のサイズはその試験に落ちます。

極小と極大の両極端

幅 320 px では、6.67 vw の見出しは 21 px で、小さすぎるかもしれません。幅 2560 px では 171 px で、途方もなく大きくなります。限界がなければ、1440 でちょうどよく見えた比率が、両端では不合理になりえます。

スクロールバー

デスクトップのブラウザーでは、vw に使われるビューポート幅に、縦のスクロールバーの幅が含まれます。したがって 100vw に設定されたボックスは、ページがスクロールするとき、見える領域より少し広くなり、横のスクロールバーが現れることがあります。vw で全幅のレイアウトを作る前に、これを知っておいてください。

clamp の技法

下限と上限を設定する

CSS の関数 clamp(min, preferred, max) は、最小値、好ましい値、最大値を取ります。文字には、最小と最大を rem で、好ましい値を vw に rem の項を加えたもので書きます。font-size: clamp(2rem, 1rem + 4vw, 6rem) です。サイズは、32 から 96 px の間でウィンドウとともに大きくなり、どちらの端も越えません。一部が rem なので、テキストは今も読者の設定を尊重します。

中間の項の作り方

二つの画面幅と、それぞれで望むサイズを選びます。たとえば、幅 360 px で 32 px、幅 1440 px で 96 px です。傾きは (96 − 32) ÷ (1440 − 360) = 幅のピクセルにつき 0.0593 px で、それは 5.93 vw であり、切片は 32 − 0.0593 × 360 = 10.67 px、約 0.667 rem です。したがって好ましい項は 0.667rem + 5.93vw です。変換ツールは vw の部分を助け、残りは一分の算術でできます。

これが正しい釣り合いである理由

clamp を使えば、デザイナーが望む可変の振る舞いと、読者が必要とするアクセシビリティが得られます。上で述べた問題への答えであり、現代のほとんどのスタイルシートが vw を clamp の中でだけ使う理由です。

ここで px を vw に変換する方法

ピクセルの値を入力する

最初の欄にピクセルでのサイズを入力します。小数も受け付けられます。

デザインの幅を設定する

それがモックアップの幅なら、1440 のままにしてください。違うなら、変更してください。結果は入力するそばから更新されます。

vw の値をコピーする

数字を単位つきで CSS に使ってください。font-size: 6.67vw のようにです。文字には、rem での限界とともに clamp() の中に入れてください。

これらの単位の由来

CSS のピクセル

ディスプレイの密度が予測できなくなったとき、実際のピクセルで測られたページは、画面が鮮明になるにつれて縮むページになりました。そこで CSS のピクセルは基準の長さとして再定義されました。心地よい読書距離で見た、約 1/96 インチです。それが、モックアップが描かれる単位です。

ビューポート単位

vw はレスポンシブデザインとともに現れました。それが何になろうと、ビューポート幅の百分の一です。ルートのフォントサイズに相対的な rem と、要素に相対的な em と並びます。画面ではなくテキストに相対的なサイズが必要なら、px を rem に変換してください。

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

間違ったデザインの幅を使う

最もよくある誤りです。モックアップが幅 1920 なのに 1440 で変換すると、すべてのサイズが三分の一ずれます。デザインツールで、フレームの幅を確認してください。

モバイルのデザインを忘れる

多くのチームは、デスクトップ用とスマートフォン用の二つのモックアップをもっています。前者で 96 px、後者で 40 px の見出しは、一つの vw の値ではありません。二つの幅、二つの変換、そしてそれらをつなぐ clamp を使ってください。

ページ全体を vw にする

すべてがウィンドウとともに拡大縮小するページは、読む感覚を失います。広い画面では行が長くなりすぎ、狭い画面では文字が小さくなりすぎます。拡大縮小すべき少数のものに vw を使い、残りには固定または rem のサイズを使ってください。

拡大の問題を無視する

ブラウザーを 200 パーセントに拡大して、ページを試してください。テキストが大きくならないなら、サイズには rem の項が必要です。

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

100 px は何 vw ですか？

デザインの幅が 1440 px なら、約 6.94 vw です。

使うのに最適なデザインの幅は何ですか？

モックアップが描かれた幅です。普遍的な初期値はありません。

vw は rem より優れていますか？

別の仕事をします。rem は読者のテキストサイズに従い、vw はウィンドウに従います。それぞれを得意なことに使ってください。

フォントサイズに vw を使えますか？

はい。ただし、テキストが読みやすいままで、拡大もできるように、rem での限界とともに clamp() の中に入れてください。

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

いいえ。算術はお使いのブラウザー内で実行され、何もどこにも送られません。

元に戻すには？

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

px を vw に変換するときの賢い選び方

画面とともに拡大縮小すべきものを決める

ヒーロー用の文字、大きな隙間、作品は、はい。本文、罫線、小さな操作部品は、いいえ。vw の値の一覧が短いほど、ページは頑健になります。

デザインの段階で変換する

モックアップを読みながら px を vw に変換すれば、どの値が半端に出るかがすぐにわかり、デザイナーにもっときれいな値を頼めます。6.6667 vw になる見出しは、6.5 か 7 にしようという話し合いを誘います。

幅の記録を残す

デザインの幅を、スタイルシートの先頭のコメントに書いてください。あとで変換する人が同じ幅を使うためです。幅が混ざると、誰にもうまく説明できない形で一貫性のないページになります。

モックアップから可変のスタイルシートへ

拡大縮小すべきサイズを挙げる

デザインファイルを開き、画面に追随させたいサイズをすべて書き出します。ヒーローのタイトル、セクションの隙間、場合によっては大きなイラストです。それぞれについて、フレームの幅に対して px を vw に変換し、結果を控えます。ほとんどのページは、そのような値が十個に満たず、ほかのすべては rem かピクセルのままです。

モバイルのフレームは別に確認する

スマートフォンのモックアップがあるなら、同じ要素をその幅で読みます。1440 px のフレームで 96 px、375 px のフレームで 40 px のタイトルは、単一の vw の値には当てはまらず、それは clamp を使う合図です。スマートフォンのサイズが下限に、デスクトップのサイズが上限になり、vw の項がその間の仕事をします。各フレームについて px を vw に変換すると、二つの数字が傾きを定めます。

三つの幅で見直す

完成したページを、およそ 360、820、1440 ピクセルで、そして一度は 2560 で見てください。可変のレイアウトは、モックアップの幅では正しく仕上げやすく、ほかではそっと間違いやすいものです。これらの幅をさっと通して見れば、訪問者が見つける前に、ほとんどの問題が見つかります。

長いテキストには単位を使わない

読むためのテキストの行は、rem でサイズ指定し、約 60 から 75 文字の最大行長を与えるのが最適です。ビューポート単位は表示用の文字と間隔に使い、読むテキストは安定させておいてください。

関連する変換ツール

同じ系統のツールが、隣接する変換を担います。ピクセルに戻るには、vw を px に変換を使ってください。ルートに相対的なサイズには、px を rem に変換とrem を px に変換があり、要素に相対的なサイズには、px を em に変換とem を px に変換があります。同じスタイルシートの色には、HEX を RGB に変換とHEX を HSL に変換が表記を扱います。

実例

ランディングページが 1440 px でデザインされ、ヒーローのタイトルが 96 px、その上の隙間が 72 px だとします。96 を入力して 6.667 vw を読み、72 を入力して 5 vw を読みます。幅 1000 px のウィンドウでは、タイトルは 66.7 px、隙間は 50 px で、比例しています。しかし幅 360 px のスマートフォンでは、タイトルは 24 px になり、望むより小さいので、タイトルを clamp(2.25rem, 1rem + 5vw, 6rem) と書きます。これで下限が 36 px、上限が 96 px になり、読みやすく、拡大もできるままです。テキストのない隙間は、単純な vw のままです。

短いチェックリスト

変換する前

モックアップの幅を見つけてください。どのサイズが拡大縮小すべきで、どれがそうでないかを決めてください。

変換している間

ピクセルの値とデザインの幅を入力し、vw の数字を単位つきでコピーしてください。

変換したあと

ウィンドウをスマートフォンの幅から広いモニターまで変え、ページを 200 パーセントに拡大してください。両極端が間違って見えるところには、clamp() で限界を加えてください。

よくある間違い

1440 が標準だと思い込む

それは習慣にすぎません。自分の幅を使ってください。

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

拡大できません。rem の項と限界を加えてください。

スクロールバーを忘れる

スクロールするデスクトップのページでは、100vw は見える領域より広くなります。

数字は端末の中にとどまる

計算はローカルで行われます。値はお使いのブラウザー自身が使い、何もどこにも送られません。あとで削除するものも、作成するアカウントもありません。それが px を vw に変換する素直な方法です。

まとめ

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