質問: **htmlまたはbodyのように、全体基準となるタグへのfont-size指定は、「%指定」と「px指定」の何れが良いでしょうか?** **100%=16px** ・これは仕様で決まっているのでしょうか? ・それとも現状のブラウザ実装が単にこうなっているだけでしょうか? ・ブラウザのデフォルト値なら敢えて指定しなくても良い気もするのですが... ・将来的に変更される可能性はある? ・モバイル表示の際も適用される? **%指定** ・pxではない方が柔軟に対応できる? ・将来的に仮に「100%=16px」でなくなったとしても対応できる? **16px** ・100%指定すると、もしかすると一部のブラウザでフォントサイズが異なったりすることもあり得る? ・その場合はpx指定の方が確実?
回答: デフォルトのフォントサイズが16pxというのは、「現在の多くのブラウザの**デフォルト**設定がそうなっている」というだけです。例えばChromeでは普通に設定項目として存在します。 !画像の説明をここに入力 % em rem といった相対値のわかりやすい利点は、祖先要素(ルート要素など)のfont-sizeを変えることでまとめてフォントサイズを変更することができる、というものです。文字サイズ変更ボタンをJavaScriptで実装する場合などでは特に便利です。逆に、祖先要素のフォントサイズに関わらず特定のサイズに固定したい場合は px 等による絶対値指定を行います。 また % や em は親要素のフォントサイズが基準になるので、入れ子にすればどんどん小さく・大きくなっていきます。入れ子になるタグでは便利かもしれません。逆にこれを避けたい場合は、常にルート要素のフォントサイズを基準にする*2 rem を使うと便利です。 全てを相対値で指定した場合、ブラウザのデフォルトのフォントサイズに依存することになりますが、冒頭に書いたようにこれはユーザーによる設定や環境によって変化します。ユーザーの好みやブラウザの推奨設定を反映するという意味ではよい方法*1ではありますが、フォントサイズが変化してもレイアウトが崩れないように設計しなければなりません。 それが難しい場合に、全体的には相対値を使いつつも環境によっては左右されない方法が、ルート要素にだけ px による絶対値指定を行うというものです。 *1: 特に古いIEには現在主流のズーム機能が存在せず、ルート要素のフォントサイズの変更をすることでしか文字を大きくする方法がなかったので、絶対値指定されていると不便という話がありました。 *2: 相対値の基準となる値は計算された値 (computed value) なので、基準となる要素に font-size が指定されていなければ、継承された値、もしくはルート要素であればデフォルト値が使われます。またルート要素で相対値を使用した場合、デフォルトのフォントサイズを基準に計算されます。