CSSの単位まとめ 第2回

前回はemでした。気づいたら★が沢山!! ありがとうございます! 今日はemが進化した単位についてです。

rem

ざっくり言うと、Root emのこと。つまり、rootの標準文字サイズが1remです。rootとは、html要素のことです。

では使い方。

まずHTML

<p class="font-1rem">フォントサイズ16px</p>
<p class="font-2rem">フォントサイズ32px<span class="font-1rem">フォントサイズ16px</span></p>

*html要素の文字サイズを指定していない場合、ブラウザの標準フォントサイズ1remとしてさいようされます。表記の16pxは、私の環境の標準文字サイズとなっております。

そしてCSS

.font-1rem {
    font-size: 1rem;
}

.font-2rem {
    font-size: 2rem;
}

結果

フォントサイズ16px

フォントサイズ32pxフォントサイズ16px

marginで使ってみる

まずHTML

<div class="outer_box">
    <div class="innner_box">
        マージン32px
        <div class="content_box">
             マージン16px
        </div>
    </div>
</div>

そしてCSS

.outer_box {
    border: 2px solid #ffafaf; 
}
.inner_box {
    border: 2px solid #afffaf;
    margin: 2rem;
    font-size: 2rem;
}
.content_box {
    border: 2px solid #afafff;
    margin: 1rem;
    font-size: 1rem;
}

で、結果

マージン32px

マージン16px

まとめ

emは要素の階層が深くなるに連れて扱いずらくなっていくのに対して、親要素によりベースが変わったりはしないので使いやすいと思います。よく紹介されているのは1.2rem=12pxになるようrootのフォントサイズを%で10pxに合わせる方法ですが、私はあまり使わないのです。文字全体を再調整したりする場合柔軟に対応できないからです。ベースを自由に設定できる方が柔軟だと思うからです。ですので、html要素に基本のフォントサイズを16pxとかに決めて見出しなどのサイズを相対的に操作するのがいいのかな。と思っています。

上で述べているのは私の使い方なので、一例として捉えていただければ幸いです。