【HTML5/CSS3】CSSに書かれてるem,rem

Programming177 views

文字のサイズ指定をしようと思ってソースを眺めていたら出てきた font-size: 1.2rem;

emって書かれてるところとremって書かれてるところの2種類がありました。

最近勉強したのでメモメモ_φ(･_･

とりあえずサンプルコード。

HTML

<div class="main">
    メインテキスト
    <div class="sub">
        サブテキスト
    </div>
</div>

上記の文字指定をremで行うと、

CSS

html {
    font-size: 10px;
}
.main {
    font-size: 1.1rem;
}
.sub {
    font-size: 1.1rem;
}

この時、各文字のフォントサイズは、
メインテキスト　10px(htmlのサイズ) × 1.1 = 11px
サブテキスト　　10px(htmlのサイズ) × 1.1 = 11px

一方、emを使うと、

CSS

html {
    font-size: 10px;
}
.main {
    font-size: 1.1em;
}
.sub {
    font-size: 1.1em;
}

この時、各文字のフォントサイズは、
メインテキスト　10px(htmlのサイズ) × 1.1 = 11px
サブテキスト　　11px(mainのサイズ) × 1.1 = 12.1px
となる。

remの場合はルート要素のfontsizeに対する倍率で制御する。

今日も一つ賢くなりました！

関連記事