kitaoka

CSS3の「rem」でフォントサイズ指定

フォントサイズを指定するとき、「em」、「%」、「px」を使って指定することが多いと思いますが、
CSS3から利用可能になった「rem」という新しい単位について、指定方法など調べてみました。

 

「rem」とは、「root」+「em」という意味で、
root要素(html要素)に対して相対的にフォントサイズが指定できます。



「em」や「%」などの従来の相対指定と違って、親要素を継承しないという特徴があり、
入れ子にするとどんどん拡大、縮小されてしまったり、指定に細かな計算が必要だったりすることもありません。
常にroot要素に対して「何倍」という使い方ができるので、指定の仕方が非常にわかりやすく、便利です。

 

下記のように、htmlに「font-size: 62.5%;」を指定しておくと、「10px = 1rem」となるので、
px単位で計算ができます。

 

html {
      font-size: 62.5%; /*ベースを10pxにしています*/
}
body {
      font-size: 1.0rem; /*10px*/
}
h1 {
      font-size: 1.4rem; /*14px*/
}

 

 

ただ、CSS3のため、対応ブラウザが制限されてしまうという問題があります。

remのブラウザ別対応状況

 

IE8以下の未対応ブラウザに対しては、下記のように最初に「px」で定義し、
次に「rem」で再び定義しなければならないようです。

 

html { 
      font-size: 62.5%; 
}
body { 
      font-size: 10px; font-size: 1.0rem;
}
h1 { 
      font-size: 14px; font-size: 1.4rem; 
}

 

ブラウザの対応状況なども考慮しつつ、スマートフォン・タブレットなどHTML5/CSS3が中心の制作などでは、
利用していくと便利だと思います。

 

【参考サイト】
フォントサイズの指定はCSS3の「rem」が便利そう | HTML5 – CSS3 mag

新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら