Kazuma Labolatory's

Nothing is Impossible. ✿


フォントサイズの単位 / em, rem の違い

CSSのfont-size: の単位について。

普段はpx,% がよく使われている。






   H1 { font-size: 2em }


When used to specify font sizes, the em unit refers to the font size of the parent element. So, in the example above, the font size of the h1 element is set to be two times the font size of the body element. In order to find what the font size of the h1 element will be, we need to know the font size of body . Since this isn't specified in the the style sheet, the browser will have to find it from somewhere else - a good place to look is in the user's preferences. So, if the user has set the normal font size to be 10 points, the size of the h1 element will be 20 points. This will make document headlines stand out relative to the the surrounding text. Therefore: always use ems to set font sizes.

Chapter 4 The amazing em unit and other best practices - W3C -WAI(Web Accesibility Interactive)




To make it even easier to write style rules that depend only on the default font size, CSS has since 2013 a new unit: the rem. The rem (for “root em”) is the font size of the root element of the document. Unlike the em, which may be different for each element, the rem is constant throughout the document. E.g., to give P and H1 elements the same left margin, compare this pre-2013 style sheet:


   p {  margin-left: 1em }
   h1 { font-size: 3em; 
        margin-left: 0.333em }

with the new version:


    p {  margin-left: 1rem }
    h1 { font-size: 3em;
         margin-left: 1rem }

Other new units make it possible to specify sizes relative to the reader's window. These are the vw and vh. The vw is 1/100th of the window's width and the vh is 1/100th of the window's height. There is also vmin, which stands for whichever is the smallest of vw and vh. And vmax. (You can guess what it does.)


Because they are so new, they don't work everywhere yet. But, as of early 2015, several browsers support them.

Web Style Sheets CSS tips & tricks- W3C -


 "rem"の文章はdraft段階なのか、大元のDocumentが多分削除?された様子。。元のspecification の全文を見つける事が出来ませでした(๑´Д`ก).。oO



rem、かなり汎用性ありそう( ・ㅂ・)و ̑̑





HTML における"root element" とは何か


4. The Element of HTML / HTML5 - W3C Recommendation



The html element represents the root of an HTML document.




HTML Reference -W3C




The html element represents the root of a document.



default property

    html {
       display: block; }
    html:focus {
       outline: none; }





CSS :root Selector -  CSS Selector Reference / W3Schools.com



Definition and Usage

The :root selector matches the document's root element.

In HTML, the root element is always the html element.




Remove all ads
This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
Background Photos is downloaded by Unsplash.com. Thanks!
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️