73367


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

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

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

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

* * *

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

[ちゃんと使い分けてる？CSSのpx, em, rem, %,
vw単位の違い](https://note.com/takamoso/n/nde1275183086)

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

一つの参考に致します。


CC BY-SA 4.0
2021-01-17T02:14:21.707
73355
2021-01-17T23:48:15.850
2021-01-17T06:20:49.663
3060
40231
question
html css
CSSにおけるpxの使い所を知りたい


# まえおき

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

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

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

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

# 使いたい場面

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

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

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

## ボタン

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

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

## 聖杯レイアウト

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

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

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

## パディング

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


CC BY-SA 4.0
2021-01-17T13:36:04.077
73367
2021-01-17T23:48:15.850
2021-01-17T23:48:15.850
9008
9008
73355
answer