1

今CSSを学んでいるのですが、素朴な疑問として、サイズにおける px の使用するタイミングが知りたいです。

デザイン・コーディングしてて思うのが、pxで指定するとよくレイアウト崩れや、ウインドウサイズを変えたときに縦横比を保ったまま伸縮されなくて困ったりします。
なので、pxより%で指定したほうがいいのかと思ったりします。
pxの使用どころはどういったタイミングなのでしょうか?

特に具体的なシチュエーションとして、レスポンシブデザインのデザイン・コードで既存のものでpxが使われていたりします。(margin,padding,border,heightなど)
レスポンシブなので絶対値が設定されていると不具合が起きそうですが、それはどうなのでしょうか?

教えて頂けますと幸いです。


【追記】
こういった記事も見つけました。

ちゃんと使い分けてる?CSSのpx, em, rem, %, vw単位の違い

メディアクエリ → em
font-size → em / rem
borderなど常に見た目が変わらない → px
それ以外 → em / rem

一つの参考に致します。

1 件の回答 1

2

まえおき

デザイン・コーディングしてて思うのが、pxで指定するとよくレイアウト崩れや、ウインドウサイズを変えたときに縦横比を保ったまま伸縮されなくて困ったりします。

困るのであれば、pxは指定しないで、別のものを使う方がよいでしょう。

pxの使用どころはどういったタイミングなのでしょうか?

固定しても困らないとき、つまり意図的に固定させたいときに使います。

使いたい場面

多くの場面で使いたい場面が考えられますが、例えば

ボタンのサイズ聖杯レイアウトの左右のカラム幅 そして パディング等が考えられます。

またコレ以上でかくなっては大きすぎるみたいなときに最大値として設定することもできます。(本回答ではこのあたりは回答を省きますので max-widthmin-width で検索するとより理解が深まるかもしれません)

ボタン

ボタンであれば、ボタンのサイズを画面のサイズに関わらず固定にしてしまっても違和感がないことが多いです。

もしスマホサイズだとボタンが大きすぎるというときは、PCサイズ用の固定値、スマホサイズ用の固定値の2パターン作ってあげれば良く、すべての画面サイズに合わせるように %等で指定する必要はあまりありません。(あるいは タブレットサイズも含めて3パターン)

聖杯レイアウト

たまたま本回答のために検索して出てきた記事ですが、Holy Grail Layout(聖杯レイアウト) を作る最短の HTML - Qiita の例でも左右のカラムは固定にして真ん中のカラムのみが伸び縮みするコードとなっていました。

聖杯レイアウトでは、真ん中のカラムがメインコンテンツであり、そこに情報が集中するので、そこを1番見やすくするために伸縮し、左右の幅は常に固定にしておくというのはレイアウトの戦略として間違いではないと言えると思います。

また左右に置かれるのは通常メニューであり、メニューに置かれる要素が画面サイズに応じて大きくなる必要はないことも多いはずです。 スマホサイズになった場合はそもそもこの左右のカラムがなくなって、ハンバーガーメニュー等に入ることも多いです。ですので、スマホのような小さな画面のときは画面に応じて小さくなるではなく、どこか別のところに収納されるという考え方になります(もしくはハンバーガーメニュー等を使用しない場合は、配置する場所が変わるという考え方もある)。

パディング

パディング は文字を読みやすくするために、ここに間隔が欲しいみたいな場合であれば、これまた画面サイズに比例して大きくなる必要はなくそこに隙間があれば要件を満たせるので、固定の隙間を用意すれば、読みやすさは保たれます。このため、わざわざ画面サイズに応じて逐一変える必要がない場面が多いです。

1
  • 回答頂きありがとうございます!具体的でわかりやすいです。参考にさせていただきます
    – user40231
    Commented 2021年1月17日 22:07

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。