web-dev-qa-db-ja.com

bodyまたはhtml要素にデフォルトのフォントサイズを設定する必要がありますか？

ウェブサイトを作成するときは、emsで作業するのが好きです。したがって、body要素にfont-sizeのデフォルト100.01%を設定します。

私の質問は、bodyまたはhtml要素にデフォルトのfont-sizeを設定する必要がありますか？両方の長所と短所（ある場合）は何ですか？

htmlcssfont-size
50
joshnh

remユニットが普及し始めているので、ルート要素（htmlタグ）にベースフォントサイズを設定することをお勧めします（remはr ootを表しますem）。

38
joshnh

htmlまたはbodyのいずれかにベースfont-sizeを設定してemsでサイジングできるようにすることには、利点や欠点はないと思います。どちらも同じ効果があります。

質問とは無関係：

ただし、別のデフォルトfont-sizeを使用することをお勧めします。私はそれを次のように設定します：

body {
    font-size: 62.5%;
}

これを行うと、デフォルトのfont-sizeが16pxから10pxに減少します。これにより、困難な計算が不要になるため、font-sizeの選択がはるかに簡単になります。 1emは10pxと等しいため、pxサイズを計算するには10を掛ける必要があります。

  • 1.0em = 10px
  • 1.4em = 14px
  • 1.8em = 18px
  • 2.2em = 22px
20
tw16

本当にルールを守りながら柔軟性を維持したい場合は、次のことを考慮する必要があります。

  • htmlのフォントサイズはrootフォントサイズです。つまり、rem計算のベースとして使用されますが、それだけです。実際のテキストサイズの計算には使用しないでください。一部のブラウザーでは一種のトリックにすぎません。
  • bodyのfont-sizeはテキストのデフォルトのfont-sizeです。定義を上書きしない限り、すべてのテキストはこのサイズでなければなりません
  • 特別な要素のサイズはremで、フォールバックはピクセルである必要があります

CSSでの表示は次のとおりです。

html {
    font-size: 100% /* or 62.5% or whatever you like, it doesn't matter, it's just a browser fix, however "rem" units will be based on that value, so make it confortable for calculations */
}

body {
    font-size: 0.75em; /* That is your text's default font size. Here i chose 12px */
}

h1 { /* or whatever element you want to change the font size of */
    font-size: 20px; /* for browsers that don't understand the "rem" unit */
    font-size: 1.25rem; /* which equals to 20px if html's font-size was set to 100% */
}

すべてのページの要素はbody定義から継承する必要がありますが、HTMLリセットでよく見られるように、代わりにすべてのタグを含む定義を使用できます。

a,
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    font-size: 0.75rem;
}

ただし、このリセットはお勧めしません。この種のトリックを回避するための標準が作成されています。

18
Ninj