-
1:ID:lgniaK · 2週間前

スマートフォンサイトのコーディングの際にmargin、padding、font-sizeの指定に
px、vwどちらを使っていますか?またどちらが主流だと思いますか?

17 件の回答

2:ID:cXvP.m · 2週間前

どのデバイスでも同じような見た目になればなんでもええ!

3:ID:pj0Cca · 2週間前

場合によって使い分けてるけど主流はpxだと思う。

4:ID:YpmK4. · 2週間前

fontは文字をロゴっぽく画像みたいに扱いたい部分はvw使います。それ以外はrem。
たいていレスポンシブ前提だから、画面をresizeしていったときに細かく指定しなくてもいいように最近vwなど相対的な幅を指定することが多い。
主流はわからないな。他人のソース見るとみんな場所によって使い分けてる印象。

5:ID:4equn5 · 2週間前

Re:2
コメントありがとうございます。

おっしゃる通りなのですが、iPhone8とiPhone8plusといった解像度の異なる端末で確認する際に、ピクセルで指定するとデザインと見た目が変わるという問題が発生します。

厳密にデザインに合わせる場合はVWや%で指定する必要があるのですが、ピクセルで指定していても端末間の見え方の違いについて突っ込まれることってほぼないと思います。

端末間の見え方の違いについて気にしてる人は少ない、もしくは気になっても許容範囲としてスルーするされているのかな?と気になって質問させていただいております。

6:ID:4equn5 · 2週間前

Re:4
フォントはremというところは同じです。
あと、場所や案件によって使い分けというとこも同意です。

ただ、デザインのマージンを図って、その数値(ピクセル)をMIXINでVWに変換するような書き方が回りくどいというか、どうもしっくりこないんですよね。その数ピクセルに価値はあるのか?と感じてしまいます。そこも案件によるんですが。。

7:ID:Bi9OE0 · 2週間前

remがある以上、pxを使う理由はあまりなさそう

8:ID:4equn5 · 2週間前

Re:7
コメントありがとうございます。
remで指定した場合でもルートのfont-sizeをvwにするかpxにするかでmargin、padding、font-sizeが端末のサイズに合わせて可変になるか固定になるかが変わってくると思います。
可変、固定どちらにしようか?というところで悩んでおります。

9:ID:HJARtV · 2週間前

基本的にスマホはリキッドで、vw指定。

既に既存のサイトがあるなら指定方法を合わせて固定という場合もあるけど、一部画面幅100%の写真の上にテキストが乗るというようなデザインならvwという風にページ内でも使い分ける。

10:ID:iydpda · 2週間前

margin/padding は px、font-size は html/body には px で、あとは rem。margin/padding には vw/vh は使わないな。ちなみに基本どれにも vw は使わない。width には % でいい気がする。vh は height にはよく使う。% が効かない場面が多いので。

11:ID:iydpda · 2週間前

Re:10
追記。PCブラウザでの vw は縦スクロールバーを含んでしまうので、width:100vw; とかにするとウィンドウをはみ出して横スクロールバーが発生する。スマホでは心配ないが、width に vw を使うのはお勧めしない。

12:ID:4equn5 · 2週間前

皆さまコメントありがとうございます。スレ主です。
最近はスマホサイトのコーディング時にはmargin、padding、font-sizeすべてvw、%などですべて可変にしていたのですが、500~600pxくらいの時にフォントが大きすぎるのをケアするか?とか修正指示でピクセルで指定されたりする場合があるので、基本はpxで固定しちゃったほうが正解なんじゃないか?という気もしています。

13:ID:wZOcri · 2週間前

Re:12
font-max-size とかあればいいんですけどねw
わたくしは、本文系や小さい文字はpxで、あとはほとんどvwか%ですね。
margin,paddingも相対的なバランスを考えると可変の方がしっくりくるケースが多いと思う。
どう見せたいか考え方で変わる感じです。

14:ID:YhkoGH · 2週間前

基本vwか%で指定してる。
こうすればデバイスの画面サイズごとのサイズを明示的にコーディングす必要が無いし、レイアウトによつてはちょっと修正するだけでそのままPC〜モバイルまで対応できたりするし。

15:ID:4equn5 · 2週間前

Re:14
ありがとうございます。
フォントもマージンも全部VW、%にしたほうが良いような気がしてきました。

結局のところ早くて、正確にできて、代理店やクライアントから突っ込みが入りにくい作り方が一番良いわけで、VWのほうが端末間の違いを気にしなくてもいい分、作るのが楽かもですね。

16:ID:ZkN7HM · 2週間前

みんなviewport使わんの?

17:ID:cXvP.m · 2週間前

Re:12
font-sizeまで可変にする神対応してる制作者少ないと思いますよ!

18:ID:Bi9OE0 · 2週間前

vmaxとかvminとかをmediaqueryと併用して使うと幸せになれるかもしれんね。
やったことないけど。

コメントの受付は終了しました。

一緒に読まれている質問

ページ上部に戻る