文字サイズにremを使ってみる
これまで文字サイズはpxを使って指定してきましたが、font-sizeをpxで指定してしまうと「font-size を px で指定するとブラウザの文字調節機能が作動しない」という問題が起こります。Chrome だと「設定 → デザイン → フォントサイズ」の項目です。
emを使ったフォントサイズ
emは親要素のフォントサイズをそのまま継承します。一見すると判りやすいですが構造が複雑になってくると、複利計算されてしまい判り難くなってしまいます。
remを使ったフォントサイズ
次にremを使ったフォントサイズの指定です。
「rem」とは、「em」や「%」の場合、親要素（が基準）に対して相対的に指定する単位になりますが、「rem」は「root em」の略の通り、root要素（最上位の要素）に対して相対的に指定する単位の事です。
remを使う時の注意点
remをそのまま使うと計算式が非常に複雑になるので、注意が必要です。
主要ブラウザーのデフォルトの文字サイズである16pxを基準値として使い回せるように、まずはベースフォントサイズを作ります。htmlに「%」を使って、基準値サイズの「16px」を「10px」になるように記述します。こうすることで、フォントのサイズを「16px」にするためには「1.6rem」、「20px」にするには「2rem」という風にわかりやすい値で指定できるようになります。
また、bodyl要素に「font-size: 1.6rem;」を指定しないとfont-sizeを指定していない箇所のfont-sizeが全て10pxになってしまうので注意が必要です。
html { font-size: 62.5%; } /* 10px */
body { font-size: 1.6rem; } /* 16px */
h1 {
font-size:4.0rem; /* 40px */
}
ただしこの方法だと、font-size: 62.5%を指定していない外部のCSSを使用する時にそのCSSでemとかremとか使われていると崩れる可能性があります。
SCSSの場合
@function rem($px) {
@return ($px / 16) * 1rem;
}
.my-button {
font-size: rem(18); /* font-sizeは18px相当にする */
}
Sassでのfunction関数
まずは関数の定義をします。引数を囲む( )は、引数があってもなくても必要です。
@function 関数名(引数) {
@return
}
実際に使ってみます
@function colorRed() {
@return #00f
}
.test {
color: colorRed();
}