質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

4回答

5000閲覧

CSSのフォントサイズ指定に px 単位を使わないのはなぜですか?

hello-world

総合スコア1342

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2015/12/29 10:22

Twitter Bootstrapを始め、CSS中の文字サイズの指定は、pxの代わりにemを使っているものが多いように思います。
中には 24px2.4emと書けるようにわざわざ font-size: 62.5%;のような設定をしているものすら見受けられます。

確かに2000年代のブラウザは拡縮しても画像やpx単位で指定した文字のサイズは変化しませんでした。しかし今日のブラウザはそうではありません。

未だなおpx単位を避ける理由があれば教えて下さい。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

bootstrapのボタンのようにbootstrapでもpx指定のものもあります。
要は使い分けですね。

ブラウザ側でユーザがデフォルト文字サイズを指定できますし、視力の弱い人は大きめに設定しているかも知れません。マニュアル、小説、blogのような文章主体のページは特別な理由が無ければユーザの設定を優先するためにem等を利用すべきでしょう。

広告やバナー(バナーは画像が多いですが)、大きさの決まったアートやグラフなどの図表、印刷のため1ページの大きさが固定のものなど、構成パーツの一部にpx指定で大きさが決まったものを含む場合は、ユーザの設定で文字サイズが変わるとデザインが崩れるため、pxで指定することになります。

投稿2015/12/29 14:01

hirohiro

総合スコア2068

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sekitaka_1214

2015/12/29 15:27

なるほど。ユニバーサルデザイン的な一面もあるんですね。
guest

0

実際の例はこのへんでしょうか。なるほど。
https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css#L1086

回答ではなくて質問で恐縮ですが、

あなたはpx単位を使うべきだと考えているのでしょうか。だとすると、その理由はなんですか。

投稿2015/12/29 10:54

編集2015/12/29 10:57
matobaa

総合スコア2493

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hello-world

2015/12/29 12:19

- 画像サイズやmargin等はpxで指定することが多いので、同じ単位のほうが楽なため - 作成されたHTMLを見ながら「ここは 24pxにしよう」などの提案がpxだと出来ますが、em, remは親要素、ルート要素に依存するのでこのような用途で利用できないため などです。
matobaa

2015/12/29 12:41

なるほど。フロートとか回り込みとかテキストの長さとかを無視できるような場面なんですね。そういった理由がちゃんとあるならpxで指定するのが妥当でしょう。誰かがフォントはemで指定するもんだって言ってた? そんなの無視しちゃえばいいんじゃないですか。
guest

0

RetinaのiPhoneで24pxを指定して見るのと、一般PCで24px指定で見るので見比べてみてはどうでしょうか?

と偉そうに描いてみましたが、私も比べていません。
schooの授業でその辺りの説明があったので、ご覧になってはどうでしょうか?

どうやら高解像度スマホの登場によって、そちらの方がメリットが或るようです。

投稿2015/12/29 15:16

sekitaka_1214

総合スコア509

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

参考情報

...
単位 指定 特徴
px 絶対指定 指定したサイズ
em 相対指定 親要素を基準に計算される
% 相対指定 親要素を基準に計算される
rem 相対指定 root要素(html)を基準に計算される
...

... それぞれの特徴をきちんと理解して使い分けていきましょう...
....
フォントサイズの指定方法は、必ずしもemを使いましょう!ということでは

ありませんが、ユーザビリティの観点からem指定を使うのがいまどきの主流です。
ちなみに、emで指定する際、表示される実際のピクセルフォントサイズから
emサイズをいちいち計算するのはちょっとした手間ですよね。
pxをemに自動計算してくれるサイトがありますので使ってみるのもひとつの手です。

...

投稿2015/12/29 11:20

katoy

総合スコア22324

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問