単位の種類は何を基準に決めればいいでしょうか？

質問

ｈｔｍｌでサイトを作る際の単位の種類は何を基準に決めればいいでしょうか？

emやpxや％などいろいろありますが、
どうやって使い分けしていけばいいでしょうか？

画像ならｐｘ、
文字ならem
など、基準があれば教えてください。

回答No.3

ORUKA1951

一律にこれがよいとは言えないです。
＞画像ならｐｘ、文字ならem など基準があれば・・・
　画像は置換インライン要素、文字は非置換インライン要素です。非置換インライン要素はwidthプロパティを持ちませんし、置換インライン要素は置換される内容のサイズがデフォルトです。
　<p><span style="width:20px">ここは</span>テストの<img style="width:240px" src="" width="" height="" alt="">です。</p>
の場合、spanは指定できないですが、画像は指定できる。
Visual formatting model details - CSS 2.1 spec (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visudet.html#Computing_widths_and_margins )
10.3 幅とマージンの計算( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visudet.html#Computing_widths_and_margins )

　一方ボックスの場合は、自身の場合や抱合しているブロックがstaticであるかないかなどにも関わります。

　何が言いたいかと言うと、「文字なら、画像なら・・」ではなく、
・それぞれのサイズを何によって決めたらよいか
　が判断基準になるからです。

　最近は、スクリーンメディア一つとっても、スマホから巨大なディスプレイまで様々な端末があります。そのために、ウィンドウサイズやボックスのサイズはリキッドで指定することが多いでしょう。
　分かりやすいのでHTML向けに記述すると
header,section,footer{width:100%;min-width:470px;max-width:1000px;margin/o auto;}
section figure p img{width:80%;height:auto;}
　そのページに対して印刷用スタイルシートを書く場合は
header,section,footer{width:190mm;margin:0 auto;}
section figure p img{width:150mm;height:auto;}
　とするでしょう。

　一方フォントのサイズは、自身を囲んでいる要素のサイズでなく自身のサイズを指定しますから、
　そのページのフォントサイズをユーザーの指定に合わせるなら、%やemで良いでしょうし、著者から強制的に指定するならpx（印刷用はptとかmm）で指定するでしょう。
　私は視覚弱者を考えて、フォントサイズは%やemなど相対サイズで指定することが多いです。

　サイズの単位の選択は、それぞれのプロパティによって意味が変わります。width:とfont-size:のように・・

　どのサイズが良いかは、その場その場に合わせて著者が熟慮して指定すべきであって、これが良い、悪いという基準はないでしょう。

回答No.2

tracer

InternetExploer10以上を対象にできるなら、画像以外はremが便利でしょう。
画像に関しては、レスポンシブ対応が多いでしょうから、html側では実際の画像サイズ、css側では%指定が多いのではないでしょうか。

詳しくは以下をどうぞ。
ただの検索結果です。

rem
https://www.google.co.jp/search?sourceid=chrome-psyapi2&ion=1&espv=2&es_th=1&ie=UTF-8&q=rem%20css

レスポンシブ
https://www.google.co.jp/search?num=100&newwindow=1&safe=off&espv=2&q=%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96%E3%80%80%E7%94%BB%E5%83%8F%E3%80%80%E5%8D%98%E4%BD%8D&oq=%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96%E3%80%80%E7%94%BB%E5%83%8F%E3%80%80%E5%8D%98%E4%BD%8D&gs_l=serp.3...32934.37043.0.37351.27.26.0.0.0.5.155.2356.19j7.26.0....0...1c.1j4.57.serp..9.18.1627._eBHq4UKH4c

回答No.1

-has

各種単位の違いは、絶対値か相対値かです。

emや％：　相対的なサイズを指定。
pxは：　絶対的なサイズを指定。

・文字は画面の標準の一文字の大きさを採用という意味で　emや%
・レイアウトの幅などは　%
・画像でpxを使ってもmax-widthなどを決めておく

・・・という流れになってきているように感じます。

PCとスマホ数が近々逆転すると言われていますので、
画面サイズが多すぎて、絶対的なサイズでデザインする時代ではなくなっているようです。