大きさの単位、pxや%やvwの使い分けについて

Question

画像や文字に指定した単位「px」は
タブレットやスマホの用のサイトを作る時には使わずに「%」や「vw」に変えた方がいいというのをサイトで見ました。

それぞれの使い分けが知りたいです。よろしくお願いします。

Answer 1

何を基準としたサイズを指定したいのか、で使用する単位をえらぶとわかりやすいです。なので単位の特性を理解し、その特性を利用したい場合にその単位を使えばよいです。「変えた方がいい」かはその場その場で要件にあわせて判断する、ということになります。

有名な単位の幾つかを上げると、次のような特性があります。

• px………どんな環境でも変わらないサイズにする
• ％………親要素に指定されている値とのパーセント（割合）のサイズする
• em………親要素に指定されている文字サイズを基準にしたサイズにする
• rem………html要素に指定されている文字サイズを基準にしたサイズにする
• vw………ビューポート（画面）の横幅を基準にしたサイズにする
• vh………ビューポート（画面）の縦幅を基準にしたサイズにする

例えば一一

どんな環境でも~~px固定サイズにする…→px
親要素の半分のサイズにする…→％
文字サイズが変更されても十文字分のサイズにしたい…→em
親要素や文字サイズ等に関係なく、画面の幅いっぱいのサイズにしたい…→vw・vh

こんな感じになります。それぞれの単位の特性を把握して、作りたいデザインがどの単位で作りやすいか？を考えてみるといいです。

Comments

[miyabi_pudding]

横槍失礼します。

> px………どんな環境でも変わらないサイズにする

これは少し語弊があるかも・・・。
PCでは変わらないと言えるのですが、
スマホの場合、デバイスによって、画面に対しての1pxあたりの表示サイズが大きく変わります。
これは、画面解像度により、画面サイズ、物理px、論理pxが変わってくるからです。
対して、PCの場合は、ほとんどのディスプレイは、96dpiか、72dpiか、Retinaであればその二倍のdpiと、規格が比較的統一されているため、物理pxは変われど、論理px数は変わりません。
対してスマホは、論理pxがデバイスによって変わるため、どの環境でも変わらない、とは言い難いです。

[takumi5]

PC版を作ってから、次にタブレットやスマホ用のサイトを作る時に、
例えば横並びになっている２つの画像と文字があるとして、それらのたがいの表示比率を５：５にしたいだとか、３：７にしたいときは％を使うということですかね！
そしてvwを使った場合画面サイズの全体（vwは横、vhは高さ）に伴った大きさに変動するから、比率は特に気にしてないときに使うべきということでしょうか？