Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

【css】ちょっとややこしいけど、使いやすいと知った"em"

W3Cさんを参照してみました。em,rem,px。3つを使い分けることで、レイアウトしやすくなりそう。

em --- 流動的

rem --- 準・流動的

px --- 固定的

 

ただ、少しだけややこしいかも。。

 

CSS Values and Units Module / Level 3 - W3C

W3C CR*1 / 2016.09.29

 

https://www.w3.org/TR/2016/CR-css-values-3-20160929/#font-relative-lengths

5.1.1. Font-relative lengths: the em, ex, ch, rem units

Aside from rem (which refers to the font-size of the root element), the font-relative lengths refer to the font metrics of the element on which they are used. The exception is when they occur in the value of the font-size property itself, in which case they refer to the computed font metrics of the parent element (or the computed font metrics corresponding to the initial values of the font property, if the element has no parent).

em unit
Equal to the computed value of the font-size property of the element on which it is used.
The rule:

h1 { line-height: 1.2em }


means that the line height of h1 elements will be 20% greater than the font size of h1 element. On the other hand:

h1 { font-size: 1.2em }

means that the font size of h1 elements will be 20% greater than the computed font size inherited by h1 elements.

 

ワシ的に纏めると…

rem

- html要素font-sizeプロパティに対する比率。指定のない場合はブラウザ標準の16px。

- remは、remを使う要素・プロパティに関係なく常に16pxが基準 (html要素のfont-sizeプロパティを変えない限り)。一方、emは、「使うプロパティ」によって基準元が変わる

 

em

( i )font-sizeプロパティに使った場合

親要素のfont-sizeに対する比率 /

[例]

<style>
.parent {
    font-size: 16px;
    }
.sample {
    font-size: 3em;
    }
</style>
<body>
<div class="parent">
   <div class="sample">
   </div>
</div>
</body>

 

 

➜ .sampleの親要素.parentのfont-sizeの3倍 ➜ 16px × 3 = 48px 

 

 

 

( ii )それ以外のプロパティに使った場合

そのプロパティの属するfont-sizeに対する比率

[例]


.sample {
   font-size: 16px;
   margin-top: 3em;
}

 

.sampleのfont-size:16px; の3倍のmargin-top幅 ➜ 16px × 3 = 48px

 

 

デモ - em, rem 比較

( i )font-sizeプロパティに使った場合

16px × 3rem = 48px ( 16px はhtmlのフォントサイズ。指定なし( デフォルト) → 16px

JS Bin on jsbin.com

 

25px × 3em = 75px

JS Bin on jsbin.com

 

( ii )それ以外のプロパティに使った場合

JS Bin on jsbin.com

 

JS Bin on jsbin.com

 

*1:W3Cの"Specification 進捗段階 / まとめ表 " はコチラのページ最下部 ➜ --- http://ddramonqssecret.hatenadiary.jp/entry/2016/07/08/174131

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̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️