Q&A
vmではなくvwでは。
vh,vwの使い分けについて
すでにIE11以上であれば使えるようなので、実践投入しても問題ないようですが、
どのように使い分けるべきでしょうか？
文字周りはrem
padding、marginは上下はvh、左右はvwと変える。
それともpadding、marginはすべてvwにする。
ある要素の半分にしたい時のみ%を使う。
このようなイメージでしょうか？
特にpadding、marginは上下はvh、左右はvwと変えるというのはちょっと違和感があるのでどうしているか気になります。
仰る通りです。訂正します。
昔のブラウザで使っていたvmaxの旧名と解釈しましたが…どうなんでしょうね
回答3件
0
どのように使い分けるべきでしょうか？
まず大前提として「べき」はありません。仕様に沿って作っていればどう表現するのも製作者しだいです。
padding、marginは上下はvh、左右はvwと変える。
これも「デザインや表現による」のでどちらかに書き換えることにこだわる意味はありません。
vw は画面の横幅に対して比率を保ちたいときに使用し、
vh は画面の縦幅に対して比率を保ちたいときに使用する。それだけです。
%などの相対値と違って固定値なので、縦横比を固定したい要素にvw vh を使うこともあります。
CSS
1div.obj { 2 height: 20vw; 3 width: 10vw; 4 box-sizing: border-box; 5} /* 例：縦横2:1の要素 */
投稿2017/07/27 09:29
総合スコア69407
プロの間でもpadding、marginは上下はvh、左右はvwと変える、またはその逆にするとしても全く問題ないのですね。
何も気にせずに自分が使いたい方を使えばよいというのがプロの間の認識なのですね。
> 全く問題ない
デザインや表現によります。意図通り表示されるかは定かでありません。
> プロの間の認識
私がそう思うだけなので、拡大解釈はされないほうが良いです。
0
ベストアンサー
まず、vmという単位は正式なものではありません。正式にはvmaxとなっています。
そして、この系統の単位は4つありますが、それぞれ以下のような意味です。
vw…画面幅の100分の1vh…画面高さの100分の1vmax…vwとvhの大きい方vmin…vwとvhの小さい方
ということで、よほど狙ったものを作るのでない限り、「上下はvh、左右はvm（vmax）」というのは、完全に意味不明な設定です。通常はvwとvhをセットで使うか、vmaxやvminで組み立てるかの2択です。
投稿2017/07/27 09:07
総合スコア145184
やはり、padding、marginは上下はvh、左右はvwと変えるのは変なので、すべてどちらかに統一すべきという事ですね。
するとsection1でvwを使ったら、234もvmにすべきで、よほどvhにこだわらないといけない場合を除いて、フォント回り以外はすべてvwにするという事で良いのですね。
いえ、「vwとvhをセットで使う」のも充分に合理的です。
すると
プロの間でもpadding、marginは上下はvh、左右はvwと変える、またはその逆にするとしても全く問題ないのですね。
何も気にせずに自分が使いたい方を使えばよいというのがプロの間の認識なのですね。
どれもこれも単なる「単位」です（組み合わせによって動かないことはありません）。自分が意図する表現をできるように使ってください。
了解しました。
padding、marginは上下はvh、左右はvwという感じに混在しても問題がないという認識をします。
0
えっとですね、vwとvhは数値が小さいと期待通りの挙動をしてくれません。
私のAndroid端末の場合ですが、端末の設定で文字の大きさ「中」の場合、7vwより小さい指定はだんだん計算がおかしくなってきます。
たとえばfont-sizeに1vwを指定した場合、本来なら100文字の全角文字が改行なしに表示されるはずですよね。
テストしてもらえば判ると思いますが、全然そうならないのです。
思ったほど小さくなってくれないのです。
marginとpaddingも同様で、vwとvhは数値が小さいと期待通りの間隔を空けてはくれません。
おそらくvwとvhにはある程度の小ささになった時にリミッターが掛かるのだと思います。
emであれば0.5emだとか0.25emは期待通りの挙動になりますので、marginやpaddingにはemを使うべきだと思います。
投稿2017/07/27 17:24
総合スコア162
> font-sizeに1vwを指定した場合
font-sizeは幅ではなく高さの指定では。
【理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference | HTML5Experts.jp】
https://html5experts.jp/takazudo/13339/
あっ、そうですね。
勉強不足ですみません。
今、いろいろと試してみたんですが、marginとpaddingでvwやvhを使用しても変な挙動にはならないみたいです。
<div style="margin: 1vw; padding: 1vw; background-color: pink; box-sizing:border-box; border: thick red solid;">TEST</div>
<div style="margin: 1%; padding: 1%; background-color: pink; box-sizing:border-box; border: thick red solid;">TEST</div>
以前、Chromeで難儀した記憶があるのですが、修正されたのでしょうか。
なんにしても申し訳ないです。
うーん結局昔はmarginには使えなかったが現在は使えるようになったという認識でよいでしょうか？
font-sizeはvwは使わずvhを使うべきという事でよいでしょうか？
つまりfont-size以外はすでに問題なく使えるという事ですね・
あまりに小さくて文字が読めなくなるのを防ぐために、font-sizeには（どんな単位で指定するかと関係なく）最小限度が存在しています。vwやvhの責任ではありません。
> maisumakun さん
たとえば font-size: 0.1em を指定すると読め無くなるほど小さくなるのに、1vwだと横幅の1/100にならないという現象があったのです。
最小限度があるというよりも縮小割合の計算がだんだん変になってくるという感じでした（数値を下げるほどに狂いが大きくなっていく）。
最小限度であれば、あるところを境にしてそこから文字の大きさが変わらなくなるはずですが、そういうのじゃなかったです。
> amebatv さん
自分のPC、Mac、Android、iPod touch の各種ブラウザで確認してみましたが、すべて期待通りのmarginとpaddingを空けてくれます。
お騒がせしてすみませんでした。
fontsize以外はすでに使えますね。
あなたの回答
tips
プレビュー
